當某些像素進入視口時動畫（Pen Bramus）

我使用以下pen by Bramus在進入視口時動畫（FadeInUp）div。但是，當div完全位於視口中時，div纔會開始消失。我需要的是當div是視口內的某個像素時，可以靈活地開始動畫。例如，當div在視口中爲100像素時，它將開始動畫FadeInUp。我如何使用當前使用的代碼/筆執行此操作（請參閱下面的代碼）？當某些像素進入視口時動畫（Pen Bramus）

這也可能與百分比？ F.E.當div在視口中的20％時動畫開始？

謝謝。

jQuery(function($) { 

// Function which adds the 'animated' class to any '.animatable' in view 
var doAnimations = function() { 

// Calc current offset and get all animatables 
var offset = $(window).scrollTop() + $(window).height(), 
    $animatables = $('.animatable'); 

// Check all animatables and animate them if necessary 
$animatables.each(function(i) { 
var $animatable = $(this); 
if (($animatable.offset().top + $animatable.height() - 20) < offset) { 
$animatable.removeClass('animatable').addClass('animated'); 
     } 
}); 

}; 

// Hook doAnimations on scroll, and trigger a scroll 
$(window).on('scroll', doAnimations); 
$(window).trigger('scroll'); 

});

來源

2017-06-17 WPasman

代碼中已經預見了偏移量。調整的20價值在這條線：

if (($animatable.offset().top + $animatable.height() - 20) < offset) {

您可能還需要在-標誌更改爲+，以滿足您的需求。

來源

2017-06-22 14:32:03 Bramus

我玩過減號和加號以及數字，結果對我來說是這樣的：div在視口中100％或更多時淡入，或者在我到達div之前已經淡入。我仍然在學習使用Javascript。我想要的是當div在視口中是10px時，div將開始淡入。你能向我解釋這段代碼中的單個元素是怎麼做的，所以我明白髮生了什麼？另一件事：對我來說，這段代碼不起作用，並在Chrome中提供錯誤（版本59.0.3071.109）：TypeError：$ animatables.size不是函數我使用jQuery 3.2.1。 – WPasman

我設法解決了jQuery.com上給出的錯誤：「.size（）方法從jQuery 1.8開始已棄用，改爲使用.length屬性。」 – WPasman

請注意，筆是在2013年創建的，並使用jQuery 1.10 ...將其與jQuery 3.2.1一起使用，因此需要進行一些調整。 – Bramus

當某些像素進入視口時動畫（Pen Bramus）

回答

相關問題