网易新闻:我在童话里遇到你的时光

2018-02-02 H5案例分享 H5案例分享
网易新闻:我在童话里遇到你的时光


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

我在童话里遇到你的时光-查阅二维码

完整欣赏此案例大约需要3分50秒


案例:我在童话里遇到你的时光

出品:网易新闻

亮点:

  1. 策划上,长图类 。这是网易态度日历系列第二部,态度日历是历史上的今天为主题的一款日历。H5以一镜到底滑屏形式将历史上的人和事串联起来,配以真挚的语言让用户身临其境,让古人穿越时空来见你。从“你说,跳进兔子洞里会邂逅一段奇妙之旅吗?”开始,滑动屏幕呈现入洞的特效,逐渐引出《爱丽丝梦游仙境》、《月亮旅行记》等一个个科幻童话中的场景。“你会看到,远洋的千帆百桨,承载着梦想”,随着情节的发展,画面开始展现郑和下西洋、导演黑泽明、《蓝精灵》……将历史上的与童话相关的人和事串联起来,涉及科学、地理、太空等多方面,配以真挚的言语打动用户。长图结束,引导用户生成一个个人的态度日历,可上传图片,最终形成海报的形式。页面下方有两个按钮,引导用户关注态度日历公众号,或者再看一遍。
  1. 设计上, 黑白两色线条,配合金棕色辅助,将内容表现的分外清晰,重点的地方有突出强调;语言真挚,表达明确,给人印象深刻。不过分表现画面,一点点唤起人的回忆。
  2. 交互上,横屏观看,慢慢向左滑动手机屏幕,随着滑动,展示叙事的推进,背景独白也随之变化。
  3. 体验上,小五体验过很多的长图类H5,但是很少看到做的如此细致的,细节处理的很好,各个事件之间看似无关联,实质上却都描绘了童话的世界。语言没有太多,却句句打动人心,一款走心的H5。



技术实现: canvas + pixi.js + TweenMax.js + Scroller.js



以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

网易:态度日历 让每一天更有趣

网易:丁三石挑战经典歌剧

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~