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

Answer 1

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