brief introduction
On April 15, Netease's mailbox was upgraded to version 6.0, and an introduction page (click visit) was released. The page adopted the popular "full screen" effect. The text, pictures and CSS3 animation made users understand the functions and features of version 6.0 very intuitively and clearly, which is really high-end atmospheric grade.

Do you want to make such a big page by yourself? Today we're using fullPage.js to create a similar page.

Usage method
1. Introducing Documents
By introducing the following files, 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 of the large number of HTML codes, not all of them are posted. Here, only the "first screen" code is posted, as follows:

<div class="section section1">
    <div class="bg"><img src="images/section1.jpg" alt=""></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">
        <h1><a href="http://Www.dowebok.com/">Netease mailbox 6.0</a></h1>
        <h2>Change is more than seen.</h2>
    </div>
    <p class="p11">Netease Mailbox 6.0 edition&mdash;&mdash;2014 The year's most innovative and heavyweight new mailbox, resurrected Guanghua, for its attention. Aestheticism<br>
        Visual design and visual interaction, irreplaceable original dynamic scene skin, a number of domestic patented technology of creative products,<br>
        Achievement of unparalleled outstanding taste, unparalleled wonderful experience.</p>
</div>

In order to be compatible with the lower version of IE, "Big Background" uses img mode (section 1. jpg) and sets img width and height in CSS to fill the entire screen.

3,JavaScript

$(function(){
    if($.browser.msie && $.browser.version < 10){
        $('body').addClass('ltie10');
    }
    $.fn.fullpage({
        verticalCentered: false,
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9', 'page10'],
        navigation: true,
        navigationTooltips: ['home page', 'vision', 'interactive', 'skin', 'function', 'Ready to do mail', 'Contact mail', 'science and technology', 'Easy to connect', 'Instant experience']
    });
});

In order to have a better experience in the low version IE that does not support CSS3 animation, we judge the browser. If the IE version is less than 10, we add a ltie10 class to the body. The main function of this class is to solve the problem of background image hiding immediately when low version IE scrolls.

For the configuration of fullPage.js, you can see: jQuery full-screen scroll plug-in fullPage.js.

<div class="section section1">
    <div class="bg"><img src="images/section1.jpg" alt=""></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">
        <h1><a href="http://Www.dowebok.com/">Netease mailbox 6.0</a></h1>
        <h2>Change is more than seen.</h2>
    </div>
    <p class="p11">Netease Mailbox 6.0 edition&mdash;&mdash;2014 The year's most innovative and heavyweight new mailbox, resurrected Guanghua, for its attention. Aestheticism<br>
        Visual design and visual interaction, irreplaceable original dynamic scene skin, a number of domestic patented technology of creative products,<br>
        Achievement of unparalleled outstanding taste, unparalleled wonderful experience.</p>
</div>

In order to be compatible with the lower version of IE, "Big Background" uses img mode (section 1. jpg) and sets img width and height in CSS to fill the entire screen.

3,JavaScript

$(function(){
    if($.browser.msie && $.browser.version < 10){
        $('body').addClass('ltie10');
    }
    $.fn.fullpage({
        verticalCentered: false,
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9', 'page10'],
        navigation: true,
        navigationTooltips: ['home page', 'vision', 'interactive', 'skin', 'function', 'Ready to do mail', 'Contact mail', 'science and technology', 'Easy to connect', 'Instant experience']
    });
});

In order to have a better experience in the low version IE that does not support CSS3 animation, we judge the browser. If the IE version is less than 10, we add a ltie10 class to the body. The main function of this class is to solve the problem of background image hiding immediately when low version IE scrolls.