案例分析链接：http://www.moreofless.com.cn/#/
完整欣赏此案例大约需要2分25秒
1. 策划上，宣传类H5，进入后一小段的动画，没有豪宅，没有高级写字楼，没有米其林餐厅，有的是翻新的两栋传统瓦房，住进原味乡村，了解一下当地的一些文化，一共五个地点，瓦房、火塘、水酒、罗汉果、农活，每个点进去都有它们的故事。
火塘，屋里燃气火塘，家里有了暖意，围着炉火吃饭，煮罗汉果茶，不只是对传统的记忆更是不会冷却的家的温度；
农活，不是每个人，都有资格干农活，时间磨砺的肩膀，能砍去高大的杉木，是门终身事业，值得用一生的骄傲去经营；
瓦房，木头是瓦房的灵魂，一块块纯木构造，27间瓦房，一位101岁木匠的终生成就奖；
水酒，家家户户都会酿，朴实的本地糯米，龙脊山泉，黄泥封盖一个月，与初来乍到的旅人的距离感，都在酒酣耳热中化为乌有；
罗汉果，从细细的藤蔓，到果长出来，到果柄变黄，烘烤果实，是果生的巅峰时刻，它会出现在闲聊的桌边，传递在殷勤待客的手中，跑出了每个人的现世安稳，岁月静好。
2. 设计上，彩墨画，以黄色为背景色，体现创造一个为旅行者带来归属感的世界，与当地的文化产生联系，从而获得独一无二的旅行体验，整体浏览中以彩墨画呈现，每个地点的过程中，最后一帧由看似不真实的画面，变成真实画面。
3. 技术上，采用threejs完成视觉的立体层次感，动画配合TimelineLite动画框架。用代码实现3D效果，推荐本案例的技术方案，采用threejs实现。曾经我们发布的threejs实现的国外案例效果《Oat the Goat》。
threejs的官网：https://threejs.org/。查看更多惊叹的效果。
4. 体验上，部分安卓手机滑动时，有卡顿现象。
技术实现： 原生js
以上为“H5案例分享”团队原创文章，转载请注明出处！
网友评论