DHTML : Images scrolling under your titles
Contents ]
Dr Benton

Loop Animating

There is still a small problem to solve. What should we do when the animation reaches the our background's limit? The answer is simple! We just need to reset the layer to its initial position. To do this, we use the restart() function:

111: function restart() {
112: clipleft=0
113: clipright=messageboardwidth
114:     if (document.all) {
115:         document.all.bgdiv.style.posLeft=bgdivleft
116:     }
117: if (document.layers) {
118:         document.bgdiv.left=bgdivleft
119:         
120:     }
121: movebackground()
122: }

And since we are cautious, we saved the layer's start position in the bgdivleft variable. The restart() function sets the clipping window back to zero (lines 112 and 113) and moves the bgdiv layer back to its initial position, using the .posleft attribute (on line 115 for Internet Explorer) or the .left attribute (on line 118 for Netscape Navigator).

Our scrolling can then move around indefinitely.

Customise your script. A few details in our effect can be changed. Experiment for yourself! To help you along, we have placed comments in our source code between lines 21 and 51.




  1   2   3   4   5   6