当内容进入视图时播放动画

Question

我一直在搜寻很多文章，但几乎都令人困惑。

我正在将animate.css应用于页面中央的一个

标签。默认情况下，动画是在页面加载时播放的，但我希望它在我滚动到

标签时开始播放。

请不要提及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);

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

- AtarC5

---

你有研究过.scrollTop()和$(window).height()吗？使用它们，你可以进行基本的计算来确定视频是否在视野中，然后让它播放。 - Hastig Zusammenstellen

我在另一篇帖子上看到了它，但我不明白它是如何工作的（我也不知道.scrollTop()是如何工作的）。 - AtarC5

Answer 1

使用一点jquery就可以轻松实现这个功能。您需要做的就是监听滚动事件，然后检查用户是否滚动到了目标元素。如果用户已经滚动到了目标元素，则从animate.css中添加动画类。根据您的需求调整if条件。请参考下面的代码和fiddle 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中。

- Sam

---

你能稍微解释一下伪代码吗？非常感谢你的回答。 - AtarC5

所以我更新了我的答案，并添加了代码的详细解释。 - Sam

Answer 2

我正在使用“WoW.js”作为我的滚动展示库。它非常易于使用，就像真的一样。只需要一行代码。

<div class="wow fadeIn">content</div>

请看这里：http://mynameismatthieu.com/WOW/docs.html

（涉及IT技术相关内容，请自行查看）

- Vladimir Jovanović

Answer 3

这是一个使用Jquery的示例。

我们使用.scrollTop和.height测量视频容器距离页面顶部的位置，以便在滚动时知道何时进入视野。 （实际上，它设置为在可见区域底部以下100px到达时加载，一种预加载方式。您可以将其调整为任何您喜欢的值。）

当视频容器位于页面上所需的位置时（在本例中为可见区域下方100px），通过将data-src = 中的URL复制到src = 中来完成视频加载。 fiddle 请注意，在stack上视频不会加载，请确保查看fiddle。

https://jsfiddle.net/Hastig/xszu6b1p/

我从这两个答案中凑合着做出了它... Youtube 自动播放 Ladyload 图片

$(window).scroll(function() {
  $.each($('iframe'), function() {
    if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
      var source = $(this).data('src');
      $(this).attr('src', source);
      $(this).removeAttr('data-src');
    }
  })
})

body {
  margin: 0;
}
.filler {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
  /* css tricks - responsive iframe video */
  /* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
  position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
  display: flex;
  justify-content: center;
  background-color: red;
}
.video-container iframe {
  position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler filler-top">filler top</div>
<div class="video-container">
  <iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>

- Hastig Zusammenstellen