爱彼迎:爱彼迎

2018-12-12 H5案例分享 H5案例分享
爱彼迎:爱彼迎


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

识别图中二维码

爱彼迎-查阅二维码

完整欣赏此案例大约需要2分25秒


案例:爱彼迎

出品:爱彼迎

亮点:

1. 策划上,宣传类H5,进入后一小段的动画,没有豪宅,没有高级写字楼,没有米其林餐厅,有的是翻新的两栋传统瓦房,住进原味乡村,了解一下当地的一些文化,一共五个地点,瓦房、火塘、水酒、罗汉果、农活,每个点进去都有它们的故事。

 

火塘,屋里燃气火塘,家里有了暖意,围着炉火吃饭,煮罗汉果茶,不只是对传统的记忆更是不会冷却的家的温度;

 

农活,不是每个人,都有资格干农活,时间磨砺的肩膀,能砍去高大的杉木,是门终身事业,值得用一生的骄傲去经营;

 

瓦房,木头是瓦房的灵魂,一块块纯木构造,27间瓦房,一位101岁木匠的终生成就奖;

 

水酒,家家户户都会酿,朴实的本地糯米,龙脊山泉,黄泥封盖一个月,与初来乍到的旅人的距离感,都在酒酣耳热中化为乌有;

 

罗汉果,从细细的藤蔓,到果长出来,到果柄变黄,烘烤果实,是果生的巅峰时刻,它会出现在闲聊的桌边,传递在殷勤待客的手中,跑出了每个人的现世安稳,岁月静好。

 

2. 设计上,彩墨画,以黄色为背景色,体现创造一个为旅行者带来归属感的世界,与当地的文化产生联系,从而获得独一无二的旅行体验,整体浏览中以彩墨画呈现,每个地点的过程中,最后一帧由看似不真实的画面,变成真实画面。

 

3. 技术上,采用threejs完成视觉的立体层次感,动画配合TimelineLite动画框架。用代码实现3D效果,推荐本案例的技术方案,采用threejs实现。曾经我们发布的threejs实现的国外案例效果《Oat the Goat》。

threejs的官网:https://threejs.org/。查看更多惊叹的效果。

 

4. 体验上,部分安卓手机滑动时,有卡顿现象。



技术实现: 原生js



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

标签

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

相关推荐:

airbnb:奇葩旅行图鉴

ofo:一骑脑洞,奇妙旅行

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~