Principle and implementation of parallax Scrolling (Parallax scrolling) effect

Parallax Scrolling (Parallax scrolling) is a multi-layered background that moves at different speeds, creating a three-dimensional movement that results in a very good visual experience. As a hot trend in web design this year, more and more websites have applied this technology.

You can look at the effect first: http://www.ok-studios.de/home/

One, what is parallax scrolling? Parallax effect, originally an astronomical term, when we look at the stars, the stars moving farther away from us, the stars moving faster than our nearest star. 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 passing by quickly. In many games, parallax effects are used to increase the stereoscopic effect of the scene. The simple point is that the elements of the page in the scrolling screen when the location of the change, but the different positions of the various elements of the speed of different, resulting in the elements of the Web page of the illusion of scattered levels, and our human eye effect is very similar. I see a number of products commercial parallax scrolling effect to display products, from different spatial angle and user experience, played a very good effect. At present, this kind of disparity scrolling effect is applied by more and more foreign websites, which becomes the hot trend of web design. Through a long page page, which utilizes some stunning illustrations and graphics, and uses the Parallax Scrolling (Parallax scrolling) effect, allows multi-layered backgrounds to move at different speeds, creating three-dimensional motion effects that bring a great visual experience. The perfect display of a complex process that makes you feel like you're in it. Tired of the stereotyped, inflexible web design you do not put a try.

A fixed background does not let it move with the scroll axis, but the container containing the background is scrolled along, resulting in visual differences that look like a conversion scenario.

Second, the main characteristics of parallax scrolling effect:

1, intuitive design, fast response speed, more suitable for single page 2, differential scrolling layered parallax page Many elements are rolling independently of each other, if we come to other hierarchies, there can be two to three layers: background layer, content layer, map layer. Three, the principleCreate a simple stereo effect by creating different parallax in the scene as it moves through the foreground and background

Many of the elements on the page roll independently of each other, and if we come to other hierarchies, we can have two to three layers: the background layer, the content layer, the decal layer

　　Implementation rules for differential scrolling:

• Scrolling of the background layer (slowest)
• Scrolling of the map layer (elements between the content layer and the background layer) (sub-slow)
• Content layer Scrolling (can be consistent with scrolling speed of the page)

We made a pretty difference scrolling effect by making the three-layer scrolling speed inconsistent

1, the use of large background

These background images are generally high resolution, large images that cover the entire site. High-definition photo is a good way to catch the audience quickly, can produce a very powerful visual effect, the user's vision will unconsciously fall on the broad background

Attention:

1.1, the background map of the color, content in the choice to be very fastidious, the premise is not to destroy the user's experience, otherwise beautiful photos are in vain.

The best choice of picture type tends to some softer, slightly transparent class, do not affect the main content of the website reading, recognition, pay attention to coordination.

1.2. Pages with a large number of images should consider the pre-loading of images, in order to provide users with a better and smoother visual experience.

2, you can also use a simple color scheme

Nothing is more intuitive and concise than a solid color background. Solid colors can be expressed in a variety of ways, the color of a parallax interval is best to keep 2 to 3, we can adjust the color of the transparency, to achieve various visual effects

3, positioning the background layer, the relationship between the map layer and the content layer

According to the function of the page itself to define whether to need a map layer, the presence of the map layer is to more effectively communicate the visual effect, but if it becomes interference, it will violate the purpose of our use

The content layer's presentation is the most important, regardless of the background layer and the level of the number of fancy, in the designer design process, the content layer of the user's display is the highest priority

4. Tell a Story

Strong performance, minimalist style and design aesthetics together constitute an excellent interactive narrative experience. We often hear this: content is kingly, technology is just a tool to achieve content.　When you are able to successfully combine powerful information with beautiful execution, you can create experiences that people like and enjoy. ———— Wieden+kennedy

Data visualization--Information graphic design Story 1 traditional mercury thermometer and large letter mercury Thermometer

Iv. implementation methods and tools

1. The attribute that defines the scrolling style of the background in CSS is backgroud-attacthment

background-attachment --Define how the background image moves with the scroll axis

• Value: Scroll | Fixed | Inherit
  • Scroll: Default value. The background image moves as you scroll through the rest of the page.
  • Fixed: The background image does not move when the rest of the page scrolls.
  • Inherit: Specifies that the settings for the Background-attachment property should be inherited from the parent element.
  • Initial value: Scroll
  • Inheritance: No
  • Applies to: all elements

