This is a sample page, go back to the main article.
This example 6 is implemented using the computers 3D graphic hardware.It is a simple example, to show the basics of animations during scrolling. Further examples demonstrate the advantages of the 3D acceleration.
This example page has two text blocks and a big image. The animation scrolling down fades out the first text block to show the background image. Further scrolling fades in the second text block.
followed by the image and then the second text block.
The 3D animation declars the image to appear 5000px behind the
text plane and so scrolls more slowly. Therefore less space is
needed for the image and the second text block is moved upwards
'margin-top:-600px'. In addition simple fade-out and fade-in animations for the first and second text block are defined.
Next example: Example 7