How to change opacity while scrolling the page?

jQuery is used to control and change the opacity during the scrolling of web page. Create a web pages to change the opacity while scrolling the page. The jQuery scroll function is used to scroll the web page and set opacity of text content.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- HTML code to change the opacity of web
    page when scrolling it -->
<!DOCTYPE html>
<html>
      
<head>
    <title>
        Change the opacity during scroll
    </title>
      
    <style>
  
        /* Margin and Padding is set to zero 
        so the body can occupy the full 
        screen page */
        body {
            margin: 0;
            padding: 0;
            background: green;
        }
          
        /* To put the header in the center of 
        the page we used justify-content and 
        align-items and set their value as
        center, You can add any background image */
        .header-bg {
            position: fixed;
            top:0;
            left:0;
            width: 100%;
            height: 300px;
            justify-content: center;
            align-items: center;
            display: flex;
        }
          
        /* Box shadow provides shadow effect 
        to the element */
        .header-bg h2 {
            margin: 0;
            padding: 0;
            color: #000;
            text-align: center;
            padding: 20px;
            max-width: 80%;
        }
  
        /* Set "position:relative" then section can move
        from its original position, by using postion:relative,
        the position of the section is not dependent on the
        container. The box-sizing property is used to include
        the padding and border in an element */
        section {
            position: relative;
            top:100vh;
            padding: 100px;
            width: 100%;
            min-height: 100vh;
            box-sizing: border-box;
        }
        section h2 {
            text-align:center;
            margin: 0 0 50px;
            padding: 0;
            font-size: 40px;
            color: #fff; 
        }
        section p {
            text-align:center;
            color: #fff;
            font-size: 1.3em;
        }
    </style>
</head>
  
<body>
    <div class="header-bg">
        <h2>Change Opactity on Scroll</h2>
    </div>
      
    <section>
        <h2>GeeksforGeeks</h2>
          
        <p>
            A computer science portal for geeks
        </p>
    </section>
  
    <script src=
    </script>
      
    <!-- Script to change opacity when scrolling the web page -->
    <script>
         $(document).ready(function(){
            $(window).scroll(function(){
                $('.header-bg').css("opacity", 1- $(window).scrollTop() / 700)
            })
        })
    </script>
</body>
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.