Question

中的animate.css

我想在向下滚动和图像聚焦时为图像设置动画。我在标签中添加了.animated类，在data-animate属性中添加了动画类型，如下所示：

HTML

<img src="images/img-grow.png" alt="Grow" class="img-responsive animated" data-animate="bounceInRight">

当图像在向下滚动期间聚焦时，它应该将数据动画属性（即bounceInRight）添加到类中，以便进行该动画。

它可以是bounceInRight或bounceInLeft或animate.css中的任何其他动画标记

JS

$(document).ready(function () {

  if ($(".animated").focus() ) {
      var elementAnimation = $(this).attr('data-animate');
       $(this).addClass( elementAnimation );
   }
});

但上面的代码不起作用。有什么帮助吗？

最好每页刷新一次动画。

Answer 1

试试这个

var animateHeight = $(".img-responsive").offset().top;

$(function() {
    var addAnimation = $('.img-responsive');
    var animateHeight = $(".img-responsive").offset().top;
    var animateHeight_end  = $(".img-responsive").offset().top + $(".img-responsive").height();
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= animateHeight && scroll <=  animateHeight_end ) {
            addAnimation.addClass('animated bounceInRight');
        } else {
            addAnimation.removeClass('animated bounceInRight');
        }
    });
});

滚动时为图像设置动画

1 个答案: