ROBAM老板 X 网易云音乐：嘻哈为你造作一个新厨房

2017-10-31 H5案例分享 H5案例分享

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

识别图中二维码

嘻哈为你造作一个新厨房-查阅二维码

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

案例：嘻哈为你造作一个新厨房

出品：ROBAM老板 X 网易云音乐

亮点：

策划上，图文展示类与游戏类。这是一款由ROBAM老板和网易云为宣传各自的品牌共同打造的一款宣传h5。① Loading页面中，飞速旋转的金色飞轮和加载的进度相搭配，给用户一个重金属类炫酷感。② 页面加载完毕后，飞速的轮盘、左右移动的厨房电器、金色渲染的厨房背景共同组成了这一页屏幕。③ 用户通过点击进入后，“COOKIN 厨房有嘻哈”金黄色大字占据屏幕上方。同时弹出了主办方的logo和名称，也弹出了两个可供用户选择的按钮，用户可选择进入由网易云音乐打造的嘻哈音乐播放界面，也可选择进入由ROBAM打造的抽奖类游戏界面。
设计上，酷炫科技风格。① 以金色为主要色彩基调，酷炫、大气。② 点击进入后的，图片的转换颤动和各种色彩短时间的融合分散，更显其重金属与霸气。③ 满满金色重金属之意搭配现代化的飞速的齿轮和轮播图转换的家用电器，一种科技感扑面而来，挡也挡不住。。。
技术上，① 在厨房电器左右切换的方面采用了Swiper.js技术。②在轮盘飞速转动和厨房电器左右滑动的动画特效上采用了CSS3中的Animation和Transform技术进行实现。

技术实现： jQuery + Swiper.js

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

标签