High-HTML5 effects list Top 10

Now on the market there are a large number of HTML5 page template making tools, although the convenience of many non-professional designers make HTML5 page. But have to spit is, many template tools on the platform most of the work is still in the left fly into the right to fly out of the primary realm, want to feel really exquisite advanced effects, these 10 professionals have to see the works.

This paper comes from the network of excellent cooperative media.

　1. Particle effects

Star legend: This is a ticket to explore the universe

Baidu Encyclopedia: In order to simulate the reality of water, fire, fog, gas and other effects by a variety of three-dimensional software development of the Production module, the principle is to have a myriad of single particles to show the fixed shape, by the controller, the foot to control its whole or a single movement, simulate the real effect.

2. svg path animation

Wang: SVG practice no.1_ describe loneliness

In short, let SVG's strokes be like someone drawing the same animation effect. Animation lightweight and not distorted, especially for those advocating minimalist design style of the Web page.

　　3. Sequence Frame animation

Public comment: There is only one word between us

Baidu Encyclopedia: Sequence frame animation is only in the timeline of each frame on each frame to draw different content, so that its continuous playback into animation. Because frame-by-frame animation is not the same content, not only adds to the burden of the production and the final output of the volume is also very large, but its advantages are also obvious: frame-by-animation with a very large flexibility, can almost express any want to show the content, and it is similar to the movie playback mode, is suitable for the performance of delicate animation. For example: The sharp turn of a character or animal, the fluttering of hair and clothing, walking, talking, and the exquisite 3D effect, and so on.

　4. Full line of animation

Tencent up convention: Under life, imagine above

Full-line animation can be understood as continuous animation, almost uninterrupted playback, like video as smooth and delicate.

This HTML5 page broke the traditional slide-style presentation, creating a broad, elegant, quiet overall feeling, the work is also praised by many people as HTML5 cartoon.

　5. Cinemagraphic

Levi ' s: "Change" to wake up your summer

What is Cinemegraphic? If you don't know, it's a little out. As the name suggests, cinema is film photography, graph is a picture, cinemagraphic is a new technology that gives static photos of magical local motions.

One of Cinemagraphic's application just right to the interpretation of the "natural wind" concept, see the screen, the character's hair and clothes flying, as if blowing a burst of natural wind, in the hot summer, they still feel fresh, enjoy playing. As people who interact, when they see the cinemagraphic dynamic scene on the screen, they also feel the refreshing feeling that the natural wind can bring.

Here's a say and interactive animation effect.

6. Panorama

Durex's first Museum of Art

The concept of Virtual Panorama Art Museum is not new. The originator should be Google's art Project, which allows you to browse most museums and galleries around the world online. Durex "Art Museum" innovation, is that it is in fact a popular form of advertising HTML5 page camouflage. "We want to create a virtual real space through multiple means (such as the eggs in the museum, inaccessible at 12 points, etc.), rather than the logic of the traditional HTML5 of the single path education," he said. "The liquid group show will be the first of countless exhibitions at the Durex Gallery," said Socialab Durex, head of the group. ”

　　7.3D

Master kang: 2015 most flying sheep of the spring wishes

The Blessing Lantern can rotate 360 to present, and has the 3D dazzling effect which the inscription lantern flies in the night sky Stars, manifests "the most flying sheep's spring Wish". Where the charm and subtlety, fear is not the words can express.

8. Click on the Broken screen

Public comments: This strange call you dare to answer it?

"Click on the Screen" is not new, but this screen-crushing image seems to be particularly pleasing, there are about a few rounds of "smash" action, this is the whole HTML5 interaction peak. found that the "screen tapping" of the regular action is particularly inertia, point can not stop. is not caught in the mobile phone family some "obsessive-compulsive disorder" characteristics.

　　9. Long Press Verbatim

Han again to talk about a plus: 1 steps 1 steps See Han Han

The entire HTML5 page is presented as a typewriter, and as the user presses the button, the piece of paper will gradually show the growth trajectory Han has known or unknown since 1999. Triggering a literal, and so on, is a real feeling.

　　10. Slide Trigger

Tencent Video: This scene you have been waiting for a long time

Long page HTML5, sliding touch initiation effect, and the stiff slide style of the HTML5 page opened the distance. Although the Epub360 can implement the long page with the trigger effect, it is not possible to implement the sliding trigger animation for the moment.