CSS3 TypeWriter

Have you tackled this before? I got this in a recent job search, and they asked me to do this offline exercise.

Using Object Oriented Native Javascript (no libraries) come up with a solution to produce a typewriter effect.

The typewriter effect should involve having each character fade in one by one as if a typewriter was being used to write the text. You need a p tag full of text that you will use as the  base. The text does not matter, lorem ipsum generated text is sufficient.

Here are the rules for the test:

You should not use intervals anywhere in your solution

You must use a linked list data structure in your solution.

Each letter should fade in as it is “typed”, where the fade is an opacity change from 0 to 100% in .2s (the time can change as you desire).

This only needs to work in Safari 5/Webkit.

You can use lorem ipsum generator to create text inside <p>.

I want to use CSS3 Transition on “opacity” to achieve the animation. Instead applying transition on <p>, it should be applied on each character.

How to make each character become an element on which you can apply transition? Break each character in to its own span. And make sure they are not visible by apply initial opacity to 0.

Once you got all the <span>s, all you need to do is to apply transition on each of them and each have a delay 0.2 seconds longer than its previous <span>

span.style.webkitTransition = "opacity 0.2s linear " + parseFloat(i * 0.2) + "s";
span.style.opacity = 1;

I created a JavaScript class called “Typewriter”. It’s constructor is attached to the <p>. The constructor breaks text into <span>s.

Typewriter expose a public function “start()”, called on any event you want to have the animation start.

One drawback is you cannot get the original text of <p> any more. So Typewriter constructor remembers original text before breaking up text, and expose another public function “getText()” which returns the original text.

This entry was posted in CSS3. Bookmark the permalink.

3 Responses to CSS3 TypeWriter

  1. Hi!
    Your idea seems really interesting… and I have applied it on my problem: typewrite 3 sequentially, char by char the first, char by char the second, and so on.
    I managed it to work on Chrome, but not in Firefox: in Firefox the 3 are shown entirely and instaneously after the delay has passed.
    Have you had the same problem in Firefox?
    I posted a question on stackoverflow site (http://stackoverflow.com/questions/9348733/css3-transition-typewriting-html-p-sequentially): do you have some ideas on the issue?
    Do you have an online demo fo your code?
    Thank you!

  2. Pingback: mAtTeoPiAzZa.org | Cascading typing animation of multiple <p> using CSSOM and javascript

  3. Pingback: mAtTeoPiAzZa.org | Sequential typing animation using CSSOM, CCS3 and javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s