4000-888-103

资讯动态国家大剧院:爱“拼”才会赢 · 玩转国家大剧院ART鹅资讯详情

国家大剧院:爱“拼”才会赢 · 玩转国家大剧院ART鹅

2019-11-21 00:00:00

8.jpg
  
b8.png

案例:爱“拼”才会赢 · 玩转国家大剧院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、体验上

提示部分(不是倒计时)的遮罩图片必须点击关闭按钮才可以隐藏遮罩层,要是点击遮罩层自身自动隐藏,体验会更好。




c8.jpg
关键词:h5场景开发 h5网站搭建 什么叫长页面h5
上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png