gpt4 book ai didi

javascript - 每次向上或向下滚动时,Wow.js 都会重复动画

转载 作者:搜寻专家 更新时间:2023-11-01 05:30:00 26 4
gpt4 key购买 nike

我是 Jquery 的新手。我希望我的 Wow.js 动画可以运行多次。例如:我滚动到页面底部并查看所有动画,如果我滚动回顶部,我会再次看到动画,就像您向下滚动时一样。我希望我解释了自己。我已经看到很多网站在他们的页面上重复动画,但遗憾的是我不记得它们,也无法提供链接。

我已经试过了:

$(window).scroll(function(){
new WOW().init();
}

但是,如果您稍微滚动一下,它也会重复动画,而且很难看。我试着更好地解释我:我的动画有一个,如果它聚焦,动画就会被触发,然后我向下滚动到另一个 div,之前的 div 不再可见(不在窗口视口(viewport)中),然后我再次滚动回到我的带有动画的 div 并再次触发动画。

对于这个乱七八糟的问题,我很抱歉,但我真的不知道该如何解释。

提前致谢!

最佳答案

Benoît Boucart 的这个示例展示了当用户滚动出 View 并返回时如何“重置”动画。这里的关键是第二个函数,它在元素滚动出 View 时删除动画 css 类。我希望 WOW.js 能够实现这一点,但他们表示他们不打算这样做。

http://codepen.io/benske/pen/yJoqz

片段:

// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;

if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});

关于javascript - 每次向上或向下滚动时,Wow.js 都会重复动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33187211/

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