Tencent technical tips! How to make a terrifying HTML5 page

The whole text is full of valuable information and is highly recommended for study.

[[150798]]

Preface

On the eve of the Ghost Festival on August 28, we launched the "Game of the Brave" event in cooperation with "Grave Robbers' Chronicles". As a UI engineer, in this era of mobile Internet, every time I see various H5 pages shared in the circle of friends, I always feel itchy and want to make H5 with cool animations and exciting sound effects. Looking back on the time when I was making the Ghost Festival event page, I was still adjusting the page effects at nearly midnight. Looking at the scary pictures gradually appearing on the page, I scared myself alive, which is also quite unforgettable. As a friend who has just come to the novice village of the event page, I stepped on some pits, so let me get to the point.

Communication with designers

After getting the visual draft and the requirements, we need to understand the entire activity process. Sometimes, designers do not make videos of the animation effects of each page, but communicate with engineers verbally. In this way, engineers need to combine the activity page process and the design draft, and first conceive some animation effects before communicating with the product and design, so that the communication efficiency will be higher.

Sometimes animation novices will come up with some strange effects that may not fit the overall design style or violate the laws of physics. They have their own ideas and need to confirm with the product designer. For example, this page:

At first, the flashlight appeared first, and then the light appeared. In my imagination, there would be no yellow-green light on the flashlight at the beginning. Later, the designer reminded me that if there is no light source at all, the flashlight should not be visible. So I changed it to the current plan: the light flashes twice: the laws of physics or something, I can't remember it clearly TT.

