我对Jquery很新。我想我的Wow.js动画可以运行不止一次。例如:我滚动到我的页面底部,看到所有的动画,如果我滚动回到顶部,我再次看到动画,如向下滚动。我希望我解释自己。我已经看过许多网站在他们的网页上重复动画,但不幸的是我不记得它们,我无法提供链接。
我已经尝试过这个:
$(window).scroll(function(){
new WOW().init();
}
但是如果你滚动一点,它也会重复动画,看起来很难看。我试着更好地解释一下:我有一个我的动画,如果它是聚焦动画被触发,那么我向下滚动到另一个div而前一个div不再可见(不在窗口视口中),然后再滚动用动画回到我的div,再次触发动画。
我很抱歉这个混乱的问题,但我真的不知道如何解释它。
提前致谢!
答案 0 :(得分:5)
BenoîtBoucart的这个例子展示了当用户滚出视图并返回时动画如何“重置”。这里的关键是当元素滚出视图时删除动画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')
}
});
答案 1 :(得分:1)
@vivekk的回答是正确的我只是添加一个工作示例,以便人们可以轻松搞定
看小提琴
<script>
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
</script>
https://jsfiddle.net/ugurerkan/53641ovn/
答案 2 :(得分:0)
如果用户想要在两个事件上重复动画,即
那么这将是一个很好的解决方案:
首先创建一个 addBox 函数,它将有助于将新元素推送到WOW
框数组中。
WOW.prototype.addBox = function(element){
this.boxes.push(element);
};
然后使用jQuery
和scrollspy插件来帮助检测哪个元素不在视图中,然后将WOW
推送为:
$('.wow').on('scrollSpy:exit',function(){
var element = $(this);
element.css({
'visibility' : 'hidden',
'animation-name' : 'none'
}).removeClass('animated');
wow.addBox(this);
});
解决方案礼貌:ugurerkan