当元素出现时,运行关键帧动画的好方法吗?

时间:2019-05-02 11:00:21

标签: javascript css css-animations

当元素进入视图时,运行关键帧动画的好方法是什么?

$(window).scroll(function () {
  if($(window).scrollTop() > 0) {
    element.addClass("animateMe");
  }
  else {
    element.removeClass("animateMe");
  }
});

此代码有效,但需要一个静态数字,这对自适应布局不利。

1 个答案:

答案 0 :(得分:0)

在屏幕上查看框时会触发Console.log()

        var pageTop  = $(window).scrollTop();
        var pageBottom =  pageTop + $(window).height()

        var eleTop = $(".box").offset().top;
        var eleBottom = eleTop +  $(".box").height();

        //only if ele is view on screen     
        if(pageBottom >= eleTop && eleBottom >= pageTop){
               console.log("viewed.....");
        }