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

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 中。

Answer 2

我正在为我的滚动显示库使用“WoW.js”。它很容易使用，就像真的一样。一行代码

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

来看看吧：http://mynameismatthieu.com/WOW/docs.html

Answer 3

这是一个使用 Jquery 的示例。

在其中，我们使用.scrollTop 和.height 从页面顶部测量视频容器，以便我们知道滚动时它何时出现。 （它实际上设置为在可视区域底部下方 100px 时加载，一种预加载。您可以将其调整为您喜欢的任何内容。）

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

小提琴

请注意，视频不会加载到堆栈上，因此请务必查看小提琴

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>