gpt4 book ai didi

jquery - 当内容滚动到 View 中时激活 CSS3 动画

转载 作者:技术小花猫 更新时间:2023-10-29 11:37:59 35 4
gpt4 key购买 nike

我有一个使用 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 来捕获滚动事件,在每次触发滚动事件时检查元素是否在 View 中。

元素出现在 View 中后,启动动画。在下面的代码中,这是通过向触发动画的元素添加“开始”类来完成的。

Updated demo

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();
});

关于jquery - 当内容滚动到 View 中时激活 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16325679/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com