我有一个使用CSS3动画的柱状图，该动画当前在页面加载时启动。
我的问题是，由于它之前有很多内容，所以给定的柱状图被放置在屏幕外，因此当用户向下滚动到它时，动画已经完成。
我正在寻找通过CSS3或jQuery的方式，仅在查看者看到图表时才激活柱状图的CSS3动画。
<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>
如果您在页面加载后快速向下滚动，您可以看到它正在动画。
这是我的代码的 jsfiddle 链接。此外，我不知道这是否重要，但是我的页面上有几个实例的此条形图表。
我发现了一个名为waypoint的jQuery插件，但是我完全没有运气让它正常工作。
使用JavaScript或jQuery来捕获滚动事件，每次滚动事件触发时检查元素是否在视图中。
一旦元素在视图中，则开始动画。在下面的代码中，通过向元素添加“start”类来触发动画。
HTML
<div class="bar">
<div class="level eighty">80%</div>
</div>
CSS
.eighty.start {
width: 0px;
background: #aae0aa;
-webkit-animation: eighty 2s ease-out forwards;
-moz-animation: eighty 2s ease-out forwards;
-ms-animation: eighty 2s ease-out forwards;
-o-animation: eighty 2s ease-out forwards;
animation: eighty 2s ease-out forwards;
}
jQuery
function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bar .level');
// If the animation has already been started
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
}
}
// Capture scroll events
$(window).scroll(function(){
checkAnimation();
});
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bar .level');
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
} else {
$elem.removeClass('start');
}
}
您不再需要捕获滚动事件
自2020年起，每个浏览器都能够通知您一个元素是否在您的视口中可见。
使用交叉观察器（Intersection Observer）实现。
在Waypoints 2版本之前，这通常是一个相对简单的jquery插件。在3及以上版本（本指南版本为3.1.1）中引入了几个功能。为了使用此功能，可以使用脚本的'inview shortcut'。Waypoints是滚动到元素时触发函数的最简单方法。
Download and add the script files from this link or from Github (version 3 is not yet available through CDNJS, although RawGit is always an option too).
Add the script to your HTML as usual.
<script src="/path/to/lib/jquery.waypoints.min.js"></script>
<script src="/path/to/shortcuts/inview.min.js"></script>
Add the following JS code, replacing #myelement with the appropriate HTML element jQuery selector:
$(window).load(function () {
var in_view = new Waypoint.Inview({
element: $('#myelement')[0],
enter: function() {
$('#myelement').addClass('start');
},
exit: function() { // optionally
$('#myelement').removeClass('start');
}
});
});
$(window).load()的原因在这里解释过。<style>
.trigger{
width: 100px;
height: 2px;
position: fixed;
top: 20%;
left: 0;
background: red;
opacity: 0;
z-index: -1;
}
</style>
<script>
$('body').append('<div class="trigger js-trigger"></div>');
$(document).scroll(function () {
$('YOUR SECTIONS NAME').each(function () {
let $this = $(this);
if($this.offset().top <= $('.js-trigger').offset().top) {
if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
$this
.addClass('currSec')
.siblings()
.removeClass('currSec');
}
}
});
});
</script>
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html')的代码区分在 Chrome v70 中已不再有效。 - M Klein