How to play HTML5 mobile page?

As a front end, you have two options when you get the design draft:

1. Fast output static page

2. Plus the high level of the atmosphere on the top of the animation to blow up the sky to make the page move up

As a front end of ambition, of course, choose 2! But the demand time is very short very short, how to do?

This time to talk about some of the animation design tips, can be in your time and no animation idea of the moment to make the page a lot of color.

At the same time will also talk about the mobile end of the H5 page optimization details and key points, so this article will be divided into dynamic and optimization chapter.

High energy = = ahead

　　First, CSS3 time series staggered fade animation

This is a more commonly used animation, its advantage is a strong sense of rhythm, the practice is to let each element hidden, and then when the page is rendered each element staggered time to appear.

Example (ignoring compatible prefixes and extraneous attributes):

The effect is that two elements fall from the top, here is a small detail (keyframes), in order to let the animation drop down a little bit, it should be in the 90% when the first drop, and then instantly in 100% to jump back 5px.

There is also a detail that Android 2.3.* can not support-webkit-animation-fill-mode, that is, the gradient animation can not stop at the last frame. There is such a solution:

1. Use Modernizr to detect whether this property is supported, plus the identification class. No-animation-fill-mode;

2. The following measures are taken according to the identification category:

(1) Use JS to simulate the same effect;

(2) Using CSS to screen out the animation;

(3) or directly all use transition to do (do not keyframes).

The sample pages are as follows:

(Note: This case link has expired)

　　Second, CSS3 details emphasize animation

Some of the local details, if it is gradually displayed, will be boring no feeling, such as the title, button, etc., need a kind of emphasis.

In two different situations:

1. If time permits, the basic approach is to cut an element into different chunks, such as the hands and feet of the villain cut into different pictures, and then let them regroup, and then by giving different CSS animation to make it lively, here to cite a webank example:

(Click to view demo)

2. If time is tight and not as good as Sonny's in animation detail, you can use some assistive tools:

Animate.css, through the direct preview to choose the desired dynamic effect, and then download its CSS to the corresponding keyframe to peel down the good (reference to the entire CSS is a waste of resources).

Third, SVG animation

SVG technology is becoming more and more unfamiliar, the use of the threshold is gradually reduced, and SVG animation can also use CSS control.

First look at a birthday page, is an SVG cake:

(Note: This case link has expired)

Visible svg is very powerful! Make up for the CSS3 of the problem.

However, this kind of animation is also a bit time-consuming, but there is a more commonly used, is the line of the depiction of animation, CSS3 more difficult to achieve, here can be used SVG, see map:

Introduces a PS plug-in Svgartisan (there is not yet a home page), this tool can directly based on PSD path layer to generate SVG graphics.

The next step is simply to generate the corresponding SVG for the path graphics on the artwork using plug-ins, such as:

(Note that in the Foreignobject tab, browsers that do not support SVG will see a picture under a. M3-svg-nosupport label.) )

Then use the CSS3 animation control Stroke-dashoffset:

The effect is not difficult it! SVG also has a variety of uses, such as the production of Iconfont, you can dig deep.

　　Four, Gravity gyroscope

To make the page more layered, let the design provide some pieces of debris, such as color flowers, stars and so on, and then separate them out to put the picture foreground, using the gyroscope with the mobile phone movement debris also follow the movement, how fun!

Here is a tool to easily achieve the effect of gyro gravity: Parallax.js

Use simple, define a Parallax-obj parent class, add the elements that need to be moved to the layer class, and then set the scope of the move data-depth:

　V. Background music & sound effects

H5 page to cool, vivid picture or not enough, must cooperate with vivid music. Therefore, you can actively communicate with the design or product, so that they can provide music resources, minutes led to UV soar have wood!

Of course, with the music, the front end is not directly referenced, or a bit of demand:

1. The music should not be too long, 30s is good, and music to add gradually fade effect, easy to cycle playback;

2. Music volume to small, sound and flow, on the mobile phone or priority to consider traffic bar.

General background music Volume acceptable range is below 200K, if too large, you can use the format of the factory software, reduce its bit rate and channel to change the volume.

Next, simply refer to:

Here's the problem, iOS can't play music automatically, be sure to trigger a user interaction event, such as Click.

But there is a hack way to get the iOS micro-side page to play automatically (Safari is still not valid):

Through a new picture, listening to a picture of the OnLoad event, the end of the callback to perform audio playback audio.play (), the principle is estimated to move the DOM structure, equivalent to performing an interaction. (Some have also used createevent simulations, and the principle is to move the DOM.) )

Therefore, remember to expose a music off/Open button, or it must be the user scold death.

　Six, interesting loading.

Loading page still want to have, in case the user speed is slow?

So much has been done, if there is no resource load is not to play, so also need a loading support. In general, the page volume is larger than 3m to add loading page.

However, loading can still do very interesting, the general practice is:

1. Introduce brand, such as app promotion page;

2. Introduce interesting animation, put a cheap figure to dance to you see;

3. Basics, with CSS3 simple animation.

The final summary = = =

Finally, give an example to end it.

This is the second edition of the Space 5.0 reservation page, which uses a number of methodologies such as loading animation, CSS3 animation, SVG star link, first-screen planet Gravity sensor, music (played after using the toggle button), and so on.

(due to the end of the activity, many operations have been deleted from the simple, ignore the details)

(Click to view demo)

Of course, really want to do efficient production dynamic H5 page, or by accumulation, so usually do the details of the animation themselves have accumulated, the next minute can be used.