How to make the video background the white or transparent and change the header color?

Question

Softly speaking, I'm not strong in JS. When we first time scroll a mouse, the video lightens up (opacity?) and the header text changes from white to black. Could you show how to implement this? I'll try to understand with a live example.

Suitable Example below

https://mindbox.ru/

Tnx.

I have already described what I want

Answer 1

Your link doesn't work, so without actual code to look at I can't help much. What I can do is tell you how to get a hover animation to work! Be sure to read the comments in the css to understand what's going on.

.wrapper {
  width: 100%;
  height: 100vh; /* set height equal to 100% of the viewport height */
  background: pink;
  display: flex; /* this allows the child to sit in the middle of the div */
  justify-content: space-around;  /* tells the child to horizontally center itself */
  align-items: center; /* tells the child to vertically center itself */
  }
  
  .child {
  padding: 15vh;
  background: skyblue;  /* for a hover to work, you should always declare the static value (the not-hover value) */
  color: red;  /* ditto above */
  transition: 0.5s;  /* tells the child that, if it is going to change any values, this is how long it should take (.5 seconds). without this, the transition will happen automatically, without a fade. */
  }
  
  .child:hover {  /* when your mouse is hovering over this section... */
    background: white;  /* ...the background color changes to white... */
    color: blue; /* ... and the text color changes to blue */
    }
  

<div class="wrapper">
<div class="child">
Hello World!
</div>
</div>

If you want a more specific initiation for the animation, such as when the user scrolls to this point, you can do it with more complex CSS, but it's easier to do with jquery or javascript.

$(document).scroll(function() {
    var topOfWindow = $(window).scrollTop();
    var bottomOfWindow = topOfWindow + $(window).height();
    var topOfChange = $('.child').offset().top;
    var bottomOfChange = topOfChange + $('.child').height();

    if ((bottomOfChange <= topOfWindow) || (topOfChange >= bottomOfWindow)) {
        $('.myClass').css('background-color', 'red');
    } else if ((bottomOfChange <= bottomOfWindow) && (topOfChange >= topOfWindow)) {
        $('.myClass').css('background-color', 'green');
    }
})

.wrapper {
  width: 100%;
  background: pink;
  display: flex;
  justify-content: space-around;
  align-items: center; 
  }
  
  .child {
    margin: 120vh 0;
  padding: 30vh 40vh;
  background: skyblue;
  }
  
  .myClass {
    background-color: red;
    padding: 5vh;
    transition: 2s; /* the easiest way to add a transition duration to the .css property in jquery */
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Scroll down...
<div class="wrapper">
<div class="child">
<div class="myClass">Hello World</div>
</div>
</div>