Taboca Layer Station (Ported demo from 1997)
This is a demo from 1997 — Layer Station — brought back to life
L'auteur nous en dit plus sur cette démo
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.
Obtenir le code source
Cette démo est fournie sous la licence MPL/GPL/LGPL.