在审美上大家应都有喜新厌旧的心理,那么在H5的创意执行层面,如果用一些“小心机”,比如遮罩、全屏视频、SVG动画、Cinemagraphic(会动的照片)这些新的,或者稍微高端点的表现形式,能分分钟提升作品逼格哦!
下面,小派就带大家扒一扒H5里的“小心机”——全屏视频!
1/5 GENTLE MONSTER
设计机构:只做设计
微信扫描二维码,立即感受
据“只做设计”的唐仲龙说:“这个项目是与韩国客户对接的,开始时候,客户只需要多个页面进行切换,难道是因为H5在韩国还不够火爆?本着复杂的设计简单做,简单的需求复杂做的原则,我们又开始挑战Epub360了。利用序列帧实现全屏连续播放,使整个画面瞬间活起来了。”
亮点技能:序列帧、预加载
2/5 全景视频Demo
设计师:害羞男孩
微信扫描二维码,立即感受
(安卓机可能无法体验)
这应该是Epub360平台上首个公开的全景视频作品,运用嵌入网页的方式将全景视频插入H5中,通过手指的滑动即可360度观看场景,很赞的说。不知派友们是否玩过前段时间很火的H5-《小爷吴亦凡,凡心所向》?其也运用了全景视频。
全景视频的拍摄制作成本较高,不过如果创意需要,预算不缺,也不妨试试。
亮点技能:嵌入网页
3/5 年味儿
设计师:Mr.u
微信扫描二维码,立即感受
打开作品,一盘饺子映入眼帘。再次操作时,却发现饺子冒热气了,饺子像是从屏幕里端出来似的,定睛细看,原来此处用了全屏视频。
除了开场前的全景视频,后面的图片与视频也组合的很好,墙裂建议大家前往“品味”!
亮点技能:视频组件,预加载
4/5 听,西安
设计师:Mr.u
微信扫描二维码,立即感受
我来到 你的城市 走过你来时的路 想像着没我的日子你是怎样的孤独 ……长按聆听并伴随着画面的逐渐清晰,你是否想起了曾经的那个他/她呢?
作品使用了Epub360在触发器里新增的“长按触发”功能,操作便捷,相信大家能分分钟上手!Mr.u的个人作品基本上全部能免费复制,体验完作品,赶快前往Epub360官网桌面端去复制学习吧!
亮点技能:长按播放
教程:案例解析-听,西安
5/5 雍福苑一个萌妹子的来电!
设计师:533陛下
微信扫描二维码,立即感受
该作品采用萌妹子打错视频电话这么一个梗,然后通过与用户的互动引发一系列的剧情。用幻灯片来模拟全屏视频通话、电梯邂逅等生活场景,很有真实感的说,小派已成功约到萌妹子,该你们啦!
扒完上面H5里的“小心机”——全屏视频后,有没有觉得“她”的厉害呢?期待大家的“心机作”。在今后合适的时机,小派也会扒一扒H5里其它“小心机”,敬请期待~
关注更多H5设计、案例、资讯