html5——全屏滚动

鼠标滚轮

window.onmousewheel=function(){};

基本描述

1、我们使用插件fullpage，为了更好的兼容性

2、动画效果是在滚动到这一屏时触发的，此时给当前屏幕加current类，其他的移除current类

3、动画的效果的过渡状态是必须在移除current类的时候移除，在添加current类的时候添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .first.current h3 {
            /*过渡  入场需要过渡 ，出场快速..*/
            transition: all 1s;
            transform: translateX(200px) translateY(200px);
        }
    </style>
</head>
<body>
<div id="dowebok">
    <div class="section first">
        <h3>第一屏</h3>
    </div>
    <div class="section second">
        <h3>第二屏</h3>
    </div>
    <div class="section third">
        <h3>第三屏</h3>
    </div>
    <div class="section four">
        <h3>第四屏</h3>
    </div>
    <div class="section five">
        <h3>第五屏</h3>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
    //调用全屏的方法
    $(function () {
        $('#dowebok').fullpage({
            //设置每一屏幕的颜色
            sectionsColor: ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
            //loopTop:true,
            // 滚到某一屏之后调用
            afterLoad: function (link, index) {
                // index 当前section的编号
                // current类加给谁 谁就做动画
                $('.section').removeClass('current');
                // 让动画 延迟执行100ms
                setTimeout(function () {
                    $('.section').eq(index - 1).addClass('current');
                }, 100);
            }
        });
    });
</script>
</body>
</html>

网址：http://www.dowebok.com/77.html