当滚动到开机动画 [英] Start animation when scrolled to

问题描述

我整天都在寻找一种简单的方法，使我的动画开始后，我已滚动到页面上的特定位置。

I have spend all day looking for an easy way to make my animation start after I have scrolled to a specific place on the page.

我的CSS

.animation {
 width: 50%; 
 float: left; 
 position: relative; 
 -webkit-animation-name: test; 
 -webkit-animation-duration: 4s; 
 -webkit-animation-iteration-count: 3;
 -webkit-animation-fill-mode: forwards; 
 animation-name: test; 
 animation-duration: 4s; 
 animation-iteration-count: 1; 
 animation-fill-mode: forwards; }

和我的HTML

<div class="container">

<div class="animation">

Content goes here...

</div>

</div>

我不知道如何使动画的开始，当我滚动到级集装箱。

I wonder how to make the animation start when I scroll to the class container.

推荐答案

的JavaScript

Javascript

var $window = $(window);
var $elem = $(".animation")

function isScrolledIntoView($elem, $window) {
    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).on("scroll", function () {
    if (isScrolledIntoView($elem, $window)) {
        $elem.addClass("animate")
    }
});

HTML

<div class="container">
    <div class="animation">Content goes here...</div>
</div>

CSS

.animation.animate {
    animation: pulse 5s infinite;//change this to whatever you want
}

的jsfiddle 一起玩（不要忘记滚动）

JSFiddle to play with (don't forget to scroll)

这篇关于当滚动到开机动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！