Entry
I have two text elements that I want to animate along the center of the page so that they meet in the page middle? How can I script that?
Mar 16th, 2001 06:57
Martin Honnen,
Here is an example that works with IE4+, NN4 and NN6. With Opera 5 there
seem to be problems with setInterval running like a loop instead of
sliced interval.
<HTML>
<HEAD>
<TITLE>
text animation
</TITLE>
<STYLE>
#text0, #text1 {
position: absolute;
visibility: hidden;
color: lightblue;
font-size: 16pt;
background-color: orange;
layer-background-color: orange;
}
</STYLE>
<SCRIPT>
Element.prototype.delay = 20;
Element.prototype.step = 10;
Element.elements = new Array();
var text0, text1;
function Element (id) {
this.id = Element.elements.length;
Element.elements[this.id] = this;
if (document.layers) {
this.layer = document[id];
this.width = this.layer.document.width;
this.height = this.layer.document.height;
}
else if (window.opera) {
this.layer = document.getElementById(id);
this.width = this.layer.style.pixelWidth;
this.height = this.layer.style.pixelHeight;
}
else if (document.all) {
this.layer = document.all[id];
this.width = this.layer.offsetWidth;
this.height = this.layer.offsetHeight;
}
else if (document.getElementById) {
this.layer = document.getElementById(id);
this.width = this.layer.offsetWidth;
this.height = this.layer.offsetHeight;
}
}
Element.prototype.moveTo = function (x, y) {
if (document.layers)
this.layer.moveTo (x, y);
else if (document.all) {
this.layer.style.pixelLeft = x;
this.layer.style.pixelTop = y;
}
else if (document.getElementById) {
this.layer.style.left = x + 'px';
this.layer.style.top = y + 'px';
}
}
Element.prototype.setVisibility = function (visibility) {
if (document.layers)
this.layer.visibility = visibility == 'hidden' ? 'hide' :
visibility == 'visible' ? 'visible' :
'inherit';
else if (document.all || document.getElementById)
this.layer.style.visibility = visibility;
}
Element.prototype.animate = function () {
this.moveTo(this.startX, this.startY);
this.setVisibility('visible');
this.x = this.startX;
this.y = this.startY;
if (this.startX > this.endX)
this.stepX = -this.step;
else
this.stepX = this.step;
if (this.startY > this.endY)
this.stepY = -this.step;
else
this.stepY = this.step;
this.tid = setInterval('Element.elements[' + this.id + '].move()',
this.delay);
}
Element.prototype.move = function () {
this.x += this.stepX;
this.y += this.stepY;
if (this.stepX < 0 && this.x < this.endX
|| this.stepX > 0 && this.x > this.endX)
this.x = this.endX;
if (this.stepY < 0 && this.y < this.endY
|| this.stepY > 0 && this.y > this.endY)
this.y = this.endY;
this.moveTo(this.x, this.y);
if (this.x == this.endX && this.y == this.endY)
clearInterval(this.tid);
}
function initAnimation () {
text0 = new Element('text0');
text1 = new Element('text1');
if (window.innerHeight) {
var ww = window.innerWidth;
var wh = window.innerHeight;
}
else if (document.body && document.body.clientWidth) {
var ww = document.body.clientWidth;
var wh = document.body.clientHeight;
}
var width = text0.width + text1.width;
text0.startX = 0 - text0.width;
text1.startX = ww;
text0.startY = text0.endY =
text1.startY = text1.endY =
Math.round ((wh - text0.height) / 2);
text0.endX = Math.round((ww - width) / 2);
text1.endX = text0.endX + text0.width;
text0.animate();
text1.animate();
}
</SCRIPT>
</HEAD>
<BODY SCROLL="auto">
<SPAN ID="text0">Kibology for all.</SPAN>
<SPAN ID="text1"><NOBR>All for Kibology.</NOBR></SPAN>
<SCRIPT>
initAnimation();
</SCRIPT>
</BODY>
</HTML>
