Resources
- //PROCESS: Timeout and intervals
- //OUTPUT: Animating other CSS properties
Saving your work
Use Save as... to save the
empty template as
"3.04S-Fireworks-LastName.html"
in your Computer Programming 12 directory.
The assignment
Use the Javascript setTimeout() command to trigger a series of animations to create a firework display.
Suggested steps
- link your page to the jQuery library
- create a function called mainProcedure inside your script
-
inside mainProcedure, add a
setTimeout()that will trigger a function called fireFirework1 after 1 second - create a function called fireFirework1 after the mainProcedure function
- inside fireFirework1, create a three part animation:
- create the appearance of a rocket going up by animating firework1Id upwards.
- Then explode the firework, by animating firework1Id at the same time to make it look like it is exploding from the middle:
- a change in width
- a change in the top position
- a change in the left position
- After the firework explodes, animate firework1Id so that it drifts and fades into the night:
- a slight increase in width
- a change in the top position
- a change in the left position
- fade opacity to zero
- Then add at least one more firework, launching it at a different time!
A gallery of useful fireworks images
http://drapak.ca/cpg/img/Halifax-Waterfront_at_night.jpg from
bencnh's Flickr page
http://drapak.ca/cpg/img/fireworks-blue.png
http://drapak.ca/cpg/img/fireworks-blue_and_red.png
http://drapak.ca/cpg/img/fireworks-orange.png
http://drapak.ca/cpg/img/fireworks-orange_and_blue.png
http://drapak.ca/cpg/img/fireworks-orange_and_grey.png
http://drapak.ca/cpg/img/fireworks-purple.png
http://drapak.ca/cpg/img/fireworks-purple_with_stars.png
http://drapak.ca/cpg/img/fireworks-red.png
http://drapak.ca/cpg/img/fireworks-red-orange.png
http://drapak.ca/cpg/img/fireworks-yellow_and_magenta.png
http://drapak.ca/cpg/img/fireworks-yellow-orange.png