javascript - 当某些像素进入视口(viewport)时动画(Pen by Bramus)

Question

我正在使用以下pen by Bramus进入视口(viewport)时对 div 进行动画处理(FadeInUp)。然而目前，只有当 div 完全位于视口(viewport)中时，div 才会开始淡入。我需要的是当 div 是视口(viewport)内的某个像素时启动动画的灵 active 。例如，当视口(viewport)中的 div 为 100 像素时，它将启动动画 FadeInUp。如何使用我正在使用的当前代码/笔执行此操作(请参阅下面的代码)？

这也可以用百分比吗？ F.e.当 div 在视口(viewport)中达到 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) {

您可能还需要更改 -登录 +以满足您的需求。