Adding an animation to a contact form

Question

If someone can set me on the correct path would be awesome! I've been searching and reading tutorials all night on something like this but I cant figure it out!

I am trying to do the same effect on the contact form as: http://clapat.ro/themes/newave/

As you scroll to the form it kind of bounces into the screen like a lot of the other elements on that page.

Also I am using bootstrap btw. Anyone? Thank you

Answer 1

Here is a Sample of Some Jquery Code that you can use to make the effect you want.

$(window).scroll(function () {
    if ($(this).scrollTop() > 125) {
        $('#DivYouWantToAnimate').css('visibility', "visible").animate({ paddingLeft: "150px", opacity: '1' }, 'slow');
    }
});

Remember to set the default of the Div you want to animate to Visibility: Hidden; so it will show itself only when you scroll down.

Here is a fiddle with the Animation ( ScrollDOWN to see the effect )

EDIT: Remember you can change the effects of the jQuery so it looks more smooth than my example.

Answer 2

If you want to do the same design as this website you can add "cool kitten" to your bootstrap stylesheet : http://jalxob.com/cool-kitten/

For the animation, if you want to do something like a "bounce" you can use the JqueryUI bounce event : http://api.jqueryui.com/bounce-effect/

Hope it'll help you