不知道這算是什麼技術 https://tinder.com/ 就像這個到某個div區塊後能跑出東西這能怎麼做到？

scroll是个高频事件，如果按Ls大神的来实现时要小心这点。另外我翻了翻收藏夹，貌似有俩库能做这个需求： AOS ScrollMagic 你留着参考吧。当然还是更推荐Ls大神的方法。

當到某個div後，再利用jquery做動作？

2 个回答

toBeTheLight

✓ 已被采纳

这是原来写的一段代码

// 用了Animate.css - http://daneden.me/animate 样式库，也可以自己写
// 预定义 fadeInUp 样式，0.3秒 的过渡时间
<p class="animated" data-animation="fadeInUp" data-delay=".3s">

$(function(){
    function revealOnScroll(){
        var scrollTop = $(window).scrollTop(),
            winHei = $(window).height();
        $(".animated").each(function(i, dom){
            var me = $(dom),
                offsetTop = me.offset().top;
            // 当 窗口高 + 滚动距离 大于 元素offsetTop，则元素进入视口
            // 那么添加定义好的样式
            if((winHei + scrollTop) > offsetTop){
                me.addClass(me.attr("data-animation"));
                if(me.attr("data-delay")){
                    me.css({
                        "animation-delay": me.attr("data-delay"),
                        "-webkit-animation-delay": me.attr("data-delay")
                    });
                }
                if(me.attr("data-duration")){
                    me.css({
                        "animation-duration": me.attr("data-duration"),
                        "-webkit-animation-duration": me.attr("data-duration")
                    });
                }
            }
        });
    }
    // 滚动监听
    $(window).scroll(function(){
        revealOnScroll();
    });
    // 进行第一次初始化
    revealOnScroll();
});

大概就是监听 window（或别的元素）上的滚动事件，判断添加待动画的元素是否进入视口（通过 offset/滚动距离等），进入视口则添加提前定义好的样式。