當(dāng)?shù)侥硞€(gè)div後，再利用jquery做動(dòng)作？

scroll是個(gè)高頻事件，如果按Ls大神的來(lái)實(shí)現(xiàn)時(shí)要小心這點(diǎn)。

另外我翻了翻收藏夾，貌似有倆庫(kù)能做這個(gè)需求：

• AOS
• ScrollMagic

你留著參考吧。當(dāng)然還是更推薦Ls大神的方法。

這是原來(lái)寫(xiě)的一段代碼

// 用了Animate.css - http://daneden.me/animate 樣式庫(kù)，也可以自己寫(xiě)
// 預(yù)定義 fadeInUp 樣式，0.3秒 的過(guò)渡時(shí)間
<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;
            // 當(dāng) 窗口高 + 滾動(dòng)距離 大于 元素offsetTop，則元素進(jìn)入視口
            // 那么添加定義好的樣式
            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")
                    });
                }
            }
        });
    }
    // 滾動(dòng)監(jiān)聽(tīng)
    $(window).scroll(function(){
        revealOnScroll();
    });
    // 進(jìn)行第一次初始化
    revealOnScroll();
});

大概就是監(jiān)聽(tīng) window（或別的元素）上的滾動(dòng)事件，判斷添加待動(dòng)畫(huà)的元素是否進(jìn)入視口（通過(guò) offset/滾動(dòng)距離等），進(jìn)入視口則添加提前定義好的樣式。