当div元素出现在视口中时触发动画 [英] Trigger animation when div element appears in viewport

问题描述

我正在从此答案中使用滚动触发器 来构建

I am using a scroll trigger from this answer to build a progressbar.js animation that is triggered once the entire progress bar div is in the viewport.

动画在没有触发器的情况下正常工作，仅在页面加载时运行.但是当元素滚动到完整视图时，我无法触发它.

The animation works normally with no trigger, it just runs on page load. But I can't make it trigger when the element scrolls into full view.

下面的示例代码顶部有一个div间隙，因此您可以在动画开始之前向下滚动，尽管显然这是我无法工作的部分.

The example code below has a div gap at the top so you can scroll down before the animation starts, although that is obviously the part I cannot get working.

function privacyScoreCircle() {
  // progressbar.js circle
  var bar = new ProgressBar.Circle(document.getElementById('privacy-score-circle'), {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 4,
    trailWidth: 4,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: false
    },
    from: {
      color: '#dddddd',
      width: 4
    },
    to: {
      color: '#aaaaaa',
      width: 4
    },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + '%');
      }

    }
  });
  bar.text.style.fontFamily = '"Montserrat", sans-serif';
  bar.text.style.fontSize = '1.7rem';
  bar.trail.setAttribute('stroke-linecap', 'round');
  bar.path.setAttribute('stroke-linecap', 'round');
  //bar.animate(0.97); // <-- ANIMATION CAN BE TRIGGERED INSTANTLY USING THIS

}
privacyScoreCircle();

// Check if element is scrolled into view
function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function Utils() {

}

Utils.prototype = {
  constructor: Utils,
  isElementInView: function(element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
      return ((pageTop < elementTop) && (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
    }
  }
};

var Utils = new Utils();

var isElementInView = Utils.isElementInView($('#privacy-score-circle'), false);

if (isElementInView) {
  bar.animate(0.97);
}

#gap {
  height: 500px;
}

#privacy-score-circle {
  margin: auto;
  width: 200px;
  height: 200px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<div id="gap">Scroll down to activate animation</div>
<div id="privacy-score-circle"></div>

推荐答案

您应在代码中应用以下更改:

You should apply these changes in your code:

1. 您在privacyScoreCircle()函数中声明了bar变量.在函数内部定义的变量不能从函数外部访问.因此，将其定义为全局变量.
2. 滚动窗口时应执行动画.

1. You declared the bar variable within privacyScoreCircle() function. Variables defined inside a function are not accessible from outside the function. So, define it as a global variable.
2. You should execute animation when window is being scrolled.

您可以在此处看到正确运行的代码.

You can see the code that works correctly here.

这篇关于当div元素出现在视口中时触发动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！