让你的网页逼格上升一截——wow.js的引入

你还在写页面一次请求所有数据吗？
抱歉，这次先不讲懒加载，也是直接请求所有数据，但是我们的逼格不一样了…
——当你滚动页面时，加载的内容以动画的形式呈现给你——https://www.delac.io/wow/

滚动后：

是不是效果更加吊炸天= =
虽然我觉得没这效果也不错，但是老板要求，以前的自算太傻了，底层的实现也有点偏了…

在正式开始前，希望各位小伙伴别到时候拿着就用，赶项目的例外，时间富裕的能多看看底层原理——小子也正在摸索。

在此有所不足，请多多指教！！！

为了方便大家的观看，先献上代码：
html（）

<!--html-->
<div style="width: 100%;height: 600px;background: green;margin-bottom:20px;">
    <h1>顶部banner</h1>
</div>
<ul class="move" id="offSetMove">
    <li><a class="toHash" href="#one">到达1处</a></li>
    <li><a class="toHash" href="#two">到达2处</a></li>
    <li><a class="toHash" href="#three">到达3处</a></li>
    <li><a class="toHash" href="#four">到达4处</a></li>
    <li><a class="toHash" href="#five">到达5处</a></li>
    <li><a class="toHash" href="#six">到达6处</a></li>
</ul>
<div id="one"  class="wow fadeInUp" data-wow-delay="0.1s" style="width: 100%;height: 300px;background: black;">
    <h1>所有人到这来1</h1>
</div>
<div id="two"  class="wow fadeInUp" data-wow-delay="0.1s" style="width: 100%;height: 300px;background: orange;opacity: 1;">
    <h1>所有人到这来2</h1>
</div>
<div id="three"  class="wow fadeInUp" data-wow-delay="0.1s"  style="width: 100%;height: 300px;background: red;">
    <h1>所有人到这来3</h1>
</div>
<div id="four"  class="wow fadeInUp" data-wow-delay="0.1s"  style="width: 100%;height: 300px;background: blue;">
    <h1>所有人到这来4</h1>
</div>
<div id="five" class="wow fadeInUp" data-wow-delay="0.1s" style="width: 100%;height: 300px;background: orange;opacity: 1;">
    <h1>所有人到这来5</h1>
</div>
<div id="six" class="wow fadeInUp" data-wow-delay="0.1s" style="width: 100%;height: 300px;background: black;">
    <h1>所有人到这来6</h1>
</div>


<div style="width: 100%;height: 600px;background: black;margin-top:20px;">
    <h1>底部介绍栏</h1>
</div>

css:注意，因为我们是动画滚出，所以为了有更多的效果，可以使用animate.css增加效果。以上html我统一使用了fadeInUp效果。

 <style>
 ul{
            position: absolute;
            right: 30px;
            top: 20px;
        }
        ul li{
            color:white;
            float: left;
            margin-right: 30px;
            list-style:none;
        }
        h1{
            color: white;
        }
    </style>
    <link rel="stylesheet" href="css/animate/animate.min.css">

至于js的使用，更方便了…

<script src="js/wow/wow.js"></script>
<script>
    new WOW().init();
</script>

所需要注意的是在html中，需要家动画效果的标签内容，需要附加类名

wow

及相应的动画名：

//如：
fadeInUp

以及附加属性：

data-wow-delay="0.1s"
//一眼能看出和时间有关，没错，是动画时间....

以上就实现了wow.js功能。

再次补充一下：关于锚链接跳转的小技巧记录：
以下为我平时写的：

$("document").on("click",'.toHash',function () {
        var target = $(this.hash);
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
        return false;
    })

然后新get的：

//使用此处代码需要新引入js——easing.js——配合easeInOutExpo使用
$('.toHash').on('click', function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            if (target.length) {
                var top_space = 0;

                if ($('#header').length) {
                    top_space = $('#header').outerHeight();

                    if( ! $('#header').hasClass('header-fixed') ) {
                        top_space = top_space - 20;
                    }
                }

                $('html, body').animate({
                    scrollTop: target.offset().top - top_space
                }, 1000, 'easeInOutExpo');
                return false;
            }
        }
    });