css - 当用户看到这个时开始动画

Question

我有下面的源代码，它位于页脚页面中，我需要的是当用户向下滚动并看到它时启动动画：

<div class="box_one padding_top_bottom_40 centered">
<div class="circle transition_05 animated bounce"><img padding_top_35 animated bounce" src="img/icons/1.png"></img></div>
<p class="title_4 black_c padding_top_20">Made with love</p>
<p class="title_3 black_c padding_top_20">I am some text</p>
</div>

Answer 1

看到这里使用你可以在用户到达底部时激活你的动画。

window.onscroll = function(ev) {
     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    // you're at the bottom of the page
    document.getElementById(div id here).className = animation class;
    }
};

Answer 2

使用航点：

Waypoints 是一个 jQuery 插件，当你滚动到一个元素时，它可以很容易地执行一个函数。