QQ浏览器:阅过山川 益起读书

2020-12-02 H5案例分享 H5案例分享
QQ浏览器:阅过山川 益起读书


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

识别图中二维码

阅过山川 益起读书-查阅二维码

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


案例:阅过山川 益起读书

品牌:QQ浏览器

技术实现: Html5

亮点:

1.创意定位

QQ浏览器联合深圳出版集团以“阅过山川 益起读书”为主题,展示若干山里需要读书的人群,然后呼吁大家通过QQ浏览器搜“益起读书”活动,来参与阅读时长兑现公益捐书活动。

 

2.策划逻辑

① Loading部分:在加载进度百分比进展中,展示清楚主题:你的阅读,将兑换成一本本承载着梦想和智慧的书籍。阅过山川,给大山中的那个TA,最好的答案。

 

② 过程动画:伴随着文案出现,粒子聚合打散特效把一本书打散聚合成一个小飞机。点击“立即出发”按钮,整体屏幕随着飞机收纳进一个手机界面,然后,一束光带着用户“穿越”到了长图页。

 

③ 长图展示:竖向长图,中间有热点交互。从城市到山川,背景过渡自然,青山绿水,白云缭绕,让用户在向下滑动的过程中,赏心悦目。西藏、云南、广西、贵州部分实景拍摄,设置交互热点,点击后,弹出那些渴望阅读的人,既有小孩,也有老人。

 

④ 长图页底部,有“立即前往读书”按钮,点击后,进入捐书落地页。展示累计阅读时长、捐赠爱心图书本数、捐赠图书人数等,底部设有“我也要捐书”按钮,提供跳转进入活动页面。

 

3.视觉交互

 

开篇用粒子聚合的炫酷特效,把书打散重聚为一个小飞机,然后再融合到QQ浏览器APP屏幕中,然后再放大,进入到自然的大山大川中,视觉很是震撼和富有创意。交互上,主要以点击和滑动为主,弹出的海报,可以长按保存到相册。

 

4.用户体验

粒子聚合的效果和转场的动画,效果炫酷,但偶有卡顿。后面的长图页,宏大自然,空间跨越,衔接自然,每一屏都是一副优美的画。赶快去下载个QQ浏览器展开阅读,给山里的娃娃们捐上一本书,献出自己的一份力量。

 





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

标签

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

相关推荐:

QQ浏览器:一起助力巴西国家博物馆数字化重生

QQ浏览器:测一测你的审美基因

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~