Fullpage.js of high-end atmospheric grade

Brief introduction

April 15, NetEase mailbox upgrade to 6.0 version, and released the introduction page, the page uses the current very popular "full screen" effect, text, pictures and CSS3 animation, so that users very intuitive, clear understanding of the 6.0 version of the features and features, is really high-end atmosphere on the grade.

So tall on the page, do you want to do one yourself? Today we use Fullpage.js to make a similar page.

Production Method 1, introduction of documents

Introduce the following file, you can put JS at the bottom of the page.

<link rel= "stylesheet" href= "Css/jquery.fullpage.css" ><script src= "Js/jquery.min.js" ></script> <script src= "Js/jquery-ui.min.js" ></script><script src= "Js/jquery.fullpage.min.js" ></script >

2. HTML

Because the HTML code is more, it is not all pasted up, here only the "first screen" code, as follows:

<div class= "section section1" >    <div class= "bg" > </div>    <div class= "bg11" ></div>    <div class= "Bg12" >< /div>    <div class= "Bg13" ></div>    <div class= "Mail" >         <a class= "mail-163" href= "http://www.dowebok.com/" >163 mailbox </a>         <a class= "mail-126" href= "http://www.dowebok.com/" >126 mailbox </a>         <a class= "Mail-yeah" href= "http://www.dowebok.com/" >yeah mailbox </a>     </div>    <div class= "Hgroup" >        
To be compatible with IE's lower version, the "Big background" uses the IMG mode (section1.jpg) and sets the img width and height 100% in the CSS to fill the entire screen.
3. JavaScript
$ (function () {if ($.browser.msie && $.browser.version < Ten) {$ (' body '). addclass (' Ltie10 '); } $.fn.fullpage ({verticalcentered:false, anchors: [' Page1 ', ' page2 ', ' page3 ', ' page4 ', ' page5 ', ' Page6 ')  , ' Page7 ', ' page8 ', ' page9 ', ' Page10 '], navigation:true, navigationtooltips: [' home ', ' vision ', ' interaction ', ' skin ', ' function ', ' To do mail ', ' contact Mail ', ' technology ', ' Connect to the letter ', ' experience immediately ']});
In order to have a better experience in low-version IE that does not support CSS3 animations, we judge the browser, and if the IE version is less than 10, add a Ltie10 class to the body. The main function of this class is to solve the problem that the background image is hidden immediately when the low version IE is scrolling.
Fullpage.js of high-end atmospheric grade