javascript - 浏览器滚动动画

Question

我使用了 jQuery，如下面的代码行

  $(window).load(function() {
  $(".shuffle").each(function() {
  $(this).circulate({
        speed: Math.floor(Math.random()*300) + 100,
        height: Math.floor(Math.random()*100) - 70,
        width: Math.floor(Math.random()*100) - 70
         });
      });
   });

圆形动画在页面加载时效果很好。

html就像

  <div id="target">
  <div class="shuffle"></div>
  <div class="shuffle"></div>
  <div class="shuffle"></div>
  <div class="shuffle"></div>
  </div>

现在我希望当用户向下滚动浏览器时，当他到达带有 id 目标部分的 div 时，动画应该开始......

请帮忙!!!

Answer 1

var isElementInViewport = function ($element) {
    //element has to be a jQuery element with length > 0
    var domElement = $element[0];
    var height = $element.outerHeight();
    var rect = domElement.getBoundingClientRect();
    return (
        rect.top >= 0 - height &&
        rect.bottom <= $(window).height() + height
    );
};

var shuffle = function($element) {
 //only shuffle elements within the target
 $(".shuffle", $element).each(function() {
    $(this).circulate({
      speed: Math.floor(Math.random()*300) + 100,
      height: Math.floor(Math.random()*100) - 70,
      width: Math.floor(Math.random()*100) - 70
     });
  });
}

var flag = false;
var $target = $('#target');
$(document).on('scroll', function(){
  if(isElementInViewport($target)){
    if (!flag) {
      flag = true;
      shuffle($target);
    }
  }
});