HTML 5 Animation: The Newest Flash Replacement

For years, the answer for cool website animation and graphics was Flash. Flash is an older technology that isn’t good with search engines. Creative site owners such as photographers and artists loved Flash, but it was difficult for search engines to crawl and “understand” the site. Additionally, Flash was expensive and proprietary and wasn’t compatible with the Safari browser. The new Flash replacement is HTML 5. Using HTML 5, CSS3, JavaScript and even the new HTML 5 canvas, you can create animations (even 3D!) without any third-party application.

Learn how to work with the new HTML 5 at Udemy.com

Basic Animation with CSS3 and HTML 5

CSS3 also brings some great animation techniques, and they work perfectly with HTML 5 code. CSS3 and JavaScript have a “begin” and an “end” method you can use to move an icon from one location to another. You typically use this type of coding when you need a simple animation such as a thumbnail image that needs to move from one location on the screen to another. You place the image using CSS3 and then move it using the JavaScript DOM “begin” and “end” action. The following code is an example of using these two actions to move an image:

img { -webkit-transition: 1s; }

.begin { left: 15px; }

.end { left: 950px; }

In this example, the “img” tab starts at the left side of the screen, 15 pixels to the right of the left side of the screen. The image moves to the right until it reaches 950 pixels on the screen. Of course, this is a simple example. You would also want to detect the user’s screen size. With smaller devices, 950 pixels could be off the screen.

You can also make an image spin using CSS3. The following code makes an image named “myimage” spin in place on the screen:

img {-webkit-animation: myimage 3s infinite; }

@-webkit-keyframes myimage

{

from {-webkit-transform: rotate(0deg) }

50% { }

to {-webkit-transform: rotate(360deg) }

}

The above code rotates (spins) the image 360 degrees infinitely. The infinite property tells the browser to continue spinning the image without stopping.

Using the HTML 5 Canvas Element

The real power in HTML 5 animation is the new canvas element. The canvas element is a new HTML 5 addition that totally replaces the old Flash code objects you had to embed into your web applications.

Learn how to create games in HTML 5

You start off using the “canvas” tag. The main HTML 5 code for the canvas is basic, and it’s no different than other HTML tags you’re used to. The following is a basic canvas tag that sets your drawing space at 450 pixels wide and 450 pixels tall:

<canvas id=”drawingspace” height=”450″ width=”450″></canvas>

Now you need to set up your JavaScript. You first need to use JavaScript to create a variable for your canvas and the context (2D or 3D). The following code gets the canvas element, the context, and the width and height you’ve set in the canvas tag properties:

var canvas = document.querySelector(“#drawingspace “);

var context = mainCanvas.getContext(“2d”);

var w = canvas.width;

var h = canvas.height;

After you retrieve the basic information, you now need to create a function that will draw an object on your canvas. In this example, a circle is drawn on your canvas. Therefore, a “drawcircle” function is created. You also need to call this function in your basic JavaScript code shown above. Add the following code to your JavaScript:

drawCircle();

function drawCircle() {

}

The next code you type is contained in the drawCircle function. You first need to clear the background on the canvas. The reason is in case you already have an object painted on the canvas. You want to start from scratch whenever you draw a new object, so you clear the canvas and set your drawing properties. The following code sets these properties:

context.clearRect(0, 0, w, h);

context.fillStyle = “#EEEEEE”;

context.fillRect(0, 0, w, h);

Now you need to draw the circle on your canvas. The above properties set the circle with a width and height. The “0, 0” location is the top left corner of your canvas. When you specify any drawing locations, your starting point is the top left corner of the canvas, or 0, 0. It’s important to note that it’s from the top left corner, because it’s different than the top left corner of the user’s browser. The next code draws the circle on your canvas:

context.beginPath();

var radius = 150;

context.arc(125, 125, radius, 0, Math.PI * 2, false);

context.closePath();

The above code draws a circle, but you might want to color in the circle. The following code fills in the circle with a blue color:

context.fillStyle = “#006699”;

context.fill();

Now run your project in your favorite browser. One issue to note is the browser must be able to run your code, and older browsers don’t support HTML 5. The easiest way to test if your browser runs the HTML 5 code is to run the new project in your browser. Most current browsers support HTML 5, so as long as you keep your browser up to date, you should be able to see a canvas and a circle drawn into your canvas.

Work with HTML 5 and CSS to create interactive websites

HTML 5 and CSS3 are perfect tools for HTML 5 animations. You no longer need to worry about users installing Flash or supporting Flash in their browsers. Firefox, Internet Explorer and Chrome support HTML 5, and the new language is becoming more popular. It’s also used in mobile development, so HTML 5 is supported by all the major device manufacturers. With HTML 5 and some creativity, you can create some cool interactive animations for your users.