scrolling text
This technique can be lots of fun. Including a section of scrolling text is a great way to add movement and character to your page without using Java applet, for example. The functionality is achieved purely via DHTML constructs and is very customizable to your needs. For appearance options and positioning options, just change the CSS rules applied to the SPAN tag given in the HEAD of the document.
<html>
<head>
<style>
span {
font:12px arial;
background:#CCCCCC;
position:absolute;
width:100;
height:500;
top:100;
clip:rect(0 100 100 0);
}
</style>
<script type="text/javascript">
var interval;
startPosition=0;
topPosition=100;
endPosition=100;
speed=50;
function scrollit() {
if (startPosition!=200)
{
startPosition=startPosition+1;
topPosition=topPosition-1;
document.getElementById('display').style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)";
document.getElementById('display').style.top=topPosition;
interval=setTimeout("scrollit()",speed);
} else {
startPosition=0;
topPosition=100;
endPosition=100;
interval=setTimeout("scrollit()",speed);
}
}
function stopinterval() {
clearTimeout(interval);
}
</script>
</head>
<body onload="scrollit()" onunload="stopinterval()">
<span id="display>This text will scroll</span>
</body>
</html>
This is a largish sort of script, but the effect is great. It really isn’t complicated, there’s juust a few more statement that are required to activate a redraw with the information that the browser will need to perform said redraw. The scripted actions are called with onLoad and onUnload event handlers given in the BODY tag.
|
