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.

Examples with code

The below example shows us how to scroll the text left to right on the canvas in HTML5 without using any CSS.

Example 1 – Scrolling text left to right in HTML5

The following example display a similar result to the above method but in this example text scrolls top to bottom.

Example 2 -Scrolling text top to bottom in HTML5

The Following example gives you an idea to scrolling the text on the canvas in HTML 5.

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

The following code example demonstrates how to text fade in and fade out effect on the canvas in HTMl5.

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

Thanks