From the course: Creating Web Media

Unlock this course with a free trial

Join today to access over 22,500 courses taught by industry experts.

Animate a sprite sheet with JavaScript

Animate a sprite sheet with JavaScript - CSS Tutorial

From the course: Creating Web Media

Start my 1-month free trial Buy for my team

Animate a sprite sheet with JavaScript

“

- [Chris] Hi, this is Chris Converse, and in this episode, we'll create an animation in our web page using a spritesheet graphic and JavaScript. Now a spritesheet is a single graphic that contains multiple images or frames of an animation. Using JavaScript we can quickly change the position of the spritesheet to create the illusion of motion. In an earlier episode, we animated this same spritesheet using CSS instead of JavaScript. So if you'd like to follow along with me and create this animation with JavaScript, download the exercise files and let's begin by opening index.html in a text editor. Now when you have the HTML file open, you'll see up in the head area I have a link to style.css. We'll be opening this at the end just to change the opacity of our animation. Down in the body area we have a main element. Inside of the main element is a figure element. Inside the figure element is an image, coffee_house.png, and a div with an id of steam. This is the container that holds the…

Contents