七彩云南•古滇名城：去云南，就现在

2018-01-25 H5案例分享 H5案例分享

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

识别图中二维码

去云南，就现在-查阅二维码

完整欣赏此案例大约需要1分钟

案例：去云南，就现在

出品：七彩云南•古滇名城

亮点：

策划上，长图类，① loading结束，出现一个在加班的男生开着电脑，正准备浏览“去云南，就现在”的画面；② 点击屏幕，画面幻化，男生从天而降落入滇池画舫，向左滑动，乘坐画舫去欣赏云南的特色景物，点击景物里呼吸效果的白色小图标，还可看到其文字介绍；③ 滑到长图尾部，点击“去云南，就现在”，填写信息，即可参与赢机票，去云南的活动。
设计上，颗粒插画风格，采用绿色和蓝色作为主色调，长图部分以乘坐画舫贯穿起来，连贯性较强，画面精致细腻，并配以简洁优美的文字说明，图文结合，有趣不枯燥。
技术上，长图滑动效果主要是采用移动前端滑动插件Jroll来实现的，视觉差效果主要是采用js控制图片的transform属性中translate3d的值来实现的。

技术实现： Zepto + JRoll

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

标签