Website design: What is scrolling parallax? Guide to the design of rolling parallax

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

As one of the hot trends in the future web design, "rolling parallax" has been adopted by more and more websites in recent years, and the special new display mode has also made many users bright. On the network also springing up a lot of like "30 exciting parallax scrolling website", "60 parallax Scrolling website appreciation" ... And a series of parallax scrolling article, but the majority of appreciation, the real guide designers how to design, how to implement the practical article is very few. So the germination of their own writing an idea, and interested people to share the rolling inspection design some of the experience.

What is a scrolling parallax?

Parallax Scrolling (Parallax scrolling) refers to allowing multilayer backgrounds to move at different speeds to form three-dimensional motion effects, bringing a very good visual experience.

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. Many games use parallax effects to increase the icing on the scene. The simple point is that the elements of the page in the scrolling screen when the location of the changes, however, the different elements of the change in the speed of the different positions, resulting in the page elements have layers of illusion, which 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.

Seemingly complex in fact this is not a new thing, this design thinking as early as the 80 's small overlord learning machine on the saw.

In this picture through the character Mario, foreground, background of three parts of the different moving rate to achieve stereo effect. The same is true for analog web pages. A rolling inspection site will have at least the following layers: The background layer, the content layer, the texture layer.

Scrolling in the background layer (slowest)

The scrolling (secondary slow) of the texture layer (the element between the content layer and the background layer); According to the real life experience, the farther the scenery moves the slower.

The scrolling of the content layer (which can be consistent with the scrolling speed of the page).

We make the rolling speed of three layers inconsistent, we make a simple difference scrolling effect.

Of course, this is only to achieve a simple scrolling parallax effect, distance from a good rolling inspection site is not enough.

Let's analyze some foreign examples to see how they do it.

http://www.nintendo.com.au/gamesites/mariokartwii/

Take a look at this Mario car's website:

In this site is the background layer, is a track, throughout the site throughout the whole station to play a clue to the role of the previous screen and the next picture has a connection. Parallax scrolling is also carried out along the road. The map layer, in the screen played a role in rendering the atmosphere, one is the prospect of a close, rolling speed rate is not the same, so that people have a kind of this time is not browsing the web, but on the track of the generation of a sense of gallop. The content layer, the site is interesting while not forgetting the presentation of content. The location of the navigation, often scrolling parallax of the site is very long there are many screens, so navigation is essential. It is important to let users know where they are and how much they have left, and also to play a role in navigation so that users can return to the previous content.

Take a look at http://intacto10years.com/index_start.php this site.

The site will jump to the bottom of the page at the beginning of the load, the rockets as a carrier, to travel in space for the story background. With the launch page of the rocket gradually rolling upward, with the means of the scene, the image of the Intacto from 2001 to 2012 10 years of history. Very lively and interesting.

There are similar sites http://lostworldsfairs.com/atlantis/

This site cleverly transforms the page down to a wonderful deep-sea tour. Navigating to the depth ruler, as the scrolling villain of the Web page gradually sinks into the deep sea, also gradually sees many different "landscapes" in the deep-sea species, which is very interesting.

These three examples are because they are common and represent a category of scrolling parallax site techniques.

This kind of site will be the original boring content of the reorganization, the story of the scene. This requires the designer to have a clear story-telling logic.

Need to have a visual guide element throughout the station, just like Mario's track, Intacto spacecraft, scuba diving pipes and villains. This visual guide will give you a sense of generation in the scene. As if you were experiencing the whole story with this guiding element.

When layering a design, the designer has to position the background layer, the relationship between the mapping layer and the content layer.

Define the need for a map layer based on the functionality of the page itself

The mapping layer exists to communicate the visual effects more effectively, but if it becomes a distraction, it violates the original purpose of our use.

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

Of course, this kind of design scrolling parallax site is the biggest difficulty lies in the story, perhaps someone asked: "I want to design the content of the site is difficult to tell how to do?" Then I'll explain another common design technique for rolling parallax. As opposed to "storytelling" I call it "multiple-scenario."

Give some typical chestnuts:

such as Spotify's official website https://www.spotify.com/int/

Web site from Listen everywhere (everywhere to listen), Search & Discover (search and explore), build your collection (building your collection), Follow & Share (focus and sharing), Radio (radio) This five latitude to introduce Spotify's music product. Create five scenes using appropriate background images, and introduce five features of the product. The designer divides the Web page into the content layer and the background layer, and uses the speed difference when scrolling to form the rolling parallax. A screen of a scene, also can be called a picture, five scenes independent of each other, through the vertical scrolling screen to achieve switching.

Another example: http://www.ok-studios.de/home/

This website designer also uses the multi scene style, divides the page crosswise into many scenes, the scene and the scene usually the color distinction is very obvious, divides the scene. In the scene, the designer makes a Gaussian blur of the close-up part, thus subtly forming the visual effect of depth. In the technical implementation, in addition to the use of different layered rolling rate is not the same, but also to define the corresponding elements of the display range. The part that goes out of range when scrolling is hidden, forming a visually layered effect that is obscured.

Take a look at this site again: http://www.zensorium.com/tinke/

This is a product introduction site, the designer is very interesting, in the form of multiple scenarios to introduce the product's several major features, while in the process and the product itself as a clue through all the scenes. It's kind of like a story-and-scene combination.

It is not difficult to summarize the characteristics of this kind of scrolling parallax site from several examples.

Scrolling parallax web design process:

After all 10243.html "> Visual designers output Visual draft are static pictures, while scrolling parallax site with the rolling constantly changing, so the design and the traditional Web page is very different." At the beginning of the design, the designer should decide that this page is suitable for rolling parallax. After deciding to adopt the rolling Parallax, the designer needs to organize the existing content data, make the story or the scene, then design the visual design manuscript of the key state according to the idea. Traditional web Designers do this step basically the work has been done, can be handed over to others. But scrolling parallax site is not good, visual design work is just beginning, at this time, you need to be responsible for and refactoring designers to explain your design ideas, how you need to layered how to exercise. It's not always easy to refactor a designer's implementation, and it usually requires a designer to return to redesign the artwork because of the cost and so on. Through repeated communication, repeated running-in to complete the expected beautiful scrolling parallax site.

Some tips and small details in the design of scrolling parallax website:

1. Don't forget to loading.

Scrolling parallax site because the content layering will use a lot of large size pictures or PNG pictures, so the volume is often larger, so don't forget to design loading animation this time.

2. The ingenious use of slash.

When a slash is drawn from the bottom, it is usually visually giving an illusion that it is drawn from the lower right corner at a certain angle. So the diagonal layout is often used in the design of the scrolling parallax site.

3. Use of pure color

There is no more intuitive and concise background than a solid color. A solid color can be expressed in many ways.

Solid colors are easier to extend than gradients and pictures, and solid colors can easily distinguish between parallax intervals. In use we can adjust the transparency of the color to achieve a variety of visual effects. So the use of pure color is also the great love of scrolling parallax designers.

Write in the end to say: As a visual design in fact, there are a lot of shackles, can encounter a scrolling parallax project is not easy, encountered will not easily let go, play a good, it will make your design a lot of color.