Recently, we collected the front side 50 of the more outstanding H5.
That my side of it, according to the classification technology to identify ten of representative cases for everyone to resolve what they implementations technology.
Designers can also be based on technology as a reference material you provide
Because I mainly introduce the technical classification, so just take the case of different technologies, with different design styles to achieve a technique I will not list out.
First little mention, which contains technology is divided into: createjs / thresjs / video playback inline /
First it first, before Tencent Tencent father produced the animation APP propaganda of a H5, H5 This is done by the team in Tencent TGideas
The following is the official description of TGideas
TGideas belongs to Tencent interactive entertainment business systems, is a focus on operations and marketing in the field of user experience design team, the scope of work involved in product packaging, advertising creative, brand building, interactive design, a team of professional planning, project management, creative , vision, development, multimedia talent constitution. "Work hard, play hard" is our creed than winning aircraft is issued, we are more willing to work through diversification, products and help users to establish an effective communication mechanism and emotional links, realize business value in the true sense.
OK, here it comes TGideas on the way to tell us about Tencent's another team referred ISUX, these two teams is H5 this area is relatively good Tencent two teams I've learned, the composition of their team also design + front end
Tencent social user experience design, referred to ISUX (Internet Social User Experience), established in January 11, 2011, is the core of Tencent Group, the world's largest UX design team, professional members include user research, interaction design, visual design, brand design, video animation design, UI development, product design and market research, has ISUX located in Shenzhen China headquarters in Beijing, Shanghai, Chengdu and Seoul, Korea.
ISUX responsible for user experience design and research Tencent social communications and entertainment products and services, including major service platforms such as QQ, QQ space, QQ members, QQ wallet, QQ sports, Tencent cloud, Tencent enterprises point, QQ things together, Tencent classroom interest tribe, live pattern, K song universal, universal actor, penguins FM, flash coffee, every P-picture, and a call like a micro cloud.
Both are relatively good at the output of H5 two teams have contacted
video + js case
OK, then sweep the two-dimensional code look at the first case.
From a technical use, this page uses javascript script control over the video.
The main problem to be solved is
Add video in the browser by default and then there is a full-screen control bar
There are micro-channel forced open Android browser full-screen problem
Solution In the IOS:
Micro browser channel may increase an inline attribute, so that the video-linked without play in full screen page.
But Andrews end if necessary to use this property, we need to use in the browser whitelist.
But micro-channel X5 browser does not provide official entry application whitelist.
So we can only put it another way to accomplish this
TBS later kernel (> = 036 849) version of the X5 browser,
Something called a support layer with the player, the end of the micro channel can Andrews in the case of full-screen video to add a layer of something on the video
<video preload="load" data-link="http://wag.i-h5.cn/dj/wyf/video/wb.mp4" playsinline x-webkit-airplay="true" webkit-playsinline
x5-video-player-type="h5" x5-video-player-fullscreen="true" id="video" width="100%" src="http://wag.i-h5.cn/dj/wyf/video/wyf.mp4"></video>
So based on the above plus full-screen video do something to do something?
Then sweep this case.
This is the case I am looking for an interactive and video combined, more this interaction, your different options are different for a video clip, no choice is also a video clip, by the same layer player just introduced + inline player mode can be achieved.
Specific analysis can refer to the following links:
HTTPS: //segmentfault.com/a/11 ...
Of course, not limited to this video after shooting a video clip, made by AE also can be combined with interactive video output of something, not repeat it here, for example. Then look at the use of a three.js webGL to do with the last day of carnival a cat H5 similar.
Little more about
WebGL（全写Web Graphics Library）是一种3D绘图标准
WebGL可以为HTML5 Canvas提供硬件3D加速渲染
threejs is encapsulated webGL third-party libraries can be used to develop a number of things related to 3D display
......
then the Apple phone can be found in everyone to use, point of view and can cut very fine view of the speed control can also control the forward and backward in the Apple phone.
In this case the use of a 3D IOS is a mirror in the end to achieve the effect of threeJs
Andrews is the end use of video.
After I make changes to the code line, the mandatory use of webGL this page in Android terminal to display found in broadcast directly after a crash micro-channel browser.
To investigate the cause of the problem it may be two
On the one hand is the
concurrent asynchronous requests a resource cause the browser to a deadlock
if a resource is requested when multiple asynchronous requests at the same time could cause the browser to a deadlock, deadlock is the result of a browser crash. The default browser is enabled cache, while the browser when reading data from the cache will be locked.
We need the same resources can not occur when the asynchronous request queue organization in different queues
On the other hand X5 browser for Android phones support itself is uncertain, at various different machine Android fps values are different, and some can not even play the machine, which can be considered X5 browser own pit.
Case threeJS's
look at a case
This is another threejs performance in terms of 3D H5
3d panorama, of course, to achieve this type of H5 more than threejs.
Panoramic there are two other such programs need to purchase software to do, not go into details here.
So I am here to provide a panoramic Three.js implemented using 3d tutorials
https://isux.tencent.com/3d.html
Another use of threeJs
Do 3d particle animation
This case with threejs achieve performance on Android optimized machine performance is also good
CreateJS Case
A little more about, createjs is a lightweight game engine that can be used to develop games.
It has the advantage
Adobe's animateCC direct visual editing animation, can be tied to the bones, the code can also be inserted directly within the software.
You may then be derived to provide js code based createjs
When H5 implementation, the programmer may need to consider the details of animation effects and animation. The desired movie to do by the designer, the programmer to join snippet needed to develop the export.
So that the development time, reduce communication costs.
Look at the following case
This case is the animation code generated by the animateCC. Mongolia layer on the canvas and then added by the programmer, the interactive effects of development. So because createjs is a game engine, so it can do games like this. The game is simple, but very fit to promote the theme of its hot pot restaurants. With createjs can also speed up the development speed.
As set forth above contains only H5 animations and transitions directly with animateCC make a good movie.
Edit the fla source file by the developer, adding snippets where necessary.
Play and pause can be achieved as well as frame skip control frame, then the software can be a key derived adaptive moving end width and height animation directly.
The following H5 is relatively new but not very common, dual interactive H5
Well then the last one that is a H5 + video panorama to do, but this panorama do not use threejs
But the use of another, called krano, this was mentioned before a commercial need to pay for software.
Analysis of these ten cases it would be finished, thank you.