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

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

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

Answer 1

我正在使用 "WoW.js" 作为我的卷轴显示库。它非常易于使用，就像真的一样。一行代码

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

这里，看一下：http://mynameismatthieu.com/WOW/docs.html

Answer 2

只需很少的 jquery 即可轻松完成此操作。您需要做的就是监听滚动事件，然后检查用户是否滚动到目标元素。如果用户这样做，则从您的 animate.css 添加动画 class。根据您的需要调整您的 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 在另一个 div 内，其 class 是 .parent 然后使用 $('.parent').scroll 。至于我的代码，我正在听文档上的事件。当我的文档滚动时，我的事件就会触发。

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

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

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

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

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

现在，只要用户滚动到目标 div。

，此代码就会将动画 css classes 添加到目标 div 中

Answer 3

这是一个使用 Jquery 的例子。

在其中我们使用 .scrollTop and .height 从页面顶部测量视频容器，以便我们知道滚动时它何时进入视图。（实际上是设置为低于可视区域底部100px时加载，一种预加载，你可以随意调整。）

当视频容器位于页面上的所需位置时，通过将 url 从 data-src= 复制到 src= 来完成视频加载。（在本例中，可视区域下方 100px）

fiddle

请注意，视频不会加载到堆栈中，因此请务必查看 fiddle

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

我从这两个答案中拼凑出来的..

Youtube Autoplay

Ladyload Images

$(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>

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

Play animation when content get into view

html

javascript

animation

scroll

animate.css