Question

I want the text to slowly ‘drop-in’ on document.ready. Basically, all the letters were originally out of sight, and then slowly, one by one, drop down onto the screen in an orderly fashion to form the heading.

I’ve tried to use Lettering.js to animate every letter by adding an absolute position, but the problem is the letters are gathering in together in the middle of the screen.

Any help?

Answer 1

Yep, use the jquery $.animate, for example keep the heading out of sight using css, and then when page loads bring it back in sight.

Consider this para,

p{
position:absolute;
top:-50px;
}

then ur jquery in document.ready

$('p').animate({'top':'10px'})

this will gradually increase top property from -50px to 10px thus the text will slowly slide in. Youi can use more combinations for better effect.You can delay it using jquery delay or javascript timeout
If you want it to just appear, keep its css display:none, and then show it in document.ready as”

$('p').show();