网易新闻 X 荔枝FM：声夜食堂

2017-11-01 H5案例分享 H5案例分享

案例：声夜食堂

出品：网易新闻 X 荔枝FM

亮点：

策划上，图文展示类+音频展示类。这是由网易新闻和荔枝FM联手打造的一款宣传h5。① 首屏，带有小伤感的治愈性文字随着温柔的音乐有节奏的浮现出来，不经意间，网易新闻的logo和荔枝FM的标志也随着节奏缓缓现出身影，“进店看看”在“声夜食堂”四个大字下若隐若现。② 用户点击“进店看看”进入到“声夜食堂”的内部，不大不小的圆桌上，摆满了寿司，贪吃的熊、馋嘴的猫、有心事儿的人和谐的坐在圆桌前，有微笑，有沉思。一个跳动的小箭头在一个人的头上跳动着，头顶上的文字诉说着“他的故事”。③ 用户点击小箭头进入故事诉说阶段，荔枝FM的电台声音缓缓的倾诉着，听故事的人的内心也在如涟漪般波动着。④ 故事讲述完之后，有着三个选择按钮，用户可以进行选择自己所喜欢的一项去进行进一步的了解。
设计上，唯美风格。① 星空蓝与点点滴滴的小星星色、小碎花色搭配作为背景色的主色调，一片忧郁、凄美之感。② 橘黄色与浅红色对灯笼、衣服和食物的点缀，在蓝色的衬托下，显得和谐、安静。
技术上，在寿司盘的转动、小箭头的忽上忽下等一些小元素的动画特效上面，采用了CSS3中的Transform技术和TweenMax.js技术的相结合来进行实现。

技术实现： Zepto + TweenMax.js

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

识别图中二维码

声夜食堂-查阅二维码

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

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

标签