腾讯新闻：我的千里江山图

2020-10-02 H5案例分享 H5案例分享

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

识别图中二维码

我的千里江山图-查阅二维码

完整欣赏此案例大约需要30秒 - 3分钟

案例：我的千里江山图

品牌：腾讯新闻

技术实现： html2canvas + jQuery

亮点：

1、创意定位

腾讯新闻品牌宣传H5，在地图上标注你已经去过哪些地区，生成一幅大好河山图。

2、策划上

① 加载页在卷轴展开，展开后，出现大好河山图，上层遮罩着提示层，提示点选你去过的地区，点击左下角的省市，内容区域会显示该省市特色景点；

② 用户点击右下角“下一个地区”进行省市的切换，也可以滑动点击左下角的省市名；点击页面左上角“拍照留念”按钮，是对当前的省市进行拍照留念；一共340个景点在右下角有柱状图提示；当前省市标注完毕，点击右下角的“结束打卡”按钮，关闭当前省市界面；

③ 重新出现大好河山图，去过的地区被点亮，用户可以点击右下角的“生成卷轴”按钮，点击下方的“保存卷轴”，生成一幅你的专属江山图。

3、设计上

很像北宋王希孟创作绢本设色画《千里江山图》，细腻的工笔画。

4、体验上

在长长的画卷上，标注自己去过的地区和景点，很有成就感；没去过那么多景点也没有关系，了解祖国的大好河山有那么多可以游览的地方，以后慢慢去。

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

标签