JQuery如何设置页面滚动到指定位置播放动画？

Question

很多h5页面都是这样，当滚动到某个位置的时候开始播放动画，然后动画播放完毕后就完了，不会循环播放，请问是怎么实现的呢？能否提供一个小demo参考下？

Answer 1

JQ
监听滚动事件$(window).scroll()，判断滚动的高度scrollTop()，执行函数。

if(scrollTop>xxx){
    执行操作
}else if(){
    执行操作
}else{
    
}

JS

window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//scrollTop就是触发滚轮事件时滚轮的高度
    if(scrollTop>xx){
        执行操作
    }
}

Answer 2

    function animateInPage () {
        var ids = ['id1', 'id2', 'id3', 'id4'],
            body_top = document.body.scrollTop;
        for (var i = 0, len = ids.length; i < len; i++) {
            var id = document.getElementById(ids[i]),
                offset_top = id.offsetTop;
            if (body_top >= offset_top - 300) {
                id.classList.add('animate');
            }
        }
    }
    window.onscroll = function(){
        animateInPage()
    }
    animateInPage();

animate是在css中去写你想要的css动画

Answer 3

animate有个状态pause，scroll事件触发的时候，把状态pause去掉就可以了
http://www.w3school.com.cn/cs...

Answer 4

最简单的办法就是如下

http://jsbin.com/lekubip/edit...

如果你想要更复杂的动画，比如 animation ，道理也是相通的。