Layers Source Code Coming Soon

As the name implies, layers allowed us to create layers of information piled on top of each other, hidden from view until the user presses the appropriate button. After the user selects a section, the layers containing information are hidden using one of the transition effects described below and then the new layers are showed to the user once again using transition effects.

Moving Backgrounds Source Code

Using one layer and a simple JavaScript routine, we were able to create moving backgrounds. We decided to then take it one step further by creating the effect of a moving background that changed colour as it went under the control screen. To do this we created two layers with slightly different shaded backgrounds stacked one on top of each other. We changed the clipping on the shaded layer so that it only showed from the rectangle beneath the control panel. Then we moved both backgrounds in synch to create the illusion of a moving background that changed colour as it went beneath the control panel.

Transitions Source Code

Looking at the Taboca ArtworK demo site, we began to realise the potential of transitions on web pages using layers. By manipulating the various properties of the layer using JavaScript many different effects can be created. The transition effects used in this demo include: Wipe The wipe effect is used to transition out information in the display area of the control panel. It is created by using JavaScript to change one of the clippings until the layer disappears. By reducing the bottom clipping to zero, for instance, we create the effect of a bottom-to-top wipe. Likewise, by increasing the left clipping until it hits the right clipping, we create a left-to-right wipe. Pull The pull effect is used to transition in the information in the display area of the control panel. It is created by moving the layer into the display area while increasing the clipping area on the layer to make the layer slowly appear. Since the information layers are normally positioned within the display area, we first reduce the clipping area to zero and move the layer just outside of display area. Box-Out The box-out effect is used to open the entire demo. It was created by reducing the clipping area on the layer to zero and slowly increasing it from the center of the layer until it reaches the original clipping size. In opening the demo, the background is set to black so the demo opens up when this is done.

Canvas Mode Source Code Coming Soon

To experiment with the idea of web pages designed for kiosks, we opened the demo using canvas mode. Our development started with the code segment on Netscape's site. Looking at the Stella demo showed us additional techniques for optimising this for different resolutions/platforms. There are still some issues in detecting canvas mode so we can adjust the window size based on whether or not it will have a toolbar. We're hoping these issues will be resolved in future betas of Netscape Communicator and are meanwhile searching for possible solutions. Once we have the code optimised, we will post it.