From the Thunderbolt 7.9 promotional download page CSS3 animation thought of

Usually on the product promotion page, often will introduce to the user the product function characteristic, used to convey the concept of the product, and this is the user's first new product or product features of the new feature of the perception, for this reason, when the visual designer in the design of product promotion page, often will be more or even pay special attention to the refinement of the page, But when the final design comes out, it's usually just a static page. If from the visual design point of view, may be static page visual effect is very good, but because there is always a lack of visual impact of the dynamic effect, I believe many designers are back to the page to add some animation elements, but may not want to rely too much on flash animation.

In fact, designers can now target high-end browsers, through the use of CSS3 to achieve a number of animation effects on the page, but for those who compare the low-end of the browser can be gracefully degraded into static pages, so as to bring different user groups different experience. However, to do a good job of this differentiated experience of the page, it is necessary to the various lines of people to cooperate actively, this is to be together with the concerted efforts to be able to complete

Recently had the honor to receive the Thunder 7.9 propaganda downloads the page the reconstruction, in the product, the designer and the development to cooperate with the help, aimed at Gaofu Chrome, Firefox, opera and is striving to become Gao Shuai's IE10, completed the CSS3 animation effect of the carousel chart, Bring a different advanced experience to an advanced user base.

Online page: http://dl.xunlei.com/xl7.9/intro.html (please use CHROME\FIREFOX\OPERA\IE10)

Here are some tips for doing this page

Early communication, team work

Sometimes, after refactoring gets the design draft, will try to do CSS3 animation, in the request for product approval, and then back to the design, you may find that you want to animation elements of the designer did not separate out the design manuscript, the final effect of the product is not consistent with the page theme style; Want to find a designer to help. But the designer has no time to wait for the expiration of the problem, obviously, this is the restructuring and product, the designer's early communication is not sufficient to produce problems. Therefore, completes the early communication, is completes the animation effect the first step, is also the most important step.

If you are determined to do the advanced experience of CSS3 animation, do not recommend refactoring after the final design draft to begin to consider, it is recommended that the designer to give the first draft prototype even before the design and the product and design communication ahead of time to say hello to discuss the animation program.

The content of the animated discussion is roughly to confirm:

1, animation How to move

2. What are the animation elements

3, does not support the animation browser how to express

The general division of Labor is as follows:

Product (Design): According to the characteristics of the product, determines the animation display mode, the approximate animation process; Non-high-end browser page presentation

Refactoring: Evaluate the implementation of the animation according to the requirements of the product (design) and confirm with the designer what the animation elements

Design: Provide refactoring required animation elements, in the design manuscript to do a good job of separation

Take this Thunder 7.9 propaganda page One of the animation scheme for example, the prototype version of the following figure:

A brief transcript of the discussion is as follows:

Products：

Do not animation for animation, animation should be based on the characteristics of the product to consider.

This carousel map to introduce the features of the feature is "speed experience, fast as lightning", "speed" is the main expression of the elements.

You can consider lightning strike down from the sky, lightning to a certain position after the stop falling, because of the lightning "speed" and the strong power, the bottom will appear aperture, small icons are blown open, while describing the text from left to right to fly out, and then tend to static, the last lightning stop for a certain time, so that the user's visual focus on the function point of introduction, the last lightning, Text, small icons, the aperture disappeared at the same time, with the power of small blown up to foil the "speed" of the rapid power of the big.

The entire animation process lasts for 5 seconds, and low-end browsers are displayed in static pictures.

Visual：

Lightning from the day of the split down, it is best not to vertical down, you can consider from a certain angle of inclination to split, more obvious strength;

The small icon is blown out of the process by scaling the icon to achieve small icons are blown away,

Lightning, small icons, aperture, text control transparency appears to be more gentle

In fact, you can also consider the background of the number to move up, more dynamic download process

Refactoring:

Animation to achieve the needs of the animation elements are: Lightning, fly out of text, small icons, aperture, digital background map, occlusion mask, the following figure

Considering that the animation process has scaling, there will be picture accuracy problems, designers to provide small icons, should provide a zoom to the lightning when the icon size clear map, so that the icon in the amplification process of excessive distortion blurred;

The digital background image requires that you can tile the y-axis of the picture, the animation process, to constantly repeat

At this point, the initial discussion of the animation is over and can be entered into the refactoring phase

DEMO1 is to use the weekend time animation before I have a full prior communication with the product and design.

