HTML Markup | JavaScript | Java | Home & Links

Tutorial 8 - 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.

One assignment that checks understanding of the algorithm is 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, slide out menus and sticky objects that stay onscreen after scrolling. Objects can appear to move 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 document body.

<div id="flyer" style="position:absolute;left:0px;top:10px">Bulletin..</div>

Add a move() function to adjust the position of the div element using its style.left property. If the text hasn't reached the right edge, move() increments the position. Finally, a delay to the message display is added 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.

It makes sense to craft a generic float routine that can be reused often. Generalizations needed include two-dimension and bidirection movement, step size, speed, repetition and bounce effect. Vertical motion uses the .top style property. For repetition add an else component to the decision to increment such as:

Note: The commented out line adds a limit to the number of repetitions. For this to work, 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 one to stop the scrolling by hovering on the newsbox. This gives 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 next 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.

Screen  Various Gui Designs  Batch

* * *

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{border:1px solid black} to frame the images. Here is an example of the document html needed for a linked popable image:

JR's HomePage | Comments [jstutor8.htm:2016 02 16]