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) {

您可能还需要将-符号更改为+以满足您的需求。

在某些像素进入视口时动画（Pen by Bramus）

1 个答案: