Trigger Animated Elements reaching div ID

Question

What's up?

I'm looking for a while for a solution or a tutorial to trigger a css3 animation using Jquery.

I know I can add a class to the div to animate it with css3. But I want to add the class only when reaching a div ID ! Not when I reach XX pixels from the top.

Example: Skills bars in http://themes.swiftpsd.com/index.php?theme=flexform

May someone help me or give me a great tutorial?

Btw, you rock guys!

Cheers,

Jhon

apaul · Accepted Answer · 2013-04-11T02:34:53.200

2

This was a fun one, jsFiddle

$(document).scroll(function () {
var y = $(this).scrollTop();
var x = $("#myDiv").position();

if (y > (x.top - 50)) { // -50 so things don't overlap
    $(".magic").addClass(
        "bounceInRight");
}
else {
    $(".magic").removeClass(
        "bounceInRight");
}
});

Animation from Animate.CSS

edited Apr 11 '13 at 02:34

answered Apr 11 '13 at 02:00

apaul

16,092
8
47
82

Exactly what I wanted and pretty easy code! Big thanks Apaul ! – jhon Apr 11 '13 at 14:47

Trigger Animated Elements reaching div ID

1 Answers1