Automatic scrolling parallax effect without JavaScript_Experience exchange

This effect was modeled after Chris Coyier's parallax tutorial, and the starry sky background was used with Chris' permission.

Running effect:
Watch here: http://www.fofronline.com/experiments/parallax/#experiment
This effect can be previewed normally in Safari 4 Beta and Google Chrome. No JavaScript is required to achieve this effect.
(But it cannot be viewed in IE7 and below)

Implementation method:
HTML code of this page It's very simple. One div is used to define the background, and another div is used to define the content. The multiple background technology in CSS3 is used here, so additional tags are needed to represent other background images.

Set the CSS background container to a fixed position and let it occupy the bottom of the page through the top, left, bottom and right properties. The background image is specified through the background attribute, and the top-level background is specified first. Each image is positioned according to percentage, and their positions are different, so that when the size of the container changes, each image will move, thus producing a parallax effect

According to the usual thinking, it can only be done when the page is zoomed or controlled using JavaScript Produce animation effects. Another method is used here. By moving the left edge of the background image container (eg from 0px to 100px). This changes the overall width of the container, causing the background image to move differently depending on their percentage. By setting the duration and left position large enough, a continuous parallax movement effect will be produced.

You can increase the movement speed to get more interesting effects, and you can also add some mouse actions. The final CSS code is as follows:

Quick information: The parallax effect is originally an astronomical term. When we observe the starry sky, stars far away from us move slower, while stars closer to us move faster. When we sit in the car and look out the window, we also have this feeling. The mountains in the distance don't seem to be moving, but the rice fields nearby are passing by quickly. Parallax effects are used in many games to add a three-dimensional feel to a scene. (Translation/Cao Sijia)