Auto-scroll parallax effect without JavaScript _ experience exchange

This article introduces a Parallax effect implemented through CSS3. This effect is achieved by adding multiple background images to an element and using the-webkit-transition-attribute. This effect is achieved by following the Chirs Coyier's Parallax tutorial. After the Chirs permits the use of the star background.

Running effect:
Watch here: http://www.fofronline.com/experiments/parallax/#experiment
This effect can be properly previewed in Safari 4 Beta and Google Chrome, so that JavaScript is not required.
(However, it cannot be viewed in IE7 or earlier versions)

Implementation Method:
The HTML code of this page is very simple. One p is used to define the background and the other p is used to define the content. Here, multiple background technologies in CSS3 are used, therefore, you need to mark other background images.

Set the CSS background container to a fixed position and use the top, left, bottom, and righ attributes to occupy the bottom of the page. The background image is specified by the background attribute. The top-level background is specified first. Each image is located according to the percentage, and their positions are different, so that when the container size changes, each image will move, resulting in a parallax effect.

According to the general idea, only when the page is scaled or controlled using JavaScript can the animation effect be produced. Another method is used here. Move the left side of the background image container (for example, from 0px to 100px ). This will change the overall width of the container, so that the background image is moved to varying degrees based on their percentages. By setting the time length and the left-side position to a large enough value, a continuous parallax movement will be produced.

You can increase the moving speed to get more interesting results. You can also add some mouse actions. The final CSS code is as follows:

Note: The parallax effect is originally an astronomical term. When we observe the stars, the stars that are far away from us are moving slowly, and the stars that are close to us are moving faster. When we sat in the car and looked out of the window, we also felt that the mountains in the distance were not moving, while the rice field in the near area was flying fast. In many games, the parallax effect is used to increase the stereoscopic effect of the scenario. Translated by Cao Si Jia)