百度外卖：测测你的耳朵有多会吃？
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分30秒
案例：测测你的耳朵有多会吃？
出品：百度外卖
亮点：
- 策划上，测试答题类。Loading还没结束，背景音乐便响起。BGM将吃各种东西的声音，有节奏的融在了一个欢快的音乐上。Loading结束，首页上满屏弹幕不断飞过，页面底部按钮提示“戴上耳机 开始食用”，点击按钮即可开始闯关答题。一共11关，每一关都会在背景给出某个吃货吃东西或喝饮料的声音，你需要在4个选项中，选择一个正确的答案，猜出他吃的或者喝的是什么。点击选项按钮，会给出选择正确或错误的反馈，并进入下一关。全部答完，会根据你答对的题数，给出对应的评价。结尾页点击“再听一遍”按钮可以重来一次，点击按钮“炫耀战绩”提示分享给朋友，点击“听饿了叭？来吃点东西续个命！”可以跳转页面，领取百度外卖送出的福利哦~
- 设计上，简笔手绘风格，画面中的每一个元素，都跟吃有关。黑白素色背景，使得其他元素更加一目了然，同时让答题后出现的反馈页中的食物画作，也格外突出。无论在哪一页，画面都有动态的元素，并且有背景音乐或音效循环播放，这让案例充满了活力。画面中有两个可爱的形象，小五暂且叫它们“饭团宝宝”和“鸡腿宝宝”好了，饭团宝宝出现在首页、结尾页以及题目展示部分，鸡腿宝宝则是出现在反馈页（抱歉小五第一次玩的时候光顾着肚子饿根本没注意到这俩小可爱）。
- 体验上，小五不会告诉你，是流着口水玩完这个H5的。对吃货来说，案例从loading部分开始，就从听觉上充满了代入感。每一关，看似是题目，实际上是对吃货们一波又一波的冲击。戴上耳机，音效更清晰也更诱人，怪不得首页会提示“戴上耳机”呢。你以为冲击你的只有音效和音乐么，那就错了，来看看这些诱人的手绘美食，是不是想一顿把它们都吃光光？11关的答题过后，小五肚子的叫声已经和背景音乐浑然一体，外卖小哥的身影浮现在脑海，格外的迷人…小五默默按下了底部的“续命”按钮...
技术实现： TweenMax + jQuery + PreloadJS
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
