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

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

滚动后：

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

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

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

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

    
顶部banner


    
到达1处
    
到达2处
    
到达3处
    
到达4处
    
到达5处
    
到达6处


    
所有人到这来1


    
所有人到这来2


    
所有人到这来3


    
所有人到这来4


    
所有人到这来5


    
所有人到这来6




    
底部介绍栏

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

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

所需要注意的是在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;
            }
        }
    });