Links with the following: http://www.w3school.com.cn/css/pr_background-attachment.asp

Browser support:

Test chrome,opera,safari,firefox,ie7-8 are OK, so that means IE6 not ~

To use this attribute under IE6, you need to place background-attachment:fixed in body or HTML, which means that you say it is useless in other tags. The above can see the effect is because it is placed in the body.

<!DOCTYPE HTML><Html><Head><MetaCharSet= "Utf-8"><Title> Scrolling Visual Aberration Example</Title><Style>*{Padding:0;Margin:0}Body{Text-align:Center;Background-attachment:Fixed;}#main{Width:1280px;Margin:Auto}. Header{Background:#fff;Padding:10px 0}. bg-attachment{Background:URL (6.jpg) center Center No-repeat;Box-shadow:0 7px 18px #000000 inset,0-7px 18px #000000 inset;-webkit-box-shadow:0 7px 18px #000000 inset,0-7px 18px #000000 inset;-moz-box-shadow:0 7px 18px #000000 inset,0-7px 18px #000000 inset;-o-box-shadow:0 7px 18px #000000 inset,0-7px 18px #000000 inset;-ms-box-shadow:0 7px 18px #000000 inset,0-7px 18px #000000 inset;Background-attachment:Fixed;}. bg-attachment. Shadow{Width:90D;Height:700px;Overflow:Hidden;Margin:Auto;}. div2{Background:URL (qingz.jpg) center Center No-repeat;Background-attachment:Fixed;}</Style></Head><Body><DivId= "Main"><DivClass= "Header"><ImgSrc= "5.jpg"></Div><DivClass= "Bg-attachment"><DivClass= "Shadow"></Div></Div><DivClass= "Header"><ImgSrc= "Qi.jpg"></Div><div class= " Bg-attachment div2 "> < div class= "Shadow" Span style= "color: #0000ff;" >></div> div> </< Span style= "color: #800000;" >div> </body< Span style= "color: #0000ff;" >></html>  

2. Plugins

Scrollorama

Curtain.js similar to the effect of curtain rise

Jquery-parallax

Stellar.js

Jparallax

Skrollr

Parallax.js

A Simple Parallax scrolling technique via nettuts+

Parallax Slider

3. Tutorials

• JavaScript parallax Effect
• behind the Nike Better World Scene is a tutorial for designers eager to recreate the rolling effects of the Nike website.
• build a web interface with jquery and CSS that has a parallax scrolling effect for examples and tutorials that are prepared for the deeper designers who want to learn about this area.
• use jquery to create a stylish, parallax-backed effect tutorial that helps you add some rolling clouds to the background.
• Animated Background Web page head use an animated Web page header to let your visitors cheer for you!
• Parallax Scrolling Tutorial a fun tutorial with parallax effects and content appearing at the same time.

Four, ultra-dazzling parallax scrolling effect website design appreciation

GLP Creative

Divups

New ebay

Long Road Zurich

Q Music Titanic

Putzengel

OK Studios

Nike Better World

Ben the Bodyguard

Egopop Creative Studio

Smokey Bones

Cultural Solutions

The Beatles Rock Band

XHTML slicing

Farmhouse Fare

Sullivan NYC

I to Sie Ceni

Grab and Go

Micro-site for Mario Kart Wii

Air Jordan 2012

Micro-site for Mario Kart Wii

Unfold

Dentsu Network

Resim

Jan Ploch

Kry-ptis

Anna Safroncik

Unfinished Business

Volkswagen-beetle

Appmiral

Atlantis World ' s Fair

Johan Reinhold

Iutopi

Beautiful Explorer

Bagigia

Activate Drinks

Tokyu Agency Recruit 2013

Von Dutch

Playtend

Phase 2 Design Studio

Friendly Gents

Tokiolab

Krystalrae

No Leath

Dangers of Fracking

Mo ' s & Bows

Tinke

Whiteboard

New Zealand

Marcus Thomas

Fishy

Soleil Noir

Kinvara3

Smokey Bones

Laurentius:jaarverslag 2010

Ala

Bomb Girls

Head2heart

Michelberger booze<

Ascensión Latorre

Biamar

Intacto years

The principle and implementation of parallax Scrolling (Parallax scrolling) effect (RPM)