//MAKE: 3.03 Skill-builder: Fireworks

Resources

Saving your work

Use Save as... to save the empty template as "3.03S-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

  1. link your page to the jQuery library
  2. create a function called mainProcedure inside your script
  3. inside mainProcedure, add a setTimeout() that will trigger a function called fireFirework1 after 1 second
  4. create a function called fireFirework1 after the mainProcedure function
  5. inside fireFirework1, create a three part animation:
    1. create the appearance of a rocket going up by animating firework1ID upwards.
    2. 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
    3. 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
  6. 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