Duang,Duang,H5 +酷炫效果+干货,此时不收更待何时
现在市面上有一大批H5页面模板制作工具,诚然,他们方便了很多非专业设计师设计制作H5页面。但是,很多模板工具上的作品大部分还停留在左飞入右飞出的初级境界,看多了真心有些腻,动效如无美感还不如看静态的。
那H5里有哪些高级动效了?小思仔细体验了国内所有优秀H5页面作品,整理出下面几个H5页面特效。我们的H5作品如果能用上其中一两个,相信能增色不少!
1、粒子特效
—》》一键爆炸
模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。作者没有使用canvas ,所以无法取到图片上每个像素的颜色值。便使用了一些比较讨(sha)巧(bi)的方法。构造新图容器,隐藏原图—> 生成一张张是碎裂小图—> boom 爆炸!
2.SVG路径动画
—》》水滴效果
普通的dom元素,制作圆滑曲线基本是不可能的,根据以往的积累,我们是可以通过svg中的来描绘贝塞尔曲线,达到实现圆滑曲线的效果。所以,采用svg来制作整个类水滴的索引组件是很好的解决办法。
3、序列帧动画
—》》大众点评:我们之间只有一个字
作品解析:
逐帧动画类似与电影的播放模式,很适合于表演细腻的动画。例如:头发及衣服的飘动、走路等等。序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。
4.Cinemagraphic
—》》Levi's: “换”醒你的夏天
Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。该应用恰到好处地了诠释了“自然风”的概念,作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。
5.全景
—》》杜蕾斯的第一座美术馆
杜蕾斯“美术馆”的创新,在于它其实是热门广告形式H5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统H5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”
6.3D
—》》康师傅:2015最飞羊的新春祝愿
夜空繁星中题字灯笼飞来飞去的3D炫目效果,祝福灯笼还可以360旋转呈现,“最飞羊的新春祝愿”的主题表现的淋漓精致。
7.点击碎屏
—》》大众点评:这个陌生来电你敢接吗?
“击屏幕”画面好像很讨人喜欢,大概有三轮左右的“击碎”动作,这是整个H5的互动高峰。另外手机来电也应用到了很多H5的功能上。
8.长按逐字
—》》一加手机:1步1步看清韩寒
这个页面用打字机的形式呈现,触发逐字等动效很真实,用户按下按钮后,纸片会逐渐显示出韩寒从1999年起的成长轨迹。
现在市面上有一大批H5页面模板制作工具,诚然,他们方便了很多非专业设计师设计制作H5页面。但是,很多模板工具上的作品大部分还停留在左飞入右飞出的初级境界,看多了真心有些腻,动效如无美感还不如看静态的。
那H5里有哪些高级动效了?小思仔细体验了国内所有优秀H5页面作品,整理出下面几个H5页面特效。我们的H5作品如果能用上其中一两个,相信能增色不少!
1、粒子特效
—》》一键爆炸
模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。作者没有使用canvas ,所以无法取到图片上每个像素的颜色值。便使用了一些比较讨(sha)巧(bi)的方法。构造新图容器,隐藏原图—> 生成一张张是碎裂小图—> boom 爆炸!
2.SVG路径动画
—》》水滴效果
普通的dom元素,制作圆滑曲线基本是不可能的,根据以往的积累,我们是可以通过svg中的来描绘贝塞尔曲线,达到实现圆滑曲线的效果。所以,采用svg来制作整个类水滴的索引组件是很好的解决办法。
3、序列帧动画
—》》大众点评:我们之间只有一个字
作品解析:
逐帧动画类似与电影的播放模式,很适合于表演细腻的动画。例如:头发及衣服的飘动、走路等等。序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。
4.Cinemagraphic
—》》Levi's: “换”醒你的夏天
Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。该应用恰到好处地了诠释了“自然风”的概念,作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。
5.全景
—》》杜蕾斯的第一座美术馆
杜蕾斯“美术馆”的创新,在于它其实是热门广告形式H5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统H5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”
6.3D
—》》康师傅:2015最飞羊的新春祝愿
夜空繁星中题字灯笼飞来飞去的3D炫目效果,祝福灯笼还可以360旋转呈现,“最飞羊的新春祝愿”的主题表现的淋漓精致。
7.点击碎屏
—》》大众点评:这个陌生来电你敢接吗?
“击屏幕”画面好像很讨人喜欢,大概有三轮左右的“击碎”动作,这是整个H5的互动高峰。另外手机来电也应用到了很多H5的功能上。
8.长按逐字
—》》一加手机:1步1步看清韩寒
这个页面用打字机的形式呈现,触发逐字等动效很真实,用户按下按钮后,纸片会逐渐显示出韩寒从1999年起的成长轨迹。
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Duang,Duang,H5 +酷炫效果+干货,此时不收更待何时
本文地址: https://pptw.com/jishu/587063.html