Animation for Text

[harshavarma]

Hi,

I am not sure of any name for this effect but many of you should have seen an animation of text where the text appears to be written on the page by someone in real-time.

What i mean is, suppose that we have a website banner and when the website loads, the website name should appear on banner as if it is written there…
I don’t know how to make myself clear because i only have a vague idea of this.

Does anyone know how to make this?

Thank You,
Sri.

[system]

Can you put some related links, where I can find out the banners just for the example…There are many techniques, for which your are asking, i didn’t get it.

[harshavarma]

@mjarel

Can you put some related links, where I can find out the banners just for the example…There are many techniques, for which your are asking, i didn’t get it.

Hi mjarel,

Imagine that you are writing some heading name on a white board with a marker. Now if i take a video of you writing the whole thing and then somehow edit it so that you and the marker are invisible, what we will get is just text being shown progressively as if its being written there. Got it?

Thanks.

[samanime]

There are several ways to accomplish this.

One of the simplest is with Flash using masking.

Here is the idea:

• In a Flash document, create your text as it will look at the end on one layer.
• On top of them, you’re going to create some kind of mask (either frame by frame or a motion tween) which will start out with nothing and end covering the entire text.
• Put this top layer as a mask for the bottom layer.

Now, when it animates the mask will slowly reveal your text in whatever manner you want.

[harshavarma]

@samanime

There are several ways to accomplish this.

One of the simplest is with Flash using masking.

Here is the idea:

• In a Flash document, create your text as it will look at the end on one layer.
• On top of them, you’re going to create some kind of mask (either frame by frame or a motion tween) which will start out with nothing and end covering the entire text.
• Put this top layer as a mask for the bottom layer.

Now, when it animates the mask will slowly reveal your text in whatever manner you want.

Hi samanime,

Thanks for the suggestion. Can we also achieve this without flash? Like jQuery maybe?

Thank You,
Sri.

[samanime]

Can you? Yes.

You can also make a full fledged video game in jQuery (or pure Javascript). Doesn’t mean it’ll be easy. =p

You could probably do something like it by stacking two divs on top of each other (with the bottom being your text and the top being a block that matches your background). Then use jQuery to reduce the width of the top div until it disappears, revealing all of your text. This wouldn’t look like handwriting, but could create a wipe.

You could get more complex with it, but it’d get difficult really fast.

You might also want to investigate the canvas element, but be warned that it isn’t fully supported yet.

[harshavarma]

@samanime

Can you? Yes.

You can also make a full fledged video game in jQuery (or pure Javascript). Doesn’t mean it’ll be easy. =p

You could probably do something like it by stacking two divs on top of each other (with the bottom being your text and the top being a block that matches your background). Then use jQuery to reduce the width of the top div until it disappears, revealing all of your text. This wouldn’t look like handwriting, but could create a wipe.

You could get more complex with it, but it’d get difficult really fast.

You might also want to investigate the canvas element, but be warned that it isn’t fully supported yet.

Thats a good idea. Will try that. May be individual div for each letter will bring that effect. :)

Thanks.