Share a page parallax scrolling switch Jquery.localscroll plugin

Today to share a page parallax scrolling switch Jquery.localscroll plugin. Scroll the mouse liquid bar to see the transition effect of the page. The plugin is for browsers: IE8, 360, FireFox, Chrome, Safari, Opera, Proud tour, Sogou, the window of the world. As follows:

Online preview Source Download

The implemented code.

HTML code:

<div class= "PageWidth" id= "Box_root" > <!--head navigation starts--<div id= "nav" > <a href = "index.html" title= "Back to the Boot page" class= "logo_a" > Webmaster footage </a> <ul id= "menu" > <li class= " "Id=" Mn_home "><a href=" index.html#home "> website home </a> </li> <li id=" mn_about "class=" se lected "><a href=" index.html#about "> Webmaster materials </a> </li> <li id=" mn_news "><a href=" I Ndex.html#news "> News </a> </li> <li id=" mn_products "class=" "><a href=" INDEX.HTML#PR Oducts "> Core projects </a> </li> <li id=" Mn_chanye "class=" "><a href=" Index.html#sector "> Production  Industry </a> </li> <li id= "mn_about" class= "><a href=" index.html#famous "> Famous message </a> </li> <li class= "Last" id= "Mn_contact" ><a href= "index.html#contact" > Contact us </a> </ Li> </ul> </div> <div class= "Top_rim" > <a href= "Index.html#home" > Back to Top </a> </div> <!--head navigation ends--<div id= "Box_main" > <div id= "Home" style= "Backgro und-position:50% -110px; " > <div class= "sprite1" style= "background-position:50% 550px;" > </div> <div class= "Sprite" style= "background-position:50% 0px;" > </div> <div class= "screen" > </div> </div > <div id= "about" style= "background-position:50% -110px;" > <div class= "Contents" > <div class= "About_rim" > &  Lt;div class= "Columnspace" id= "elem-frontspecifies_show01-1367889271850" name= "description page" > <!--                          Adorner style start-<div class= "border_05" >      <div class= "Border_05-topr" > <div class= "BORDER_05-TOPL" > </div> </div> &LT;DIV CL                                        ass= "Border_05-mid" > <div class= "bordercontent" >                                            <div id= "frontspecifies_show01-1367889271850" class= "FRONTSPECIFIES_SHOW01-D3_C1" > <div class= "comptitle_05" > <em><span CLA ss= "Extendlink" ><a href= "Index.html#about_cont" target= "_self" > More details +</a></span></em>                                                </div> <div class= "describe Htmledit" >                                            <div class= "About_txt" > </div> </div> </div> <div class= "Clearbo                                Th "> </div> </div>                        </div> </div> <!--adorner style end-- </div> </div> </div> <div class = "Sprite" style= "background-position:50% 0px;" > </div> <div class= "screen" style= "background-position:50% 550px;" > </div> </div> <div id= "About_cont" style= "background-position:50 % 0px; " > <div class= "Contents" > <div class= "About_rim" > & Lt;p> about Us </p> </div> </div> <div class= "Sprite" style= "background-position:50% 0px;" > </div> <div class= "screen" style= "background-position:50% 550px;" > </div> <div class= "screen1" style= "background-position:50% 110px;" > </div> </div> <div id= "News" style= "background-position:50%-110 px; " > <div class= "Contents" > <div id= "box_news" > <p > News </p> </div> </div> < /div> <div id= "Products" style= "background-position:50% -110px;"                > <div class= "pro_list" > <p> core Projects </p> </div> <div class= "Sprite" style= "background-position:50% 0px;" > </div> <div class= "screen" style= "background-position:50% 220px;" > </div> </div> <div id= "Sector" style= "background-position:50%-1 10px; "                        > <div class= "Contents" > <div class= "sector_img" >                <p> industry Modules </p> </div> </div> <div class= "screen" style= "background-position:50% 550px;" > </div> <div class= "Sprite" style= "background-position:50% 0px;" > </div> </div> <div id= "famous" style= "background-position:50%-9 0px; "                        > <div class= "Contents" > <div class= "Famous_rim" >         <p> message </p> </div> </div>       <div class= "Sprite" style= "background-position:50% 450px;" > </div> </div> <div id= "Contact" > <div class= "Contents" > <div id= "box_contact" > <div class= "columnspace" id= "Elem -frontspecifies_show01-1368432548167 "name=" description page "> <div id=" frontspecifies_show01-13684325                                48167 "class=" Frontspecifies_show01-d3_c1 "> <div class=" describe Htmledit ">                    </div> </div> </div> </div> </div> <div class= "Sprite" style= "background-position:50% 0px; " > </div> <div class= "screen" > </div> </div > </div> </div>

Other wonderful articles
jquery Tutorial (-jquery) plug-in development to specify parameters for plug-in methodsjquery Tutorial (-jquery) plugin development using pluginsjquery Tutorial (-jqueryajax) Modify the default options for the actionjquery Tutorial (-ajax) using JSONP to load remote datajquery Tutorial (-ajax) Security restrictions on Operation
more about Android Development articles

Share a page parallax scrolling switch Jquery.localscroll plugin