How to make a HTML5 page of the People's Terror

Today Tencent's Ho 66 students to do a recent H5 summary notes to share out, will design dynamic effect, concrete implementation methods, stepped on some of the pits are complete comb the full text of high capable goods, strongly recommend learning yo!

　　Objective

Recently the fiery audio entertainment platform APP, Penguin FM (Editor's note: This is not advertising), on the eve of August 28, the joint "tomb Grave note" launched the "Game of the Brave" activities. As a UI engineer, in this mobile internet era, every time to see the circle of friends are sharing a variety of patterns H5 page, is always itching unbearable, but also want to do with cool animation and H5 with a sense of sound effect. Recall to the Ghost Festival activity page, close to midnight 0 o'clock is still adjusting the page effect, looking at the page on the fading out of the terrible picture, living frighten himself, is quite unforgettable. As just came to the active page of the novice village friends, stepped on some pits, so let me get to the point. Oh, wait a minute, please sweep the two-dimensional code first ~

　　Communication with the designer

After we get the visual draft and the demand list, we need to understand the process of the entire activity. Sometimes, the designer does not make each page animation effect to make the video, but uses the oral method and the engineer to communicate. This will require the engineer to combine the activity page process and design draft, their own first concept of some dynamic and product and design communication, so the efficiency of communication will be relatively high.

Animation Novice sometimes think of some strange effect, may not conform to the overall design style, may violate the physical laws of reality, have their own ideas, and product design confirmation. such as this page:

It started out with a flashlight, then a light, and in my vision, there would be no yellow-green light on the flashlight. Then the designer reminded: if there is no light source, you should not see the flashlight. Changed to the current scheme: the light flashes two: The laws of physics, I just can't remember. T.

P.s. When animating, keep in mind the principle of dynamic effect (Tencent Boutique article!), the UI Interface Dynamic Design Guide for more than dry goods, basically the effect of animation will not run away.

　　Concrete implementation

Think carefully, this activity page does not use what advanced skill, basically is to use position localization and CSS3 animation completes. But before you write the page, there are a lot of concerns:

　　1, page compatibility how to do

Determine the position of the element according to the IPhone6 size, and then stretch the page or stretch the element with zoom or Transform:scale (x). At the time of actual development, I was confused about the use of these two attributes, so I did some research and later I'll talk about these two attributes in detail.

　　2, 3D change effect how to achieve

We should have heard or used perspective and perspective-origin these two attributes, although the tutorials and share have seen a lot, but the real writing is still some confused, various search on 3D animation explanation after I think the principle is probably this:

To put it simply, imagine that you are standing in the red spot in the picture above, that the distance between you and the object is perspective and the position of the eye is perspective-origin. OK, now stand still, look at this object, imagine the effect of the object projecting on a plane (the plane here is our display), which is the result of the 3D projection.

About Perspective-origin, you can look at this demo.

Having said so much, in practical use, I still find a builder.

The effect is probably this:

To focus on the implementation of the tape, mainly involved in the picture resources are the following:

The tape is divided into 3 parts, tape bottom, tape cover and tape. The cover and tape are the face view, you need to use 3D rotation, let these two elements "lie down", and in order to ensure that these three elements will not be due to screen scaling, the problem of dislocation, you need to ensure that the tape cover and tape positioning is based on the tape bottom. In fact, there are two pieces of lid on the tape, I do not know whether we have noticed. In fact, the lid is symmetrical and central symmetry, so you can only use a picture to complete the effect, with Transform:scale (-1, 1); and Transform:scale (1,-1); Realize.

　　3, how does animation have a sense of generation?

This activity page My personal favorite place is the star hit the animation, feel all the play is in it. The beginning of the idea is just the stars down, thank you in the production process, experienced colleagues suggested: When the stars hit the dust Splash or Mars splash effect. Later and design to discuss, finally used the effect of dust splashing. But originally still want to do, the iron plate behind the star should have the effect of shaking. Because of the time relationship, the effect of vibration is a little difficult to add, so give up, this feeling there are some regrets. Perhaps the page novice's experience is not enough, many animation's effect because of limited imagination therefore is not very perfect. It is a very effective way to consult with experienced colleagues around this time. At the same time, we must look at the B-station to broaden their horizons to do oh.