Parallax means that various elements on the page move at different rates as you scroll (giving a 3D effect like when you are riding in a car and closer objects move faster).
For Sally's horizontal parallax (scroll left/right to see effect). Click here for a zip file of images that might be good if you want to play around with horizontal parallax.
Click here for a zip file of all the code examples above (simple animations, parallax).
How to Make a Sprite
A sprite is any image that you animate, but a sprite image needs to have a transparent background so that you are not looking at a moving image that has a white box around it. JPG files do not support transparency, so if you want to use a JPG image, open it in an image editor and save it as "png" format. For instructions about how to do this on a PC using (open source) paint.net, click here (pdf) or here (doc). For instructions about how to do this on a MAC using the terminal, click here (pdf) or here (doc).
For some "ready to use" sprite set images, click here (zip file). These images already have a transparent background so you can begin experimenting right away.
Simple Animations with HTML5 Canvas
Click the play buttons (below) to run the examples, then "View Source" to see the code.
Click here for a zip file of all the Canvas examples above.
Click here to see some "ridiculously impressive" HTML5 canvas code (not simple and not Sally's).
Visual JS Object - Review
Click here for a simple animation that provides a good review of:
- How you can get a reference to a DOM object, e.g. document.getElementById("element_id"), then (dynamically) enhance that object by adding your own properties to it.
- How a function can create (and return) an object with properties and methods. The "Main Program" then calls this function twice to create two different (ball) objects. The Main Program then proceeds to calls methods on the various objects.
- How to use a timer to have a function called repeatedly (game loop).
Visual Object Composition
- Click here for a simple page that makes a ball object that moves when you click on it.
for code that demonstrates object composition. This code creates a "field"
(really just a green div that represents a playing field) then adds a ball to the field.
Since the ball is inside of the field, you can code it (with good programming style)
so that the ball that will not move outside the field (div) that it's in.
- Click here to see what is involved when you want to animate objects (using "setInterval" and the "this" keyword).
- Click here for a zip file of the object composition examples above.