Open In App

How to change opacity while scrolling the page?

Improve
Improve
Like Article
Like
Save
Share
Report

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




<!-- 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=
    </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:



Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads