Question

我正在使用光滑的滑块在hompepage上滑动图像。我还在每张幻灯片的标题上使用了一些动画。这些动画在滚动时触发。由于滑块在加载页面时已经可见，因此我在window.scroll（）函数上使用了.trigger（'scroll'）。对于第一张幻灯片，这可以正常工作，可以直接触发动画，但是当其他幻灯片出现时，我必须滚动才能触发动画。你知道我在做什么错吗？每当幻灯片显示时，我想触发其他动画。

感谢您的帮助。

$('.home-slider').slick({
  autoplay: true,
  autoplaySpeed: 6000,
  speed: 250,
  lazyLoad: 'progressive',
  pauseOnHover: false,
  infinite: true,
  arrows: false,
  dots: true,
  cssEase: 'ease-in-out',
  loop: true
});


function loadAnimations(items) {
  var offset = $(window).scrollTop() + $(window).height();
  if (items.length == 0) {
    $(window).off('scroll', loadAnimations);
  }
  items.each(function(i) {
    var element = $(this),
    animationClass = element.attr("data-animation"),
    animationDelay = element.attr('data-animation-delay');
    element.css({
      '-webkit-animation-delay': animationDelay,
      '-moz-animation-delay': animationDelay,
      'animation-delay': animationDelay
    });

    if((element.offset().top + element.height() - 20) < offset) 
    {
      element.addClass('animated').addClass(animationClass);
    }
  });
}


$(window).scroll(function () {
  loadAnimations($('.animate'));
}).trigger('scroll');

<section class="home-slider">
  <div class="slide overlay" style="background-image: url(img/slides/slide-corporate-1bis.jpg); margin: 0; background-size: cover; color: #fff; background-position: top right;height:700px;">
    <div class="slide-content">
      <div class="slide-content-headings">
        <h2 class="text-color-light animate" data-animation="fadeInUp">A way to manage your freight bills</h2>
        <p class="mt-4 animate" data-animation="fadeInUp" data-animation-delay="0.2s"A company incorporated in Brussels, Belgium by its founder in 2004.</p>
      </div>
    </div>
  </div>

  <div class="slide overlay" style="background-image: url(img/slides/slide-corporate-1bis.jpg); margin: 0; background-size: cover; color: #fff; background-position: top right; height:700px;">
    <div class="slide-content">
      <div class="slide-content-headings">
        <h2 class="text-color-light animate" data-animation="fadeInUp">Your essential link between supply chain</h2>
        <p class="mt-4 animate" data-animation="fadeInUp" data-animation-delay="0.2s">Content</p>
      </div>
    </div>
  </div>
</section>

滑滑条，动画仅在第一张幻灯片上起作用

0 个答案: