BIT 116 – Scripting
Exercise 14

CSS Animation

Part 1: A Simple Moving Animation

Use Paint or some other means to create a single small image. It doesn't have to be anything fancy.

Place the image onto the document using an <img> tag that is contained within a <div> tag.   In order to talk about the <div> tag, you should make sure to give it an id, like so:

<div id="movableElement">

Using a style attribute, position the division (and consequently the image) at the top left corner of the page. In order to do this, you will need to create a <style> element (preferably in the head of the document), and within it, define a style for the element with the name movableElement (or whatever you named the <div> element), like so:

#theMovableDivElement {
position:absolute;
left:200px;
top:200px;
}

Use a global variable to store the left position of the division in pixels. You will use this variable to change the position of the division by incrementing it and assigning it to the divName.style.left property of the division.

Inside the onLoad event handler for the window object, start an interval timer whose own event handler increments the global variable and assigns it to the left property of the division every second (1000 milliseconds), effectively moving the image to the right across the page.

Part 2: Multiple, Simultaneous Animations

Copy your solution to the previous part, and modify it so that instead of sliding one object around, it slides two images.  You should do this by having a single function, named something like moveThings(), that gets called every X milliseconds, and having that one routine move all the objects.

Part 3: Bounded Animation

Modify your solution to the previous part so that when the image reaches the right edge of the page, it changes direction and returns to the top left corner of the page.  Feel free to use the following code to get the size of the visible area of the window:

var canvasX = 0; // the width, in pixels, of the interior of the window - of the 'document'
var canvasY = 0; // height, in pixels
function getWindowCoords()
{
    if(navigator.userAgent.toLowerCase().indexOf('opera')>0||
       navigator.appVersion.toLowerCase().indexOf('safari')!=-1)
    {
       canvasX = window.innerWidth;
       canvasY = window.innerHeight;
    }
    else
    {
       canvasX = document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth;
       canvasY = document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight;
    }
    // alert("X:" + canvasX + " y: " + canvasY); // useful debugging info
}

window.onresize = getWindowCoords;
// also, call getWindowCoords in the 'init' method, as well