![075c4b9756c507b052cb73ee141ae3ac.png](https://i-blog.csdnimg.cn/blog_migrate/f3dcc411a8232773cfaf3115d3c090f8.png)
2020年8月26日是深圳特区成立四十年纪念日。为致敬深圳,诸多优秀的H5作品不断涌现,《深圳40年,一镜到底》就是其中之一。
深圳40年,一镜到底
![78ef71d72f3222a2ed753317892dba99.png](https://i-blog.csdnimg.cn/blog_migrate/52fe1a544f3e87358107e6e1c3b24e59.jpeg)
![503f558472ef2727136c171617327b03.png](https://i-blog.csdnimg.cn/blog_migrate/a64eb7f8f2fe8b7eb25dc153244fdbeb.png)
出品方:龙岗融媒
实现方式:意派Epub360在线H5制作工具
创意特色:一镜到底
内容特色:该H5旨在宣传深圳特区建立40周年。作品主要以一镜到底的方式向用户呈现了深圳在1978-2020年间的飞速发展,整体简洁利落,极具穿越感。在交互操作方面,用户只需根据提示上下滑动屏幕,即可控制画面的播放,而手指滑动的快慢还可影响播放速度。在内容结构及画面呈现方面,作品主要运用【年份+事件+情景对话】的方式突出深圳特区在建立前后的变化以及各个阶段所取得的成就。
《深圳40年,一镜到底》H5主要通过意派Epub360的【一镜到底】组件来实现,用户可控制前后元素的间距及元素出现的时长效果。具体制作教程在庆深圳特区成立40年H5案例合集之后,想学习的请往下滑~
![ca36533e991ea08a17839279174f9220.png](https://i-blog.csdnimg.cn/blog_migrate/26439395b6d3a31baf22aa2a79df104f.jpeg)
由意派Epub360制作出的一镜到底H5案例还有很多,例如:《转融新时代,南方新作为!》、《百年征程,为女神而战》、《清远30年的时光之旅》、《2017中国蒙牛可持续发展报告》、《一镜到底之物种起源》等。而关于深圳发展的H5案例也有很多,其中,《来了就是深圳人》就很有代表性,该H5还曾获得过第十一届设计之都(中国·深圳)公益广告大赛新媒体类优秀作品奖哦~
![5de27f484c4eb791b69ac6b65808c21e.gif](https://i-blog.csdnimg.cn/blog_migrate/fec9a5da9e07d926b2f1fe5971e7bed4.gif)
除了《深圳40年,一镜到底》以外,还有哪些致敬深圳的优秀H5案例呢?一起来看看吧!
庆深圳特区成立40年H5案例
来了就是深圳人
![088b02b1d1c91142f82da5cd730d263c.png](https://i-blog.csdnimg.cn/blog_migrate/96fdea091a6c27336e6fb01da60a307b.jpeg)
出品方:腾讯云、深圳商报、腾讯优图
创意特色:视频、人脸融合、合成海报
内容特色:用户可先浏览一段关于深圳的短视频,再进行人脸融合的相关设置,包括选择来深时间、上传头像、选择性别、输入姓名及换装。全部操作完毕后,用户可点击“确定”按钮,以获得一份专属的深份证海报。
深铁置业丨致敬特区40周年
![63dc7336ea3de9573e906b59258b056d.png](https://i-blog.csdnimg.cn/blog_migrate/4faa0332e5bc4ccc90798bef435b61ee.jpeg)
出品方:深铁置业
创意特色:横屏、长页面、手绘插画、动画
内容特色:作品主要以横屏长页面的方式介绍深圳特区自建立以来的巨大变化,以及深铁置业的成立与发展。用户可通过长按页面右下角按钮的方式浏览作品,并根据提示松开手指,以获得相应的明信片。作品最后,用户还可通过“获取明信片”按钮查看并保存各种明信片。
点击丨穿越深圳特区辉煌40年!
![e0780f904291b82b2a915d56514f7af1.png](https://i-blog.csdnimg.cn/blog_migrate/225a1d4b84aa4e0d665066a03ca8e8bf.jpeg)
出品方:新华社、快手
创意特色:视频、手绘插画
内容特色:用户进入首页后,可通过“点击进入”按钮浏览一段动画短视频,视频主要以一镜到底的方式呈现了深圳40年岁月变迁,其中包括了深南大道全线贯通、深圳证券交易所正式开业、深圳地王大厦建成等大事件。在观看过程中,用户可通过页面右下角的提示按钮选择暂停或直接跳过。视频结束后,用户还可在80年代、90年代、21世纪这三种代表性插画人物中任选一种形象,以获得一份打卡留念海报。
「深」圳事「业」,一路向前
![795f7f09e7d15459fe8b5d8d0f9f240a.png](https://i-blog.csdnimg.cn/blog_migrate/e0591baf95ef63539656026342c6ec5a.jpeg)
出品方:深业集团
创意特色:横屏、长页面、手绘插画、动画
内容特色:该H5以“深业和深圳一起‘创业起航’”为主题,通过横屏长页面的方式介绍深业集团在深圳特区建立后的发展历程,包括深业的成立、转型升级、上市等。用户可通过长按按钮的方式触发画面中的插画人物奔跑,以营造一种贯穿历史的穿越感。作品最后,用户还可根据提示按钮为深业人点赞。
你是哪种特区青年?
![dfd07e95a9e8566890102c45d162e06d.png](https://i-blog.csdnimg.cn/blog_migrate/e89183fefb85b66fa06aaa24c31beada.jpeg)
出品方:新华社、独特
创意特色:人脸融合、合成海报
内容特色:该H5主要以人脸融合的方式让用户体验回到当年的深圳的感觉。用户可先选择心仪的模板(志愿者、创业者、售货员等),再通过上传单人正面照,从而获得一份人脸融合海报。
如何用意派Epub360制作一镜到底H5?
【一镜到底】组件使用注意事项
1、常规的一镜到底画面包含多个PNG图片,在上传图片前需确保图片是PNG格式的,以及边缘没有被裁切的痕迹;
2、文字可以直接在Layer页面使用段落组件编辑;
3、建议画面层控制在50个以内,如果素材相对较小,可以控制在60个左右;
4、考虑到手机性能,每张一镜到底画面的大小控制在70KB以内;
5、素材较大的情况下,每个画面层之间的间距设置为500PX及以上,小一些的画面素材暂时不做强制,但是需要于发布前在性能相对一般的手机上进行测试,以保证流畅。
6、由于素材偏多,我们在使用一镜到底组件时一定要设置页面预加载。具体操作如下:
![b1d15f23e4ca65a83bdf1ceaa9ea5ea3.png](https://i-blog.csdnimg.cn/blog_migrate/a25092278e81aeb30f3c0b8fd2f7c17b.jpeg)
【一镜到底】组件的基本用法
1.先编辑一镜到底组件内的内容,再添加一镜到底组件,然后切换到layer页面编辑一镜到底的内容,每个Layer页面可放置一个或多个要展示的元素。
![243b24a26e41a694d0baa6aab94a80c7.png](https://i-blog.csdnimg.cn/blog_migrate/c0752304e8cb178d2c4518be0caa4705.jpeg)
2.切换回到页面,点击高级组件中的一镜到底组件并添加多个Layer容器。
![0b86bab539e32617446f48d0cba61847.png](https://i-blog.csdnimg.cn/blog_migrate/b0dd0a9adfdd6746b002fb4d35ce8b7b.png)
3.一个layer中的元素表示一镜到底中的一层画面
![19ce5929bf22a1c1db4b96959f9ecf84.png](https://i-blog.csdnimg.cn/blog_migrate/f23ab647731e301f0ca22aad4f4b4f3f.jpeg)
4.设置间距:自定义间距大小,从而调整每个元素的出现时间。你也可以选择去掉勾选“初始视距修正”选项,以此来调整第一层元素与屏幕基准点的距离。
![7876581c419b6227708879696573d454.png](https://i-blog.csdnimg.cn/blog_migrate/ec7260c6dff610ff73b77b76983af53a.png)
5.修改/替换素材:不需要切换到layer中,只需选中一镜到底组件,并在右侧找到要替换的素材layer,然后双击预览图,即可切换到layer页面修改。
![08cf3cff6e32b308cd376288c3eb8fa4.png](https://i-blog.csdnimg.cn/blog_migrate/2a5effc6f400be34df9866943afcef20.png)
6.设置播放方式
(1)手动播放:勾选“可拖动”即可。
![cea408f95ecb29146ecbc2524b3b042f.png](https://i-blog.csdnimg.cn/blog_migrate/7667665aad6759450703ae8634ef4103.png)
(2)自动播放:勾选“自动播放”,并自定义“播放速度”。速度的值越大,播放的画面飞出越快。
![daea6269c3359194f2dcd3532fc71328.png](https://i-blog.csdnimg.cn/blog_migrate/f1c8c9ca64b8d8d00907e0c14ee27cfe.png)
(3)手动播放+自动播放:若同时设置好自动播放及手动播放,那么,用户则可在一镜到底自动播放时手动控制。
![12ebf121fa1ed9b9ed2c0a415c4e2934.png](https://i-blog.csdnimg.cn/blog_migrate/6b9ed2c471704034b6beed022e4596ff.png)
通过意派Epub360制作一镜到底H5的方法就是这样了,感兴趣的话就快参照教程学起来吧!