Mozilla Demo Studio

  • Submit a Demo

Taboca Layer Station (Ported demo from 1997)

This is a demo from 1997 — Layer Station — brought back to life

Built using Audio, Fonts & Type

  • 77 views
  • 0 comments

More About This Demo From The Author

This demonstration was featured at the Netscape Devedge in 1997, under innovation from third-parties. It was all written with the <layer> tag. I rewrote the demo with some DOM now simply to keep here in the Mozilla archives as a historical artifact. If you look at the markup you will see a blend of "manually written" tags with some loops to create a positioning for elements — all absolute positioning of course. The zoom animation effect, to the "welcome part" was made of a lot of "repeated font tags". The train graphic was made using Autodesk 3D studio and it took more time than the HTML web page of course.

About porting work:

I tried to add as less possible and not touch much the markup. So basically replaced the <layer /> with <div /> and changed the document.layers["layerName"] and <layer name="layerName" /> with DOM equivalent approach. The reason I decided to bring this back is because I am studying animation in HTML and the problems and solutions. This demo, as many others online, uses intensively setTimeout to keep the animation beat — the steps of the animation. Nowadays, 15 years later, a lot of pages do the same but there are some interesting options being studied — requestAnimationFrame for example. In addition a lot of intensive animation has shifted to things like CSS3. It's important to notice that even with CSS3, the programmer ( JS ) still needs to coordinate the events in time — so setTimeout still is a current scheduler.

What are other ways we can schedule events in the document and have our real-time animation projects? please join me in this quest and discussion.

No comments yet.

Register or log in to add your own.

Get the Source Code

Download the Source 80.9 KB · ZIP File

Browse the Source

This demo is released under the MPL/GPL/LGPL license.

More by TelaSocial