QQ浏览器:阅过山川 益起读书
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分钟
案例:阅过山川 益起读书
品牌:QQ浏览器
技术实现: Html5
亮点:
1.创意定位
QQ浏览器联合深圳出版集团以“阅过山川 益起读书”为主题,展示若干山里需要读书的人群,然后呼吁大家通过QQ浏览器搜“益起读书”活动,来参与阅读时长兑现公益捐书活动。
2.策划逻辑
① Loading部分:在加载进度百分比进展中,展示清楚主题:你的阅读,将兑换成一本本承载着梦想和智慧的书籍。阅过山川,给大山中的那个TA,最好的答案。
② 过程动画:伴随着文案出现,粒子聚合打散特效把一本书打散聚合成一个小飞机。点击“立即出发”按钮,整体屏幕随着飞机收纳进一个手机界面,然后,一束光带着用户“穿越”到了长图页。
③ 长图展示:竖向长图,中间有热点交互。从城市到山川,背景过渡自然,青山绿水,白云缭绕,让用户在向下滑动的过程中,赏心悦目。西藏、云南、广西、贵州部分实景拍摄,设置交互热点,点击后,弹出那些渴望阅读的人,既有小孩,也有老人。
④ 长图页底部,有“立即前往读书”按钮,点击后,进入捐书落地页。展示累计阅读时长、捐赠爱心图书本数、捐赠图书人数等,底部设有“我也要捐书”按钮,提供跳转进入活动页面。
3.视觉交互
开篇用粒子聚合的炫酷特效,把书打散重聚为一个小飞机,然后再融合到QQ浏览器APP屏幕中,然后再放大,进入到自然的大山大川中,视觉很是震撼和富有创意。交互上,主要以点击和滑动为主,弹出的海报,可以长按保存到相册。
4.用户体验
粒子聚合的效果和转场的动画,效果炫酷,但偶有卡顿。后面的长图页,宏大自然,空间跨越,衔接自然,每一屏都是一副优美的画。赶快去下载个QQ浏览器展开阅读,给山里的娃娃们捐上一本书,献出自己的一份力量。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号