Thursday 26 February 2015

Example of Parallax Scrolling


    Hello Readers !

    Here is an example of parallax scrolling with simple script and it is also compatible with

internet explorer.

    Parallax Scrolling :-

    The parallax scrolling web design is in trend, Its shows the background moving at a slower

compared to foreground and its shows a 3D effect when you scroll the page.

    Script :-

            $(document).ready(function() {
                $(window).bind('scroll',function(){
                    parallax();
                })
            })
             function parallax(){
                    var scrollposition=$(window).scrollTop();
                    $('.ground').css('top',(0 - (scrollposition * .1))+'px')
                    $('.box').css('top',(0 + (scrollposition * 1.2))+'px')
                 }

    Html

    copytext

        <div class="main">
            <div class="ground"></div>
            <div class="box"></div>
        </div>

For such more blogs you can visit to http://findnerd.com/NerdDigest
   

No comments:

Post a Comment