阅读 303

利用前端三件套完成超好看的中秋主题的宣传页!!!

我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

中秋主题--Html5宣传动画网页(swiper)

1)此demo利用了swiper框架,animat动画库,还有设置js代码来做到自适应移动端,转换单位是rem,与px转换是/100

2)此素材在千图网使用会员下载原创psd,谢谢提供的h5设计稿的作者,利用此设计稿我做成这demo,仅供参考与学习,有做的不好纠正与体谅;

3)demo里面使用的动画animate,有些是利用了第三方动画库,不过大部分是自己自定义写的动画效果;不过一般设置动画都很大程度是根据设计稿的 主题来构思设置啥样的动画效果比较好。

效果图

image.png

部分说明:第一页,使用了传送带的循环动画效果;还使用了树叶被风吹后摇晃的动画效果

image.png

部分说明:第二页,利用了cut裁剪动画效果(有点类似文本打字出现的效果);不过cut的动画效果的瑕疵就是设置这种cut效果,安卓显示正常的效果, 苹果不兼容,效果是直接出现,而不是像打印一样处理;

image.png

部分说明:第三页,使用了字体垂掉,然后掉到一定位置的效果

image.png

部分说明:第四页,使用了h5移动端拖拽效果(仿手机开锁那种效果)

image.png

还有很多效果这里就不一一演示了......

代码

项目已经开源到GitHub:中秋主题--Html5宣传动画网页

文章分类
前端