This effect is modeled after the Chirs Coyier's parallax tutorial, which has been used by the Chirs to allow the use of the starry background.
Operation Effect:
Watch here:http://www.fofronline.com/experiments/parallax/
The effect can be previewed in Safari 4 beta and Google Chrome for this effect without JavaScript.
(but not viewable in IE7 and the following versions)
Implementation method:
This page's HTML code is very simple, through a div to define the background, another div to define the content, here using the CSS3 in the background technology, so need additional tags to represent other background pictures.
Set the CSS background container in a fixed position and let it occupy the bottom of the page with the top, left, bottom, and Righ properties. The background picture is specified by the Background property, with the topmost background specified first. Each picture is positioned as a percentage, and their position is different, so that when the size of the container changes, each image will move, resulting in parallax effect
The usual idea is to animate the page only when it is scaled, or when JavaScript is used to control it. Here's another way to use it. By moving the left edge of the background diagram container (for example, from 0px to 100px). This changes the overall width of the container so that the background picture moves in varying degrees according to their percentages. By setting the length of time and the left position large enough, a continuous parallax movement will result.
You can increase the speed of the move to get more interesting results, and you can also add some mouse movement, the final CSS code is as follows:
Small data: Parallax effect, originally an astronomical term, when we look at the stars, the stars away from us moving slower, the stars near US move faster. When we sit in the car and look out of the window, there is also the feeling that the distant mountains do not seem to be moving, and the nearby paddy fields are flying fast. In many games, parallax effects are used to increase the icing on the scene. (Translate/Cao)