JQuery

jQuery page scroll with fade effect

jQuery page scroll with fade effect, someone asked me to explain?
By:

Inthis article, I will show you page, scroll down with fading effect. When theuser scrolls down from the top position to the bottom of the browser window. I willshow the page to fade and appear using jQuery animate. It will happen for the firsttime, when user load the page.  

scroll jquery plugin


HTML Code: cssanimation on scroll 

<html xmlns="http://www.w3.org/1999/xhtml">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<head>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {
            /* Everytime the window is scrolled ... */
            $(window).scroll(function () {
                /*Check the location of each desired element */
                $('.hideDiv').each(function (i) {
                    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                    var bottom_of_window =$(window).scrollTop() + $(window).height();
 
                    /* If the object is completely visible in the window */
                    if (bottom_of_window >bottom_of_object) {
                        $(this).animate({ 'opacity': '1' }, 500);
                    }
                });
            });
        });
    </script>

    <style type="text/css">
        #container Div {
            margin: 50px;
            padding: 50px;
            background-color: #1599f1;
        }
 
        .hideDiv {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>Demo div</div>
        <div>Demo div</div>
        <div>Demo div</div>
        <div>Demo div</div>
        <div>Demo div</div>
        <div>Demo div</div>
        <div class="hideDiv">Fade In effect</div>
        <div class="hideDiv">Fade In effect</div>
        <div class="hideDiv">Fade In effect</div>
        <div class="hideDiv">Fade In effect</div>
        <div class="hideDiv">Fade In effect</div>
    </div>
</body>
</html>

We have created a CSS called “hideDiv” there we have defined CSSproperty, set opacity to 0. When the user scroll down, Using jQuery animateproperty changing the opacity to 1 with speed of 500 milliseconds.

Related Article

Post your comments / questions



Recent Article