广州市广播电视台：我们的时代曲

2018-12-17 H5案例分享 H5案例分享

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

识别图中二维码

我们的时代曲-查阅二维码

完整欣赏此案例大约需要60秒

案例：我们的时代曲

出品：广州市广播电视台

亮点：

主题上，以电台和音乐元素为基本载体，通过回顾1978—2018年这四十年间中国流行音乐的变化，侧面衬托出城市文化活动的变迁，展现改革开放以来的发展成果。
策划上，一镜到底+图文展示。采用长按屏幕的交互方式，结合一镜到底的视觉效果。对应80、90、00和10四个年代，制作经典音乐串烧，并配合相关的场景呈现。结尾页通过摇一摇，生成专属的年代音乐签。点击“再看一次”则会快速穿越回到首屏。
设计上，采用手绘的怀旧风格，结合不同年代的成长经历，比如80年代围坐在大榕树的士多店门前听收音机；90年代听武侠讲古；00年代听walkman看演唱会；再到现在的车载音响等等，事件间的画面过渡设计得也很巧妙。整体还加上了动态飘落的木棉花，这使画面具有了更高的表现力。背景音乐选用的均是脍炙人口的年代金曲串烧，还加入相应的场景音效，让人有更深的沉浸感。
体验上，整个H5兼具时代和地域特点，看完感觉又重新成长了一次。

技术实现： Canvas + Zepto

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

标签