H5一镜到底学习笔记（可视化编辑篇）

设置页面间距

在h5中制做一镜到底时，须要设定一个独特的参数名为页面间距。页面间距指的是两个h5页面之间在z轴上所产生的距离，以下图所示：

在制做一镜到底时，最重要的目的就是营造空间感，而一镜到底中的空间感，彻底由页面间距进行控制。所以，正确的控制页面间距，是制做一镜到底作重要的一步。

制做步骤：

注释：

layer:表示多个画面，也就是html页面。

素材：用到的图片。

帧画面触发设置

案例分析：

长页图：表达方式就是简单的上下左右滑动，在整个过程当中将其余元素融入滑动，能让做品更加立体，摆脱只有文字的枯燥。视差动画与一镜到底的结合，让故事的传达更加直接明了，不管是视觉效果仍是趣味性，都很是出彩，故事内容丰满，逻辑清晰，可读性强。

如案例1：逃不掉的四字魔咒

场景是由canvas绘制整个场景的，动画元素是由换图的方式造成动态效果。再根据滑动距离的坐标绘制出不一样的图画。滑动时的缓冲效果，让案例颇有线条感，给了用户很好的交互体验。动画使用js作了硬件加速，随着“主角”头发慢慢变白、脱下，步入老年，画面也到达结尾页。

案例2：节气奇妙物语

这款由“in”推出的H5案例，手绘的画面，与清新的画风。长按屏幕，体验到一镜到底+镜头平移的视觉形式，划着小船从春风走到立秋，感觉四季美如画的风景。将四季的变化都呈如今这里。进入首屏，提示左滑开始启程。长按交互和动画（按钮是根据触摸事件，按下按钮就会移动长图达到滑动效果），透过一团云雾到达一片山水，用户长按按钮就可让船夫和小船在山水间穿行。画面中的部分元素都是CSS3动画位移造成动态效果，在视觉上表现颇有活力。同时屏幕上显示出现节气名及物语。结尾显示“节气物语，未完待续...”，点击“持续故事”来到活动页，原来是节气插画征集活动，画出你的喜欢的节气插画，为四季增添一丝美。

场景穿梭-（画中画形式感）

案例1：致七夕

从视频镜头一个放映机开始展示一镜到底内容，将5部经典电影中的经典场景桥段展现。

案例2：一口气看尽职场套路

采用画中画的展示职场中的老套路，串联起职场上的种种套路。中间夹杂着搞笑和幽默的风格。这款案例也能够说是长屏切换的h5，动态效果是不断换图制做，再以CSS3代码缩放造成，每段场景中的文字也是由CSS3代码控制移动，最后背景则是PNG图片。

多元化交互长镜头

案例：为#潮起潮不落#而来，别说你不期待

随着一盘磁带的转动，来到首屏，画面上是一个老电视机，点击电视能够播放活动视频。随着用户上下滑动屏幕，镜头会拉远或拉近，总体画面会向前移动，并伴随动画效果。整个案例是以一张张的帧图切换而造成，视觉效果上的镜头拉远或拉近凸显出一镜到底的效果。画面中的磁带、老电视机、灯笼、霓虹灯等元素均是在一张图上，到不一样位置即切换到不一样的图片造成动画效果。各处的细节表现仍是很不错。