案例:网易云音乐 年度听歌报告
品牌:网易云音乐
技术实现: html5
亮点:
网易云音乐的年度总结作品,用户可以登陆后查看自己的年度数据总结及分析,还可以参加有机会获得“黑胶VIP”的游戏挑战。
一个白色的的盒子中装满了带着网易云标志的唱片,用户可直接点击图片查看作品分享人的分析报告,也可以点击触点查看自己的,报告包括用户初次登陆的时间,年度听歌时长和数量,最爱的听歌时间,歌曲风格占比图,循环最多和听到最晚的一首歌,最爱的歌手,和听歌前十榜单,最小众珍藏,最爱电台,和乐评互动,每一页都可点击保存和截屏分享,最后是新年寄语和抢”黑胶VIP”的游戏链接。
分析详细,色调柔和,一页一个数据,搭配文艺风感觉的插图,整个作品都在轻松舒缓的氛围中呈现。
对于活跃用户,可用数据较多,分析报告会详细一些,不那么活跃的用户,分析会相对短一些。
每一部分通过JS动态添加类名,动态添加的类名中含有使用CSS3的transform定义的动画;大背景的摩登魔幻效果使用的是ThreeJS的着色器GLSL。