0
我一直試圖在滾動上觸發Animate.css動畫。我使用以下jquery代碼在我的頁面上進行管理。它工作正常:在div高度觸發CSS動畫
$(function() {
var $window = $(window),
win_height_padded = $window.height() * 1.1,
isTouch = Modernizr.touch;
if (isTouch) { $('.revealOnScroll').addClass('animated'); }
$window.on('scroll', revealOnScroll);
function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;
// Showed...
$(".revealOnScroll:not(.animated)").each(function() {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop+300) {
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 hinge fadeInLeft fadeIn pulse')
}
});
}
revealOnScroll();
});
但是,我有一個圖像打開全屏div。我想在我的div內滾動時使用相同的效果。
我試圖改變「窗口」與我的div的名稱,但它不工作。
它確實存在。我確信這一點。但它仍然鏈接到第二頁(div後面的那個) – Pierrealexisb
是爲你的div設置高度和寬度,並溢出滾動? –
是的一切都按照你所說的設置。但我有一個隱藏溢出內的滾動(以防止主頁溢出)。我不知道這是否是問題。 – Pierrealexisb