如何在滚动条上触发多个 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&nbsp; &nbsp; {elem:"#home-description", animation:"element-animation"},&nbsp; &nbsp; {elem:".nav-item",animation:"slide-in-top"}]};var isInViewport = function(el, percentVisible) {&nbsp; &nbsp; let&nbsp; &nbsp; rect = el.getBoundingClientRect(),&nbsp; &nbsp; &nbsp; &nbsp; windowHeight = (window.innerHeight || document.documentElement.clientHeight);&nbsp; &nbsp; return !(&nbsp; &nbsp; &nbsp; &nbsp; Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||&nbsp; &nbsp; &nbsp; &nbsp; Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible&nbsp; &nbsp; )};function check(){&nbsp; &nbsp; var eArray = elemList.elements;&nbsp; &nbsp; if (eArray.length >= 1){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; eArray.forEach( function(e,i){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (e.elem){ //check if empty&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let el = document.querySelectorAll(e.elem);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.length >= 1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.forEach( function(x,y){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (isInViewport(x,35)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x.classList.remove("hidden") //remove this if element should be visible&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x.classList.add(e.animation)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eArray.splice(i, 1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }}window.addEventListener('load', function () {&nbsp; &nbsp; check();&nbsp; &nbsp; document.addEventListener('scroll', function () {&nbsp; &nbsp; &nbsp; &nbsp; check();&nbsp; &nbsp; })}, {&nbsp; &nbsp; passive: true});