Question

我想创建另一个基于Scroll的动画设置，但这一次，当容器出现在你的屏幕上时，它将执行内部代码＆＃34;一次＆＃34;仅

我想只使用jQuery设置，没有CSS3。

这是我在SitePoint使用的代码。

var $animation_elements = $('.programs');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');

      var AK1 = new CountUp("countUp1", 0, 12, 0, 2.5, options),
          AK2 = new CountUp("countUp2", 0, 1, 0, 2.5, options),
          AK3 = new CountUp("countUp3", 0, 53451, 0, 2.5, options);

      AK1.start();
      AK2.start();
      AK3.start();

    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

SitePoint Scroll-Based Animations jQuery/CSS3

你可以在里面看到的var是* CountUpJS，并希望在容器出现在浏览器上后开始设置动画。

CountUpJS

注意

这里是更新的JSFiddle代码示例。同样，无论何时滚动，计数器的动画都会不断重复。我想在这里实现它向下滚动，并仅为计数器设置一次动画（即使我向上和向下滚动）。

JSFiddle

Answer 1

因为只有当您检测到项目在视图中时才添加in-view类，或许您可以添加另一个类作为标记以“记住”项目之前是否已设置动画？例如：

//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position) && !$element.hasClass('has-been-in-view')) {
  $element.addClass('in-view');
  $element.addClass('has-been-in-view');

  var AK1 = new CountUp("countUp1", 0, 12, 0, 2.5, options),
      AK2 = new CountUp("countUp2", 0, 1, 0, 2.5, options),
      AK3 = new CountUp("countUp3", 0, 53451, 0, 2.5, options);

  AK1.start();
  AK2.start();
  AK3.start();

} else {
  $element.removeClass('in-view');
}

Answer 2

你不应该用documentready这样做吗？

$ window.on（'scroll resize'，check_if_in_view）;

不确定上面的代码是否真的有效

基于滚动的动画

2 个答案: