jquery Parallax Scrolling plugin (with principle analysis, call method)

Demo Address: http://www.jq22.com/jquery-info1799

jquery plugins, which are available using authentication.

After analyzing the source code summary principle: Set the background style to fixed, determine the browser scrolling distance, when within the window range, call $ (window). Scroll. Synchronized scrolling is performed according to the speed ratio set.

When called, set three necessary parameters: the Data-speed,data-type,background style is fixed

<data-speed= "4"  data-type= "background"  style= " Background:url (...) 50% 0 no-repeat fixed ">    

JS will calculate the scrolling speed according to the Data-speed, the smaller the faster.

can be different processing according to different data-type, can be customized to write code, very convenient.

The background must be fixed.

Parallax.js Source code (jquery is required first)

$ (document). Ready (function(){                            //Cache the Window object$window =$ (window); //Cache the Y offset and the speed of each sprite$ (' [Data-type] '). each (function() {            $( This). Data (' OffsetY ', parseint ($ ( This). attr (' data-offsety '))); $( This). Data (' XPosition ', $ ( This). attr (' data-xposition ')); $( This). Data (' Speed ', $ ( This). attr (' Data-speed '));        }); //For each element the has a Data-type attribute$ (' section[data-type= ' Background "]). each (function(){                //Store Some variables based on where we are        var$self = $ ( This), Offsetcoords=$self. Offset (), Topoffset=Offsetcoords.top; //When the window is scrolled ...$ (window). Scroll (function() {                //If This is an in view            if(($window. scrolltop () + $window. Height ()) > (topoffset) &&((Topoffset+ $self. Height ()) >$window. scrolltop ())) {                    //Scroll the background at Var speed                //The YPos is a negative value because we ' re scrolling it up!                 varYPos =-($window. scrolltop ()/$self. Data (' Speed ')); //If This element have a Y offset then add it on                if($self. Data (' OffsetY ')) ) {YPos+ = $self. Data (' OffsetY '); }                                //Put together our final background position                varcoords = ' 50% ' + yPos + ' px '; //Move the background$self. css ({backgroundposition:coords}); //Check for other sprites$ (' [data-type= ' Sprite '] ', $self). each (function() {                                        //Cache the Sprite                    var$sprite = $ ( This); //Use the same calculation -to-work-out how far to scroll the sprite                    varYPos =-($window. scrolltop ()/$sprite. Data (' Speed ')); varcoords = $sprite. Data (' xposition ') + ' + (YPos + $sprite. Data (' OffsetY ') + ' px ');                                                                                        $sprite. css ({backgroundposition:coords}); }); //Sprites                            //Check for any Videos that need scrolling$ (' [data-type= ' video '] ', $self). each (function() {                                        //Cache the video                    var$video = $ ( This); //there ' s some repetition going on here, so                    //feel free to tidy this section up.                    varYPos =-($window. scrolltop ()/$video. Data (' Speed ')); varcoords = (YPos + $video. Data (' OffsetY ')) + ' px ';                                                                                        $video. css ({top:coords}); }); //Video                        }; //In view            }); //Window Scroll                }); //Each data-type}); //Document Ready

jquery Parallax Scrolling plugin (with principle analysis, call method)