Tutorial 7 - AnimationTutorial 6 - DOM and DHTML - Tutorial 8 - Multimedia Animation is the process of making text and/or graphics to move or appear to move. It does not add content to a webpage but properly used, can be an important attractor of viewers or highlighter of material needing emphasis. Multimedia covers audio, video and print presentations. Scrolling MarqueesMarquees or scrolling banners 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 data manipulation. One algorithm that is easy to implement is to rebuild the message to be displayed by dropping the first letter and adding one to the end, then redisplaying the message after a short delay. The first rather simple example uses the status bar for display. It could be autostarted with the onLoad event but then it should also be timed out instead of continuously running. Remember that the status line has some very important uses and should not be captured forever by a JavaScript function. mmsg=" -- JR's marquee demonstration";
counter=(mmsg.length+1)*1;rate=8;
function scrollMsg() {
if (counter > 0) {
window.status=mmsg;
mmsg=mmsg.substring(1,mmsg.length) + mmsg.substring(0,1);
setTimeout('scrollMsg()',1000/rate);
counter -=1;
}
}
The example is terminated by counting the letters and stopping after one pass through. You can change the number of passes by changing the multiplier on the counter variable. Another refinement would be to start with no message at the start. I chose to present the whole message first to remove the drama ;-] An improved version starts with a blank marquee and runs continuously. Output is to a textarea form element to show some display variations that are allowed with JavaScript. You can use style to hide or change the look of the textarea if you wish. text=" This is the demonstration text -- ";
len=text.length;// total characters in status line - Opera is short!
msg=""; // build blank message for clean start
for (i=0;i <= len;i++) {msg += " ";}
pos=0; // pointer into text array
speed=10; // adjust scrolling speed here
function scroll(id) {
msg=msg.substring(1,len) + text.charAt(pos);
// slides window over and adds one char from text message
document.getElementById(id).value=msg;
if (pos++ == text.length) {pos=0;}
// returns to front of message for next go around
id=setTimeout("scroll(id)",1000/speed);
}
An assignment that will check your 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. Glowing TextText can appear to glow by using CSS filter effects. This can be an attractive effect for headings. Unfortunately it works in MSIE browsers (QUIRKS MODE) only as the style.filter property is JScript specific. //next four vars can be modified
from=5; // animation start value
to=11; // animation end value
delay=55; // animation speed
glowColor="lime"; // color of text glow
//do not edit from here down
idx=to;j=0;
function textPulseUp() {
if (!document.all) {return;} // browser not MicroSoft
if (idx <to) {
theText.style.filter="Glow(Color="+glowColor+", Strength="+idx+")";
idx++;theTimeout=setTimeout('textPulseUp()',delay);return;
}
if (idx == to) {
theTimeout=setTimeout('textPulseDown()',delay);return;
}
}
function textPulseDown() {
if (!document.all) {return;} // browser not MicroSoft
if (idx >from) {
theText.style.filter="Glow(Color="+glowColor+", Strength="+idx+")";
idx--;theTimeout=setTimeout('textPulseDown()',delay);return;
}
if (idx == from) {
theTimeout=setTimeout('textPulseUp()',delay);return;
}
}
Other filter effects available are Alpha, BasicImage, Blur, Chroma, Compositor, DropShadow, Emboss, Engrave, Light, MaskFilter, Matrix, MotionBlur, Pixelate, Shadow, and Wave. Flying TextText can be given the appearance of flying by using CSS positioning. The first example will fly the text to the right only. Step one is to define the text, uniquely identify it and give it some initial position. The text is contained in a div element with some inline css style. Inline style is used as the position can only be set on an element by element basis. It is placed in the body of the document. For example: <div id="flyer" style="position:absolute; left:0px; top:10px"> Pizza to Go...</div> An alternative to inline style is to use a css style element with an id selector: #flyer {position:absolute; left:0px; top:10px}
The JavaScript function sets the position of the div element using its style.left property. Note the addition of "px". This is very important for correct functioning in some browsers. If the text hasn't reached the right edge, it increments the position. Finally a delay is built in using the system setTimeout() method to allow reading the message. Without the delay the text would blur across the screen. The JavaScript code is placed in the head section. spot=0; // global state memory for position
function move() {
styleObj=document.getElementById('flyer').style;
if (spot < 500) { // check whether we are at right stop point
spot += 2; // no - so move over a bit
styleObj.left=spot + "px"; // redisplay at new site
setTimeout('move()',50); // but first wait 50 milliseconds
}
}
To start the flying on page load, add an onLoad event attribute to the body element. For example: <body onLoad="move()"> Note 1: 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. Change any 'pixelxx' references as follows: where=styleObj.pixelLeft; //MSIE specific where=parseInt(styleObj.left); // makes integer count in pixels . . . styleObj.pixelLeft=where; // MSIE specific styleObj.left=where + 'px' // guarantees measured in pixels Note 2: Netscape 4 does not have a style object. See browser differences if it must be supported. The first modification to this routine would be to add parameters for the stop, increment, and delay settings. This would make the function much more flexible for reuse. Another modification would be to add vertical motion with the .top style property. How about moving the other way with negative values for the steps (don't forget to set initial and final positions and invert the check method). And instead of simply stopping when you reach the limit you may want to cycle the movement. This can be done by adding an else component to the decision to increment such as: } else { // this addition makes continuous flying possible
// if (times < 2) { times+=1; } else {return;}
spot=0; // this does the reset for next cycle
styleObj.left=spot + "px"; // redisplay
setTimeout('move()',50); // but first wait 50 milliseconds
}
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 ;-] Over the top applications would want 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 text movement. News ScrollersMany sites now include a news scroller with important or fresh info. The usual way of doing this is with animated gifs. But JavaScript methods allow you to stop the scroll by hovering on the newsbox. This gives you time to read the text. To use the javascript scroller demoed on this page capture the script between the meta generator elements in the head section and make it your own with a bit of hand tuning. Make sure you include the styling element and then add the following element where you want the newsbox to appear. <div class="newsbox"><script type="text/javascript">
c=new scrollerObj('c','135','100','200','100',p6,'ffdd00','cccccc','3','center')
</script></div>
The parameters represent the boxName, boxHeight, boxWidth, contentHeight, contentWidth, content, boxColor, textColor, speed and initial FloatPosition. News!!!Any important message goes here Note: This effect does not function in netscape 4! Yet another reason to upgrade. Splash ScreensSplash screens are intros or leaders that can attract certain viewers. But please use discretion and know your audience. You can view and rip my jssplash.htm example of a super flying text screen for a nice intro to your own site. Another splash uses the zoom effect and position shifting to achieve a star wars credits effect. |