国家大剧院：爱“拼”才会赢 · 玩转国家大剧院ART鹅
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
案例：爱“拼”才会赢 · 玩转国家大剧院ART鹅
品牌：国家大剧院
技术实现： jquery + html2canvas + swiper + layer.js
亮点：
1、创意定位
国家大剧院建院12周年宣传H5，以爱“拼”才会赢，取了“拼”字的谐音，也有一语双关，案例中还融合了IP形象ART鹅。
2、策划上
拼图游戏的形式，首屏给出主题爱“拼”才会赢，这个拼字第一眼会想到拼搏，再看到下方的“开始游戏”按钮，猜测有可能是拼图；进入第二屏，有四个ART鹅的卡通形象，点选其中一个，开始进行图片；最初有拼图初始的图案，大约1秒后拼图打乱顺序，点击任意两块拼图，可交换顺序（不是必须相邻两块拼图），拼好后，提示用时和超越的小伙伴；最后的惊喜是可以看ART鹅的卡通视频和购买天鹅主题纪念品。
3、设计上
蓝色底色，色彩纯色扁平，配合卡通形象ART鹅。
4、技术上
在细节上，无论首屏和最后一屏都有天鹅在底图中飞翔，天鹅使用gif动图，屏幕中飞翔的路径使用CSS3的animation完成；拼图游戏采用将9块拼图做绝对定位，随着用户的点击调整top和left值完成移动。
5、体验上
提示部分（不是倒计时）的遮罩图片必须点击关闭按钮才可以隐藏遮罩层，要是点击遮罩层自身自动隐藏，体验会更好。
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
