Automatic scrolling parallax effect without JavaScript-experience exchange

Source: Internet
Author: User
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)

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.