How to change opacity while scrolling the page?

04 Oct, 2019
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:
<!-- 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 position: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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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>                    
Output:
ManasChhabra2
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS