JavaScript Image Rotation Tutorial

Learn to Rotate a Playing Card. Displays the Front then the Back of the Card

Image Rotation Example Introduction Add HTML Markup Implement the JavaScript Animation Tips Polyfill Development Summary JavaScript Image Rotation Source Code

Introduction

This tutorial explains how to implement an image rotation animation with JavaScript. The animation appears to flip a playing card around the horizontal axis. First the front of the card displays then the back of the card displays.

This example uses JavaScript and HTML alone. The animation runs in older browsers such as Internet Explorer 9 and older Androids. This article briefly discusses polyfill development for animation which runs on both older and newer Web browsers.

CSS3 animations don't run in Internet Explorer 9, the default browser for some Androids, and other older browsers. However for CSS3 features, see the Flip a Card CSS3 Animation with tutorial.

3D or 2.5D Animation

The example animation appears as if a playing card flips over. 2D animation which looks like 3D is called 2.5D.

To simulate rotating a card around the horizontal axis, gradually decrease the height to zero. Change the image source file. Gradually return to the full height.

Add HTML Markup for the Animation

The Image Rotation Example Web page includes an Image element. The image's id equals im. The image includes width and height properties. The Image includes an onclick event listener named animPlay().

Surround the Image element with a div element. Assign the div element's height to the same height as the image's full height. See the tips section for more information. See the JavaScript Image Rotation Source Code for details.

Implement the JavaScript Animation

JavaScript provides interactivity. Tap the card to play the animation.

JavaScript accomplishes four tasks. First function loadGame() executes when the page loads. Function loadGame() obtains a reference to the Image we want to animate.

Second the image's onclick event listener named animPlay(), assigns the front of the card to the Image's src property. Function animPlay() initializes the frame counter and the image's default height. Then animPlay() starts the timer with a 10 millisecond interval, between calls to animForward(). The following listing demonstrates creating the timer.

timer = setInterval(

animForward,

 10

);

Third function animForward() increments the frame counter and decreases the image's height by six pixels, for each frame of animation. If the frame counter equals 31, then animForward() clears the timer, assigns the back of the card to the Image's src property, and initializes a new interval to call function animBackward().

Fourth animBackward() increments the frame counter and increases the image's height by six pixels, for each frame of animation. If the frame counter equals 62, then animBackward() clears the timer interval. See the JavaScript for Image Rotation code for details.

Tips

Elements Move with the Animation

With fake rotation around the X axis, JavaScript decreases the image's height over time. HTML will use the extra space, allowing elements below the image to move up into the vertical space during the animation. Therefore we placed the card inside a div element with a fixed height.

div.ex{
 width:138px; 
 height:192px;
 margin-left:auto;
 margin-right:auto;
}

Clear the Timer

JavaScript animation is fairly simple and straightforward. However, be careful to clear the timer between function calls. If the timer isn't cleared it continues to execute. If another time interval is assigned to the same timer variable, both timers execute. The following short listing demonstrates how to stop the JavaScript timer.

clearInterval(
 timer
);	
	

Polyfill Development

Polyfill development attempts to include both new and old features. The goal is to activate the newest features when they're available. However if the newest features aren't available, then the polyfill provides old features to execute a Web project.

For example a polyfill function might attempt to use CSS3 Rotation Animation. If CSS3 animation isn't available then the polyfill fallsback to JavaScript animation. This tutorial offers JavaScript code, which can apply to a fallback, for older browsers which don't run CSS3 animation.

Historically developers wrote code for the least common denominator. For example we know JavaScript runs on most browsers. In the past we would simply write JavaScript animation. However HTML5 includes many new and optimized features. Effective development for HTML5 might include code for the range of browsers, with both old and new features available. Therefore polyfill development programs for features which aren't available yet, with fallbacks for older browsers.

Wait for Image to Load

This example doesn't wait for the image representing the back of the card to load, before calling animBackward(). While the animation runs the image loads. Usually it's better to create an onload event listener. Begin animation after the image loads.

Summary

This tutorial explained how to implement an image rotation animation with JavaScript. The animation appears to flip a playing card around the horizontal axis. First the front of the card displays then the back of the card displays.

This example uses JavaScript and HTML alone. The animation runs in older browsers such as Internet Explorer 9 and older Androids. This article briefly discussed polyfill development for animation which runs on both older and newer Web browsers.

CSS3 animations don't run in Internet Explorer 9, the default browser for some Androids, and other older browsers. However for CSS3 features, see the Flip a Card CSS3 Animation with tutorial. See more HTML5 examples.

More HTML5 Examples

Animated Effects
Copyright © 2015 Seven Thunder Software. All Rights Reserved.