Tutorial 7 - Animation
Animation is the process of making text and/or graphics move or appear to move.
Animation Heartbeat - The Stepper
The heartbeat of an animation is the stepper routine as it controls the rate of change of position, color, transition or frame that makes up the effect. Steppers consist of a timer rate, step size (or number) and a mode (one time, repeat, fixed # of reps, or bounce/backtrack). Creating a generic stepper allows many forms of animation to reuse the code.
The doAction() function contains code specific to an animation. For example, this test outputs the step position to the status line.
Scrolling Banners
Scrolling banners (aka marquees or ticker tape) are used to draw the reader's attention to important information such as a new product release. The HTML marquee tag has been superceded by dynamic marquees using JavaScript techniques. An algorithm that is easy to implement is to double the message text and then redisplay an appropriate substring of it after a short delay. The example uses both the status line and a textarea element for display. It could be autostarted with the onload event but then it should also be timed out instead of run continuously. Remember that the status line has some important uses and should not be captured forever by a JavaScript function.
An assignment that will check your understanding of the algorithm would be to change the scrolling so that letters appear to move from left to right instead of the usual right to left motion.
Floating Objects
There are many uses for floating objects such as animations, pullout/down menus and sticky objects that stay onscreen after scrolling. Objects are given the appearance of moving by using CSS positioning. First, define the object, uniquely identify it and give it an initial position. Text is contained in a div element with some css style and is placed in the body of the document.
<div id="flyer" style="position:absolute;left:0px;top:10px"> Pizza to Go...</div>
Next, a move() function is added to adjust the position of the div element using its style.left property. Note the addition of "px" which is very important for correct functioning in some browsers. If the text hasn't reached the right edge, move() increments the position. Finally, a delay to allow reading the message is built in by using the setTimeout() method. The JavaScript code is placed in the head section of the document.
To start the flying on page load, add an onLoad event attribute to the body element.
A simple modification to this routine would be to add parameters for the stop, increment, and delay settings. This would make the function more flexible.
Caution: MSIE has pixelLeft and pixelTop properties which guarantee that the measure is in pixels and is a numeric quantity. Unfortunately these properties are not part of the DOM recommendation and not implemented in other browsers. Whenever you see any pixelxx references in another author's work, be sure to change them as follows:
It makes sense to craft a generic float routine that can be reused often. Generalizations needed include two-dimensional and bidirectional movement, step size, speed, repetition and bounce effect.
Vertical motion uses the .top style property. Repetition can be done by adding an else component to the decision to increment such as:
Note: The commented out line will also add a limit to the number of repetitions. For this to work correctly, times has to be declared as a global variable. And of course REMOVE the comment ;-]
Start writing the script by initializing the object's beginning and ending location as well as the step size. Ensure that the object sits at the beginning point. Next create a move() function that does the steps and checks whether the limit has been reached. If it has then check whether a halt, repeat, or a bounce effect is required.
For an Over The Top application, add a routine to randomly pick both the horizontal and vertical increments. And then once an edge is hit, reverse that direction. How about correct angle of bounce off the wall. Lots of ideas here for those who want to explore animation. See what you can do with dynamic object movement.
Example: News Scroller
Some sites now include a news scroller with important or fresh information. The usual way of adding a scroller is with animated gifs. But a JavaScript newsScroller will allow you to stop the scrolling by hovering on the newsbox. This gives you time to read the text.
To use this example, copy the News Scroller script from JavaScript Code and make it your own with a bit of hand tuning. Be sure to include the style rules for .scroll and .newsbox that are in this document's head section. Then add the following div element where the newsbox is to appear.
The parameters represent the boxName, boxHeight, boxWidth, contentHeight, contentWidth, content, boxColor, textColor, speed and initial FloatPosition.
Animated Popup Boxes
Popup images are easy to create using an img element and a click or hover event. By adding a stepper, you can animate the popup to either expand in size or float in as it starts.
The following example uses associative arrays and z-index to allow several popups to be open at one time. Any element is opened centered on the event until a screen edge boundary is met. pLim sets the screen edge limits and pStep sets the number of steps/timing). Note: popit(id,width,height) makes use of cursor positioning routines defined in getMouse().
Style the popable elements as #img1,#img2,#img3{display:none} to hide them when unpopped. To make sure that the 'clickable' hand/finger shape is shown for popped images and link elements when the href attribute is omitted, add .link {cursor:hand;cursor:pointer} to your global stylesheet. You can also add img.link{border:1px solid black} to frame the images. Here is an example of the document html needed for a linked popable image: