JavaScript Motion

Get the file:

  1. Open this file.
  2. Copy the contents into Notepad.
  3. Save your notepad as "motion.html" in your "javascript" folder.
  4. Get the images from the original and save them in your "javascript" folder too.
  5. Close the original and view the HTML file you saved in a Web browser.
  6. There are two main things to notice in the HTML: three container divs, and images (one for each div).

Create the External Script File

  1. In the <head> section of your HTML, add a script tag which references the JavaScript source file "motion.js"
  2. Open a new instance of Notepad.
  3. Save your new notepad as "motion.js"

Move a Graphic Horizontally

  1. Goal: Move the first graphic one direction.
  2. Since we want all the graphics on this page to move when the page loads, we can start all of the graphics moving in an onload event:
    3. code for onload event
  3. Notice that the onload event is calling the function startGraphics. Let's write that next.
    4. code for the startGraphics function
  4. We are using setTimeout to call a moveGraphic function after 50 miliseconds. The function has to be called this way because we don't want it to run immediately.
  5. Now for the guts of the functionality: the moveGraphic function.
    6. code for the first moveGraphic implementation
  6. Take a moment to examine the parameters of the function--what are they and how are they used?
  7. Save and test by viewing in a Web browser.

Move a Graphic at an Angle

  1. Goal: Adjust the moveGraphic function so it will handle multiple directions.
  2. That's great that this moveGraphic function goes horizontally, but we should make it handle both horizontal and vertical movement. Then we can use it for both of the first two graphics.
  3. Adjust the moveGraphic function so that it looks like below. The changes are boxed in a peachy color.
    4. code for the general moveGraphic implementation
  4. Take a moment to consider what changed and why.
  5. Adjust the startGraphics function so it looks like below. The changes are boxed in a peachy color.
    6. adjusted code for startGraphics function
  6. Since we changed how the moveGraphic function is defined, we needed to add the new parameter to our first call. Then we set up the call for the other graphic.
  7. Save and test in a browser.

Enlarge a Graphic

  1. Goal: Write a new function to enlarge the last graphic.
  2. This functionality is inherently different from moving right and down, but the code will be very similar.
  3. That means we can copy and past the moveGraphic function and make changes so that it looks like below. The changes to make are boxed in a peachy color.
    4. code for the resizeGraphic function
  4. Then we simply have to call it for the third graphic. Add the code below to the startGraphics function.
    5. add this code to startGraphics function
  5. Save and test in a browser.
  6. This code does something very interesting. Notice how if you don't have a width and height set, it sets the starting width and height to zero. So...
  7. Let's use an inline style to quickly set a default height and width to the graphic. In your HTML, add the following attribute-value pair to the third image element.
    8. style code for the third graphic
  8. Save and test. Now your graphic keeps its starting size.