HTML Time, Part 2

• facebook
• twitter
• google+
• in
• Email

Appear in the Same Place

I will do this with text, but you can easily see how this can be used to run a slide show of images. It works just the same. Just replace the text that I am using with images. It'll work just the same way.

See the Appear in the Same Place Example

Here's the code that did it:

<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="0" DUR="1">Every second text will appear:</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="1" DUR="1">One second</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="2" DUR="1">Two seconds</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="3" DUR="1">Three seconds</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="4" DUR="1">Four seconds</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="5" DUR="1">Five seconds</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="6">Done!</SPAN>

I made a couple of changes. First off, I set the original text to stand for a limited duration so it'll get out of the way for other text that is soon to come. I then set each SPAN to a specific position. Since all the positions are the same, they all appeared one right on top of the other.

---

That's That

I really like this effect. I dislike that it is only available on IE 5.5. If you want to use it, feel free. Netscape renders the text perfectly. It just doesn't have the delay as the seconds pass; everything displays straightaway.

Just make sure that the text you use doesn't rely heavily on the fact that it pops in after a short amount of time.

 

 Enjoy!

[Make the Text Show Up] [Appear and Go Away] [Appear in the Same Place]