Auto-scroll parallax effect without Javascript

Source: Internet
Author: User

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:
HTML of this pageCodeIt is very simple. One div is used to define the background, and the other div is used to define the content. Multiple background technologies in css3 are used here, so additional tags are required to represent 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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.