Видео фон на сайт с эффектом затухания при скролле

Всем привет! В этой статье мы научимся делать видео на весь экран. Его можно использовать как фон для хедара сайта, так и применять для оформления любого другого блока. Думаю, каждый для себя найдет полученным знаниям применение. Плюс к этому мы сделаем плавное затухание видео при скроле. Выглядеть это будет так:

Посмотреть результат

Содержание файлов:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Видео на весь экран и крутой эффект скролла.</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <video src="1.mp4" autoplay muted loop></video>
    </header>

    <section>
        <div class="content">
            <h2>Видео на весь экран и крутой эффект скролла.</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci maiores quibusdam quod aperiam iure eveniet voluptatibus ipsum, dicta, est asperiores ratione! Voluptas fuga provident est quo earum, ipsa cumque at corporis maiores expedita eligendi harum veniam, minima tempora ipsum in. Non in omnis molestias dolores minima, sit nulla modi error mollitia cum! Quod reprehenderit cum iusto minima aliquam laborum excepturi, provident exercitationem fugit hic nesciunt, velit illo omnis ratione temporibus saepe? Repudiandae pariatur doloribus, labore sequi, harum iusto ut ratione magni non explicabo quaerat nobis officia enim veritatis, architecto debitis odio maxime quas dolores voluptate tenetur? Officiis eligendi ex ipsum nostrum consequatur, excepturi laudantium beatae sit exercitationem rem voluptates nulla obcaecati dignissimos! Est facere animi at veniam ipsum quibusdam, pariatur incidunt tempore earum reiciendis iure neque repellat molestiae doloremque! Atque magni dolor nisi labore repudiandae qui consequatur neque beatae, quae ab quia perferendis repellendus totam. Consectetur officiis adipisci vel suscipit, aperiam repudiandae dignissimos repellat repellendus quam asperiores deleniti perferendis maiores nihil fugit cum aut, voluptates expedita corporis odit amet similique veritatis veniam sequi. Illum obcaecati laborum similique optio perferendis minus nam dolorum nobis soluta eveniet amet excepturi itaque sint ipsa dicta deserunt, provident consequuntur earum odio quia aperiam! Odio, ad.</p>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>

style.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: roboto, sans-serif;
}

body{
    background-color: yellowgreen;
    color: darkolivegreen;
}

header{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 100px;
}

section{
    min-height: 100vh;
    padding: 60px;
}

video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

h2{
    font-size: 3em;
    margin-bottom: 20px;
}

p{
    font-size: 1.2em;
}

script.js

let video = document.querySelector('video');

window.addEventListener('scroll', function(){
    let value = 1 + window.scrollY/-600;
    video.style.opacity = value;
});

Видео на весь экран рабочий результат:

Чтобы полноценно протестировать поставьте масштаб 0.5x

See the Pen PoqVEaX by AntonAniskovich (@AntonAniskovich) on CodePen.

Видео с пошаговой инструкцией:

Вот и все готово.

Автор видео, которое использовалось в проекте: Kelly Lacy: Pexels

Дорогие друзья если Вам понравилась статья и Вы хотите меня поддержать, то подписывайтесь на мой блог и канал на youtube. Это для меня самая лучшая благодарность. Всем до новых встреч.