@Vlad2508

Как сделать затемнение фона при пролистывании?

Есть на сайте https://your-proxy.com/ анимация, при скроле видео начинаеи затухать.
Попробовал сделать так же, но не вышло

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test video</title>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet"/>
  <script src="https://vjs.zencdn.net/7.8.2/video.js"></script>
  <link rel="stylesheet" href="https://itchief.ru/examples/libs/chief-slider/chief-slider.min.css">
  <script defer="" src="https://itchief.ru/examples/libs/chief-slider/chief-slider.min.js"></script>
  </head>
  <body>
<style media="screen">
.bgs__video {width: auto; height: auto; overflow: hidden; position: fixed; z-index: -999; left: 0; right: 0; top: 0; bottom: 0;}
.bgs__video .bgvideo {
width: auto; height: auto; min-width:100%; min-height: 100%; border: 0;
box-shadow: inset 0 0 15px 15px rgba(0, 0, 0, 0.6);
opacity: 0.3;
}
</style>
<div class="bgs__video">
  <video id="bgvideo" class="bgvideo" poster="" loop="" autoplay="" muted="" playsinline="">
    <source src="https://bsteam.clan.su/irontrast/bg.mp4" type='video/mp4'>
  </video>
</div>

<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>
<h1>Текст</h1> <br>

  </body>
  <script type="text/jscript">
  $(window).on('scroll', function() {
    var scrollCoef = 0.0035;

    $('.bgs__video').css({
      opacity: 1 - $(window).scrollTop() * scrollCoef
    })
  });
  </script>
</html>
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
автор забыл подключить jQuery
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы