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

我正在使用＆＃34; WoW.js＆＃34;我的卷轴显示库。它非常易于使用，就像真实一样。一行代码

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

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

Answer 2

使用小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＆amp;首先是CSS，当加载所有内容时，此函数中的javascript代码将运行。

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

这是一个事件处理程序，只要用户在文档上滚动，我们的回调函数就会运行。请记住根据目标元素的父级更改$（document）。因此，如果您的目标div位于另一个类为.parent的div中，则使用$（＆＃39; .parent＆＃39;）。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 3

以下是使用Jquery的示例。

在其中，我们使用.scrollTop和.height从页面顶部开始测量视频容器，以便我们知道滚动时何时进入视图。（实际上它设置为在可视区域底部下方100px处加载，这是一种预加载。您可以根据自己的喜好调整它。）

当视频容器位于页面上的所需位置时，通过将网址从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>

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

3 个答案: