JavaScript Simulated 3D Animation: Tutorial

How to implement a simulated 3D effect with JavaScript.

JavaScript 3D Rotation Example Add HTML Markup Implement the JavaScript Animation Tips Polyfill Development Summary JavaScript Simulated 3D Animation Source Code

Introduction

This tutorial explains how to make a card appear to rotate along it's left edge. The JavaScript 3D Rotation Example simulates 3D rotation with JavaScript.

This tutorial uses JavaScript and HTML alone. The animation runs in older browsers such as Internet Explorer 9. This article discusses polyfill development for optimized animation with older and newer Web browsers.

CSS3 animations don't run in Internet Explorer 9 and other older browsers. For CSS3 features see the CSS3 Rotation Animation Example.

3D or 2.5D Animation

2D animation which looks like 3D is called 2.5D. To simulate rotation around the vertical axis of a graphic, gradually decrease the width to zero, then gradually return to the full width.

Add HTML Markup for the Animation

The JavaScript 3D Rotation Example includes an Image element on the Web page. The image has an id named im, along with width, and height properties. The Image includes an onclick JavaScript event listener called animPlay(). The following markup prepares the King of Clubs image for interactive display. The body's onload event listener called loadGame() is covered next.

<body 
 onload="javascript:loadGame()" 
/>

<img 
 id="im" 
 src="../assets/king.gif" 
 alt="King of Clubs: Card" 
 onclick="animPlay()"
/>

Implement the JavaScript Animation

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

JavaScript accomplishes four tasks. First loadGame() executes when the page loads. Function loadGame() obtains a reference to the King of Clubs Image.

Second the onclick event listener named animPlay() initializes a frame counter and image's default width. Then animPlay() starts the timer with a 10 millisecond interval, between calls to animForward(). The following short listing demonstrates preparing to call function animForward() every ten milliseconds.

timer = setInterval(
 animForward,
 10
);
	

Third each time animForward() executes it increments the frame counter, and decreases the image's width by four pixels. If the frame counter equals 31, then animForward() clears the timer, and initializes a new interval to call animBackward()

Fourth animBackward() increments the frame counter and increases the image's width by four pixels. If the frame counter equals 62, then animBackward() clears the timer interval. Function animBackward() stops running. See the JavaScript 2.5D Animation Source Code for details.

Tips

JavaScript animation is fairly simple and straightforward. However, be careful to clear the timer between function calls. If the timer isn't cleared it will continue to fire. Even if another time interval is assigned to the same timer variable, the previous timer will continue to execute. The following short listing demonstrates stopping the timer with JavaScript API function clearInterval().

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.

Summary

This tutorial explained how to make a card appear to rotate along it's left edge. The JavaScript 3D Rotation Example simulates 3D rotation with JavaScript.

This tutorial used JavaScript and HTML alone. The animation runs in older browsers such as Internet Explorer 9. This article discussed polyfill development for optimized animation with older and newer Web browsers.

CSS3 animations don't run in Internet Explorer 9 and other older browsers. For CSS3 features see the CSS3 Rotation Animation Example. See More HTML5 Examples.

More HTML5 Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.