Tag Archives: Animation in HTML5

In HTML 5, there are many techniques to create the animation on your web page such as Canvas CSS3, SVG and WebGL. The element that allows us to build the dynamic graphs, 2D shapes, bitmap images and animation using the JavaScript.

See the Demo and Source code A Simple Example to create the animation in HTML 5

Text animation small to its full size in HTML5

See the Demo.   <html> <head> <title>Text small to big Animation</title> <script type="text/javascript"> var can, ctx, step = 10, steps = 50; delay = 20;   function init() { can = document.getElementById("MyCanvas"); ctx = can.getContext("2d"); ctx.fillStyle = "blue"; ctx.font = "10pt Helvetica"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; TextSmallToBig(); } function TextSmallToBig() { step++; ctx.clearRect(0, … Continue reading Text animation small to its full size in HTML5

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 … Continue reading Text Animation in HTML5