如何在滚动条上触发多个 css 动画

Question

我在一个设计中使用了多个 CSS 动画。我的问题是这些动画只在页面首次加载时触发一次。我需要在用户每次滚动它们时触发它们，无论是向上还是向下页面，似乎没有任何东西响应我的 Javascript。我有一个向左滑动的彩色框，正文副本 + 标题将从底部淡入。我希望这两个单独的动画在持续时间上略有偏移，文本在盒子滑到一半后出现。我尝试将这些 div 嵌套成一个，以便它们都在滚动的同一点显示，并且我还尝试将它们视为 JavaScript 中的独立实体。$(window).scroll(function() {  $('#Featuring_Animated').each(function() {    var imagePos = $(this).offset().top;    var imageHeight = $(this).height();    var topOfWindow = $(window).scrollTop();    if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {      $(this).addClass("slide-in-left");    } else {      $(this).removeClass("slide-in-left");    }  });});$('.element-to-hide').css('visibility', 'hidden');

Answer 1

如果你不想要一个图书馆，你可以这样做。（由其他贡献者拼凑而成，ty）您可以为不同的选择器添加不同的效果。当设置的元素百分比可见时动画触发一次（isInViewport - 第二个参数，当前设置为 35%）。只触发一次。

//every element needs to have a "hidden" class, ie. "visability:hidden" if starting state is hidden (fad-in effects and similar)

var elemList = {elements:[ //add elements and animations here

    {elem:"#home-description", animation:"element-animation"},

    {elem:".nav-item",animation:"slide-in-top"}

]};

var isInViewport = function(el, percentVisible) {

    let

    rect = el.getBoundingClientRect(),

        windowHeight = (window.innerHeight || document.documentElement.clientHeight);

    return !(

        Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||

        Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible

    )

};

function check(){

    var eArray = elemList.elements;

    if (eArray.length >= 1){  

        eArray.forEach( function(e,i){

            if (e.elem){ //check if empty

                let el = document.querySelectorAll(e.elem);

                if (el.length >= 1){

                    el.forEach( function(x,y){

                        if (isInViewport(x,35)){

                            x.classList.remove("hidden") //remove this if element should be visible

                            x.classList.add(e.animation)

                            eArray.splice(i, 1)

                        }

                    })

                }

            }

        })

    }

}

window.addEventListener('load', function () {

    check();

    document.addEventListener('scroll', function () {

        check();

    })

}, {

    passive: true

});