I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

Mid-Autumn Festival Theme –Html5 Promotion Animation Webpage (Swiper)

1) This demo uses swiper framework, animat animation library, and set JS code to achieve adaptive mobile end, conversion unit is REM, and px conversion is /100

2) This material is used on the website to download the original PSD. Thank you for providing the author of the H5 design draft. Using this design draft, I made this demo for reference and study only.

Some of the animate effects used in the demo are based on third-party animation libraries, but most of them are self-defined. However, the general setting of animation is largely based on the theme of the design draft to conceive what kind of animation effect is better.

rendering

Part description: The first page, the use of the conveyor belt cycle animation effect; It also uses an animation of leaves swaying when blown by the wind

Part description: The second page, the use of cut cutting animation effect (a bit similar to the effect of text typing); However, the flaw of cut animation is that it is set to cut effect, Android display normal effect, Apple is not compatible, the effect is directly appear, not like printing;

Part description: the third page, the use of the font down, and then fall to a certain position effect

Part Description: Page 4, using the H5 mobile terminal drag effect (imitation mobile phone unlock that kind of effect)

There are many effects here are not demonstrated……

code

The project has been open source to GitHub: Mid-Autumn Festival theme -Html5 promotional animated web page