Onload page make div slide visible with easing

Question

I'd like to have a div (with class="top") come slide in from top:-300px; to top:40px; with some nice easing. I can't find any examples. Does anyone knows how to do this on load page?

Answer 1

Here's some JavaScript and CSS3:

The JavaScript:

<script>
document.getElementById("slide").style.top="40px";
</script>

And the CSS:

-webkit-transition:all 1s;-ms-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;-webkit-transition:all 1s;

The element that would slide would have to have the id "slide". It would also need top have "position:absolute;top:-300px" in the CSS to make it -300px. You could also add "left:20%;" or something of the sort to the CSS to make it look better. Whatever works with your design. You should look up about the CSS transition property. It's very nice for special effects. In this case, I made it take 1 second to slide. You could always change it.

This could also be implemented using jQuery, a JavaScript library, (which would take even less code), but I usually prefer regular JavaScript and CSS if I can help it.

Here's a demo of the code I wrote above: jsFiddle.

Oh, and PLEASE mark this question as the answer if it helped you. It will give me privileges and earn me more reputation.

Hope this helped!