PS When making animations, keep in mind the principles of motion effects (Tencent's excellent article! A UI interface motion effect design guide with a lot of practical information), and basically the animation effect will not deviate.

Specific implementation

If you think about it carefully, this activity page does not use any advanced techniques, it is basically completed with position positioning and CSS3 animation. However, before writing the page, there are still many concerns:

1. How to make the page compatible

Determine the position of the element according to the size of iPhone 6, and then use zoom or transform: scale(x) to stretch the page or stretch the element. During the actual development, I was confused about the usage of these two attributes, so I did some research and will talk about these two attributes in detail later.

2. How to achieve 3D change effect

You should have heard of or used the two properties of perspective and perspective-origin. Although I have seen many tutorials and sharing, I still feel a little confused when I actually write them. After searching for explanations about 3D animation, I think the principle is roughly like this:

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

For perspective-origin, you can check out this demo.

Having said so much, in practical application, I still found a generator.

The result is probably something like this:

I want to focus on the realization of tapes. The main image resources involved are the following:

The tape is divided into three parts: the bottom of the tape, the cover of the tape, and the tape. The cover and the tape are front views, and 3D rotation is needed to make these two elements "lie down". In order to ensure that the three elements will not be misaligned due to screen scaling, the positioning of the cover and the tape must be based on the bottom of the tape. In fact, there are two covers on the tape, I wonder if you have noticed. In fact, this cover is symmetrical in both left and right and in the center, so it is completely possible to achieve this effect with only one picture, using transform: scale(-1, 1); and transform: scale(1, -1);.

3. How can animation create a sense of immersion?

My personal favorite part of this activity page is the animation of the stars falling down. It feels like all the drama is on it. The initial idea was just the stars falling down. Thanks to the suggestions made by experienced colleagues during the production process: there should be dust splashing or sparks flying when the stars fall down. Later, after discussing with the designer, we finally used the dust splashing effect. However, I originally wanted to make the iron plate behind the stars have a vibration effect. Due to time constraints, the vibration effect is a bit difficult to add, so I gave up. I feel a little regretful about this. Maybe the newbies on the page are not experienced enough, and many animation effects are not perfect due to limited imagination. At this time, asking experienced colleagues around you is a very effective method. At the same time, you must watch more B station to broaden your horizons.

Hit some pits

The page layout is not complicated. As mentioned above, it is basically implemented using position: absolute;, but some problems were encountered and the following conclusions were drawn:

1. Don’t use a butcher knife to kill a chicken. What’s most important is to solve the problem quickly and well.

The picture above is a screenshot of the homepage. After the page loads, you should be able to see an animation in the blue line under "Courage Test".

The story goes like this. Ever since the SVG king Xiaopa came with the magic weapon svgartisan, I always wanted to add some SVG when making a page. However, this blue line has special effects, so after exporting SVG with PS, it needs to be processed again to restore the effect on the design draft. And you know that SVG code is always a bit long. In fact, there is a simple and crude method: change the width of the blue line image. Although this method is not good in terms of performance, considering that this is the only place where the page is redrawn, it is still implemented by using image + width control.

I don’t know if people would do something for a certain technology, but in fact completing that thing is the real purpose, but because of that technology a lot of progress is delayed, which is a bit like showing off one’s skills.

2. Promise me, don’t animate pseudo-elements

Pseudo-elements are really like gods. One label has two sons. I don't know why it feels like gold. But the animation on pseudo-elements is really a pitfall. I was young and ignorant. I finished writing the page and found that the beautiful animation effect on iOS was...

There are many pitfalls on Android, so don't apply too many new technologies at once. For example, if you use flexbox layout on Meizu, you need to add display: -webkit-box. Another lesson is that you should test each page QAQ. Because this project was developed in parallel with the refactoring and front-end development... When I changed the pseudo-elements to actual DOM elements, I felt sorry for the front-end.

3. Please write a good comment

The front desk students who work with UI engineers need to read the comments to know when to add what class. When I first started to accept requirements, I never wrote comments... I feel sorry for the front desk students TT. Now my personal comments are as shown above. I have also seen the comment styles of different colleagues in the group. They are similar. The main idea is "add XX class at XX time". Just agree with the students you work with.

Use of zoom and transform: scale(x);

I will discuss the zoom and transform: scale(x); issues mentioned above in detail later.

#p#

Why Use Zoom

Nowadays, the design drafts of activity pages and product pages are gradually based on the 375×667 iPhone 6. However, in real life, these pages will appear on the thin and long iPhone 5, the 480px height iPhone 4 and the large screen iPhone 6+, not to mention what kind of GUI will appear when opened on the Android series of Samsung, Xiaomi, Meizu, OnePlus, etc., which are unknown in size.

Take the design draft of this event page for example, the button for user interaction is at the bottom of the page. There is a premise, in order to be compatible with screens of different widths, the page is scaled based on the 375px of iPhone 6 using the zoom attribute. It can be seen that the width of iPhone 5 and iPhone 4 is the same, and looking at the design draft, the page elements are distributed from top to bottom:

In other words, using the same zoom value can satisfy the page effect of iPhone5, but on iPhone4, the button will be biased to the bottom, and the overall page will also feel biased to the bottom. However, the zoom value cannot be changed casually, otherwise the left and right borders of the recorder image in the red frame will be displayed. Therefore, the spacing between elements should be adjusted for iPhone 4, and the final effect is probably like this:

It can be seen that the effect is not very good. The whole page is very crowded. So in this case, I think using a unified zoom value to adjust is a bit of a one-size-fits-all approach. If you fine-tune each element, the best effect will be much better. Plus zoom will have certain performance issues. Some colleagues in the group adjust by zoom, and some add classes to each element and adjust through transform: scale(). The most amazing thing about refactoring is that all roads lead to Rome. You can achieve the visual effect you want in any way, but the implementation methods may be different due to various reasons.

When you get a design draft, you should first look at the layout of the design draft. Some designs have effects from the top to the bottom of the page. At this time, you should consider how to ensure the complete presentation of the page on devices with low screen height such as iPhone 4; or which elements should be hidden without affecting the interaction. Sometimes the elements on the page are relatively concentrated. At this time, you should consider whether to adjust the spacing so that the page will not be too empty on large-screen devices such as iPhone 6+.

To understand the meaning behind the design draft, you can't just start working on it as soon as you get it. Some elements actually need to be considered as a whole. At first glance, some seem to be positioned using position, and you can just write the top value separately. Little do you know that what the designer really wants to express is that as a whole, they should be absolutely centered on the page. If you don't get this point, you will cry when it comes to compatibility.

The concept of zoom and transform:scale

First, let's look at the description of zoom and transform:scale:

Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.

From the definition, zoom scales the viewport of the container being zoomed, which can be imagined as the effect of a magnifying glass. This property is inherited, so when we make it compatible with device screens, we can add a div under the body tag to wrap other elements on the page, and then add zoom to this div, and the visual effect achieved is that other elements on the page are also zoomed. However, some elements do not support zoom.

A two-dimensional transformation is applied to the coordinate system an element renders in through the 'transform' property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.

Before talking about scale, we should first look at transform. The process of applying the transform attribute to an element is actually a matrix transformation process. When rendering, the coordinates of the element will be determined, and then the matrix operation with the transform attribute value will be performed to obtain the final coordinates. However, you will find that after an absolutely positioned element changes its display position through transform, the tbrl value of this element will not be updated, and the transform attribute is not inherited.

The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

scale is a property value of transform, which is a scaling matrix. When an element is defined with transfrom: scale(x);, its transfrom-origin is still used to determine the final scaling effect. It is still a question of compatibility with screen resolution. If you want transfrom: scale(x) to achieve an effect similar to zoom, remember to set transfrom-origin to 0 0. The reason for this setting is that elements in the document flow are scaled with their upper left corner as the center. When the element is out of the document flow, in order to achieve the same effect as zoom with transform: scale(x);, it is necessary to analyze in detail how to set transform-origin.

You may have noticed that in the previous sentence, I said "similar effect" instead of "same effect", because you may encounter the following problem when using scale. In the following picture, the left side is transform:scale(.85), and the right side is zoom: .85:

The following is the style of the outer container. The background is defined in the switch-wh animation. The browser calculates the size of the container by itself through absolute positioning to ensure that the container fills the entire screen:

Because zoom is applied to the container below body that takes up all the screen space, by definition and the inheritance of zoom, we can say that using zoom on this page actually zooms the entire screen (that is, the viewport). You can imagine the effect of opening the page in a browser and then zooming in on it:

Why does scale leave mysterious white areas on the right and bottom? Let's go back to the definition of transform, "applied to the coordinate system an element renders in through the 'transform' property". When the elements are rendered and the coordinates are determined, scaling means changing the size of the original elements. So although the positions of the four corners of .sf-index are (0,0), (100%,0), (0,100%), (100%, 100%) when rendered, they become (0,0), (85%,0), (0,85%), (85%,85%) after scale with (0,0) as the transformation center. We will see a white border with a width of 15% on the right side of the page and a white border with a height of 15% at the bottom of the page.

It seems that zoom is invincible.

It seems that zoom should be used when compatible. Well, that's what I thought after seeing the result of scale. Then I found that the text display on the page after zooming is not normal. The left side of the picture below is the iPhone 4 zoomed, and the right side is the iPhone 6 not zoomed:

Since the page was scaled as a whole, the text was also scaled naturally. This chopped text effect was quite suitable for the Ghost Festival activity page, so I did not do any processing. Normally, if processing is needed, it is to adjust the line-height of the text and the height of the container so that it is not blocked.

Just as the actual size of page elements will change after zooming, the size of the image will also change, and some problems will arise when using sprite images. Sprite images are a combination of various small images on a large image, and the image is positioned by width, height and background-position. As shown in the figure below, the boundaries of adjacent images are also displayed together.

Reviewing the elements, I found that the size of the element used to display the image is also wrong:

It can be seen that the correct size of this element should be 198×52. After zooming in with zoom: 1.10, the container becomes smaller. Later, the zoom value is adjusted to 1.104 (414/375), and the boundary problem of the image is solved.

Regarding the problem of images not displaying properly, I speculated that the reason was that the zoom value was set too small, the image was not calculated correctly after zooming, and the image container was too large, so the edges of adjacent images were displayed. Later, the zoom value was set according to the ratio, and this problem did not occur.

Finally, zoom is not friendly to performance. The following two gifs are the redraw caused by zoom and transform: scale respectively:

Obviously, adding zoom to any element in the document flow will cause the entire page to be re-rendered, while transform: scale only redraws the current element.

Is there any better compatible method?

So, both methods are useless... Is there any other compatible method?
some.
For pages that require a lot of images, what do we often worry about when making them compatible? Of course, the image ratio is wrong, so we also use the method of setting padding-top through pseudo elements to ensure that the image ratio is displayed normally. However, this writing method usually needs to be combined with background-size:cover; and our commonly used tool CssGaga will cover background-size after generating the sprite image. For the current solution... the sprite image will not be synthesized.

Another solution is to use media query combined with rem (or percentage) to complete such a layout, but currently Gaga does not support rem for background-size, so how to synthesize sprites and how to generate new styles still need to find new directions. When you don't need to synthesize sprites, you can use these two methods.

Tool/Website Recommendation

1. View the device's screen parameters
2. Design keyframes
3. Where to find animation inspiration: http://codepen.io/, https://dribbble.com/