css3一镜到底h5效果,H5一镜到底学习笔记(可视化编辑篇)
设置页面间距在h5中制作一镜到底时,需要设定一个独特的参数名为页面间距。页面间距指的是两个h5页面之间在z轴上所产生的距离,如下图所示:在制作一镜到底时,最重要的目的就是营造空间感,而一镜到底中的空间感,完全由页面间距进行控制。因此,正确的控制页面间距,是制作一镜到底做重要的一步。制作步骤:注释:layer:表示多个画面,也就是html页面。素材:用到的图片。帧画面触发设置案例分析:长页图:表达方
设置页面间距
在h5中制作一镜到底时,需要设定一个独特的参数名为页面间距。页面间距指的是两个h5页面之间在z轴上所产生的距离,如下图所示:
在制作一镜到底时,最重要的目的就是营造空间感,而一镜到底中的空间感,完全由页面间距进行控制。因此,正确的控制页面间距,是制作一镜到底做重要的一步。
制作步骤:
注释:
layer:表示多个画面,也就是html页面。
素材:用到的图片。
帧画面触发设置
案例分析:
长页图:表达方式就是简单的上下左右滑动,在整个过程中将其他元素融入滑动,能让作品更加立体,摆脱只有文字的枯燥。视差动画与一镜到底的结合,让故事的传达更加直接明了,无论是视觉效果还是趣味性,都非常出彩,故事内容丰满,逻辑清晰,可读性强。
如案例1:逃不掉的四字魔咒
场景是由canvas绘制整个场景的,动画元素是由换图的方式形成动态效果。再根据滑动距离的坐标绘制出不同的图画。滑动时的缓冲效果,让案例很有线条感,给了用户很好的交互体验。动画使用js做了硬件加速,随着“主角”头发慢慢变白、脱下,步入老年,画面也到达结尾页。
案例2:节气奇妙物语
这款由“in”推出的H5案例,手绘的画面,与清新的画风。长按屏幕,体验到一镜到底+镜头平移的视觉形式,划着小船从春风走到立秋,感受四季美如画的风景。将四季的变化都呈现在这里。进入首屏,提示左滑开始启程。长按交互和动画(按钮是根据触摸事件,按下按钮就会移动长图达到滑动效果),透过一团云雾到达一片山水,用户长按按钮就可以让船夫和小船在山水间穿行。画面中的部分元素都是CSS3动画位移形成动态效果,在视觉上表现很有活力。同时屏幕上显示出现节气名及物语。结尾显示“节气物语,未完待续...”,点击“持续故事”来到活动页,原来是节气插画征集活动,画出你的喜欢的节气插画,为四季增添一丝美。
场景穿梭-(画中画形式感)
案例1:致七夕
从视频镜头一个放映机开始展现一镜到底内容,将5部经典电影中的经典场景桥段展示。
案例2:一口气看尽职场套路
采用画中画的展现职场中的老套路,串联起职场上的种种套路。中间夹杂着搞笑和幽默的风格。这款案例也可以说是长屏切换的h5,动态效果是不断换图制作,再以CSS3代码缩放形成,每段场景中的文字也是由CSS3代码控制移动,最后背景则是PNG图片。
多元化交互长镜头
案例:为#潮起潮不落#而来,别说你不期待
随着一盘磁带的转动,来到首屏,画面上是一个老电视机,点击电视可以播放活动视频。随着用户上下滑动屏幕,镜头会拉远或拉近,整体画面会向前移动,并伴随动画效果。整个案例是以一张张的帧图切换而形成,视觉效果上的镜头拉远或拉近凸显出一镜到底的效果。画面中的磁带、老电视机、灯笼、霓虹灯等元素均是在一张图上,到不同位置即切换到不同的图片形成动画效果。各处的细节表现还是很不错。
更多推荐
所有评论(0)