text animation in html 5

Text Animation in HTML5

You can create text marquee (i.e. scrolling text left to right and right to left on the canvas) and can create a text animation such as text rotation, text highlight etc.

The article demonstrate the following text animations on the canvas. See the Demo.



All example, displays the text “Welcome” in the various animation. In the first example the text “welcome” is scrolling continuously left to right on the other hand in the second example text is scrolling right to left.And in the third example the text spins in starting small and growing to its full size as it spins. The forth animation displays text small to big size.

Get the Code:

Example 1 – Scrolling text left to right in HTML5

Example 2 -Scrolling text top to bottom in HTML5

Example 2 -Scrolling text right to left in HTML5

Example 4 -Text rotation in HTML5

Example 5 -Text animation small to its full size in HTML5

Example 6 – Text fade-in and fade-out in HTML5