DEMO1

DEMO2 is Monday back to the company further and the animation of product and design discussion

DEMO2

DEMO3 is the final discussion of the animation

DEMO3

From three demo we can see that the strength of the individual is always limited, the strength of team cooperation is the strongest

During the discussion we tried to compare the different effects, then choose a good, among the products, designers, the restructuring of the various opinions of the collision, the designers actively cooperate to give a good picture, if the product, design or refactoring are based on their own ideas, or to reconstruct the ability to write CSS3 to imagine the completion of animation, A good page is never born.

Heart

Do your part, do something with your heart, and others will see it.

Let's take a look at this collaborative designer's version of the design:

Refactoring to see the level of such a concise layer directory, how can not be moved, animation elements are merged with a single layer, layer folder naming all at a glance, to get such a design draft, the mood can not good?

Look at the second round of animation, 8 elder brother put forward a lot of ideas

Want to let the hummingbird shine, want to appear in the hummingbird next to the glittering stars, want to let the hummingbird through the center, the following circle in the animation form of the watermark scattered and so on, but ultimately take into account the cost of the page, these ideas are useless, however, from these ideas can be seen 8 elder brother really very attentively want to do this page well! Yes, Lightning This wheel map digital background of the sliding effect is 8 elder brother think out! There is a high demand for their own, work so attentively designers in the check, as a refactoring no reason not to work hard to do the page Wow ~ ~ ~

Good user is really good

I am writing the page time will remind myself, the final page is user-oriented, to the best page effects and experience to bring to the user!

Therefore, the reconfiguration engineer in the high-precision reduction of the design manuscript, but also to care about the user experience.

1. Loading experience

This page used a lot of animation elements, animation elements can not be avoided to use some of the larger picture, picture loading time and animation start time there is a great chance of conflict, it is necessary to deal with the first screen loading experience!

The commonly used method is targeted to delay the loading of larger animation pictures.

The first screen animation element is only two, the text picture is relatively small, moves the square picture to have 57.2K

External network environment test can be seen, pull this picture will take about 1.1-1.4 seconds

And the animation can accept only a delayed start time of 0.68s,

When the user first opens the page, there is a very big opportunity to encounter this situation: the picture just loaded in half, the animation has been started for some time, the following figure

Ask the country Xing brother, gave the following solution:

Thus, the preload effect is completed.

2. Visual Experience

The time of the auto switch is 5 seconds, and is accompanied by a 600ms fading process, therefore, the animation time should be equal to 5.6s, but the entire animation should be completed before 5.6s, to avoid flash in the 5.6s blink phenomenon, poor visual experience

DEMO

3. Save Bandwidth

This is the digital slide of the prototype design, because there are projections around, irregular, and therefore can not be used directly as a y-axis tile processing, need to two graphs:

Tiled background:

Mask projection:

The sizes of the two backgrounds are: 480x235 and 192x94, respectively: 24.9KB and 15.9KB

If the actual size: 960x470, the size of the two pictures are: 48.4Kb and 78.9KB

Within the range of acceptable distortion, CSS3 Transform:scale (2,2) and transform-origin:0 0, pull it up twice times, also achieve the effect, the total province of 86.5KB size, about twice times the original.

4. Low-end browser

CSS3 Animation does not support the browser IE6-IE9, because the animation elements of the background map are PNG24 transparent map, and a large number of, if the IE6-IE9 also load the same PNG24 map, the number of requests, browser burden, and IE6 for PNG24 translucent support is not good, The IE6-IE9 is therefore handled in a separate style:

Remove the background of the animated elements, reduce unnecessary requests, and then display them separately with three large baner background images.

In this way, in IE6-IE9, only three large banner background images will be loaded, instead of loading redundant PNG24 animation elements, the following figure is the IE7 browser picture loading screenshot:

Before the optimization, the banner background image has 11 graphs, the average size is 46K, the request number is 11;

After optimization, the banner background figure is only three, the average size is 50KB, and the number of requests is only 3;

After optimization, the total k number of the background picture is less than 3 times times, the request number is 4 times times less, why not

Product Promotion page, although only a single page, but if only the design manuscript high-precision restore, can only say that the page is done, to the page to do a good job or the heart of the effort.

In this to thank the active cooperation of students, there are 8 elder brother, Wang Yu put forward the valuable advice, there are JS talent, Guexing classmate.