ビューポートへの特定のピクセルのアニメーション（Bramusによるペン）

Question

ビューポートに入るときに、次のpen by Bramusを使用してアニメーション（FadeInUp）divを使用しています。しかし、現在divは、divがビューポート内に完全に入るとフェードインし始めます。私が必要とするのは、divがビューポート内の特定のピクセルであるときにアニメーションを開始する柔軟性です。たとえば、ビューポートでdivが100ピクセルのとき、アニメーションFadeInUpが開始されます。どのように私は現在のコード/私が使用しているペンでこれを行うことができます（下記のコードを参照）？

これもパーセンテージで可能ですか？ 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'); 

}); 

Answer 1

オフセットは既にコードで予知されています。この行に20の値を微調整：

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

あなたはまた、ニーズに合わせて+に-記号を変更する必要があります。