Start animation when user see this

Question

I have the source below, which is positioned in the footer page, what I need is start an animation when user scroll down and see it :

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

You want to a) identify the scrollTop() position of the top of your content, and b) trigger then animation only once the user has reached that y coordinate. — kunalbhat, Aug 27 '13 at 15:41

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

see here using that you can activate your animation when user reaches the bottom.

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;
    }
};

edited May 23 '17 at 12:21

Community

1
1

answered Aug 27 '13 at 15:43

Math chiller

4,123
6
28
44

score 0 · Answer 2 · answered Aug 27 '13 at 15:44

0

Use waypoints :

Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

answered Aug 27 '13 at 15:44

grigno

3,128
4
35
47

Start animation when user see this

2 Answers2