javascript - 当内容进入 View 时播放动画

Question

我搜索了很多帖子，但几乎所有帖子都令人困惑。

我正在将 animate.css 放入页面中间的 a 中。默认情况下，动画在页面加载时播放，但我希望它在我到达时播放(当我滚动时)。

请不要谈论 JS Reveal，我想使用 animate.css 中的动画

我正在尝试:HTML

<!-- Others div above -->

<div class="row sf-medida" id="sf-medida" onscroll="Animar();">
<!-- Others div below -->

JS

  function Animar() {
setTimeout(function(){
   document.getElementById("sf-medida").style.visibility = "visible";
   $("#titulo-general").addClass("animated fadeInLeft");
   $(".sub-titulo").addClass("animated bounceInRight");

  $(".titulo-izquierda").addClass("animated swing");
  $(".texto-1").addClass("animated fadeIn");
  $(".texto-2").addClass("animated fadeIn");

},1000)

}

但是它不起作用，但是我尝试添加

window.addEventListener("scroll", Animar);

但它的作用是每当我在页面上滚动时就会播放动画，

Answer 1

使用小 jquery 可以非常轻松地完成此操作。您需要做的就是监听滚动事件，然后检查用户是否已滚动到目标元素。如果用户这样做，则从 animate.css 添加动画类。根据您的愿望调整您的 if 条件。检查下面的代码并拨弄 https://jsfiddle.net/15z6x5ko/供引用

$(document).ready(function(){
$(document).scroll(function(evt){
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
var v1 = $(this).scrollTop();
    if( v1 > v2 ){
  console.log('in');
    $('.box').addClass('animated flip')
  }
});
});

因此，根据您的要求，让我尝试逐行解释代码

$(document).ready(function(){

这很容易理解。它只是等待浏览器首先加载所有 HTML 和 CSS，当所有内容加载完毕后，该函数内的 javascript 代码将运行。

$(document).scroll(function(evt){

这是一个事件处理程序，只要用户在文档上滚动，我们的回调函数就会运行。请记住根据目标元素的父元素更改 $(document) 。因此，如果您的目标 div 位于另一个类为 .parent 的 div 内，则使用 $('.parent').scroll 。至于我的代码，我正在监听文档上的事件。当我的文档滚动时，我的事件将触发。

var v1 = $(this).scrollTop();

此代码将获取用户完成的滚动量(以像素为单位)。

var v2 = Math.abs($('.box').position().top - $(window).height()/2);

这是一个简单的数学运算，它检查目标 div 与其父元素的位置，并从中减去窗口大小的一半。这将返回目标 div 的像素定位。因此，当用户在滚动时到达此像素位置时，您的动画就会开始。

$('.box').addClass('animated flip')

现在，此代码只是在用户滚动到目标 div 时将动画 css 类添加到目标 div 中。