Question

我正在尝试添加animated.css（http://daneden.github.io/animate.css/）的动画。但是当我在页面图像和其他元素上添加动画类和我想要的效果时，动画会立即在页面上的任何位置同时完成页面加载。我甚至看不到它们的功能。它如此之快。

我知道可以使用jQuery完成。

基本上我想要的是仅在用户滚动窗口时逐个制作动画功能。因此，只有屏幕上当前可见的元素的动画才会起作用，当用户滚动窗口时，静止动画将起作用。

Answer 1

如果你想在用户scol the window时做动画，你需要使用jquery检查特定元素的可见性并应用动画类。

例如，您在div名称“disimage”下有图像。然后你需要编写如下代码。

  $(document).ready(function(){

    if($("#disimage").visible())
      {
        $("#disimage").toggleClass("myanimationclass");
      }

    });

myanimationclass应该具有元素的动画样式。

Answer 2

您可以使用这些代码段来检查工作功能。您可以从animate.css中选择动画样式，然后使用它们为元素设置动画。

$(document).ready(function(){
  initScrollAnim();
});

function initScrollAnim() {
  // add this .anim-block class to every block that needs animation
  var targetBlock = $('.anim-block');

  targetBlock.each(function() {
    var item = $(this);
    var win = $(window);
    // make transition when this class is added
    var activeClass = ('anim-active');

    var addOffset = 20;

    var animate = function() {
      if ((win.scrollTop() + win.height()/1.5)  >= item.offset().top) {
        item.addClass(activeClass);
      }
    };

    win.on('load scroll', animate);
  });
}

#wrapper {
	overflow: hidden;
}

.anim-block {
	display: block;
	width: 100%;
	height: 100px;
	background: blue;
}

.slide-from-right {
	transform: translate(100%, 0);
	transition: transform 0.4s ease-in-out;
}

.anim-active {
	transform: translate(0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <div class="anim-block slide-from-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, similique!</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
</div>

使用jQuery滚动Animated.css动画

2 个答案: