H5 Parsing | 3 routines can make such a hot "mirror in the End" H5

a mirror in the end the form of H5 is now a very popular marketing play , usually in the H5 page by imitating the lens stretching, so that different elements of the picture is presented in the audience in a way of expression. In the H5 page does not cut, the picture does not cut the case, achieves the one go the browsing effect . For this cool H5 visual gameplay, in the content display and to attract the attention of users, can be said to have a very strong role.

So today we will give you to analyze the "one mirror in the end" type of H5 case in the end what the production methods. First of all, there are several types of H5 in the exact type of mirror:

First, long page diagram:

The expression is simply slide up and down , in the whole process of other elements into the slide, can make the work more stereoscopic , get rid of only the dull text. Parallax Animation and a mirror in the end of the combination, so that the story of the communication more direct and clear, whether it is visual effects or fun, are very good, the story is full of content, logic clear, readable and strong .

representative Case: a four-word spell that cannot escape

brand Owner: NetEase

(click here to experience the case now)

A long-page picture H5 A case of horizontal sliding. The case tells of a person recalled from small to large, in the family, school, the workplace and other places, encountered a variety of "four-word curse" each age group corresponding to different content.

The case scenario is mostly night. The horizontal slide fits the parallax effect, showing a different animation effect, and this long-picture scene is drawn by canvas for the entire scene. An animated element is a dynamic effect that is formed by changing the diagram. Draw different pictures according to the coordinates of the sliding distance.

Sliding cushion effect, so that the case is a sense of line, giving the user a good interactive experience. Animation using JS to do hardware acceleration, with the "protagonist" hair slowly become white, take off, into old age, the screen also reached the end of the page, the end user can "click to watch" To download NetEase news client, you can also choose to "Look again."

representative Case: Solar term Magic Object language

brand Owner:in

(click here to experience the case now)

This "in" launched by the H5 case, hand-painted picture, with the fresh painting wind. Long press the screen, experience a mirror in the end + lens panning visual form, rowing the boat from the spring breeze to the beginning of autumn, feel the beauty of the four seasons picturesque scenery. The changes of the seasons are presented here.

Go to the first screen and tip the left slide to start the journey. Long press interaction and animation (the button is based on touch events, press the button will move the long figure to achieve sliding effect), through a cloud to reach a landscape, the user long press the button can let boatman and boat in the landscape between. Some of the elements in the screen are CSS3 animation displacement to form a dynamic effect, the visual performance is very energetic. Both the throttle and the object language appear on the screen.

At the end of the show "solar terms, not to be continued ...", click on the "continuous story" to the activity page, the original is the solar throttle illustration collection activities, draw your favorite solar terms illustrations, for the Four Seasons add a hint of beauty. Users can upload works to participate in the selection.

Second, Scene Shuttle-(picture in the picture form sense):

By a large narrowing or by a small magnification , the feeling is within a space, through the lens of the shuttle to highlight the event. In the three-dimensional space , different shuttle form, also has its more appropriate technology integration.

representative case: to Tanabata

brand Owner: NetEase News

(click here to experience the case now)

Hand-painted comic design style, from the video footage of a projector began to show a mirror to the end of the content, the 5 classic movies in the classic Scene Bridge section show.

In the case of the analog camera interface, the case adds a hint of the age, a mirror in the end of the presentation of the case content of the excessive more line sense.

End page random copy, select "Rewrite the ending" to re-election a copy, jump to download NetEase news client.

representative case: Take a breath to see the due diligence routine

brand Owner: Tomson-Times Kin

(click here to experience the case now)

The use of the picture in the work of the old pattern in the workplace, in tandem with the various routines in the workplace. The middle is mixed with funny and humorous style.

This case can also be said to be a long screen switch h5, the dynamic effect is constantly changing the graphics, and then CSS3 code to form, each scene of the text is also controlled by the CSS3 Code movement, the final background is a PNG image.

The whole case is paired with funny commentary and rhythmic music effects, full of mood.

Third, multiple Interactive lenses:

a scene, a piece of content for continuous shooting, forming a relatively complete lens paragraph, do not break the time to present a natural process, to achieve the natural transformation of space, the degree of freedom in the interaction is also greater, to achieve local and overall connection.

representative case: For # The Tide does not fall, don't say you don't expect

brand Owner: Skechers

(click here to experience the case now)

With the rotation of a tape, came to the first screen, the screen is an old TV, click on the TV can play active video. As users swipe up and down the screen, the lens pulls farther or closer, and the overall picture moves forward, along with animated effects.

The whole case is a picture of a frame switch, the visual effect of the lens pull away or closer to highlight the effect of a mirror

The screen of the tape, old TV, lanterns, neon lights and other elements are in a picture, to different positions that switch to different pictures to form an animated effect. The details are very good.

Summary : Above these one mirror in the end H5 case, everybody's eyeball whether be stimulated some. In fact, for those who do not have any production and design experience of enterprises and brand owners, want to make a mirror in the end of the H5 case is not difficult. Today's analysis is for everyone to talk about this, if you brand Baba also want to make this eye-catching visual effects , we have the type of custom Oh, All you need to do is say your requirements and ideas.