敦刻尔克官方：诺兰的电影世界

2017-09-04 H5案例分享 H5案例分享

案例：诺兰的电影世界

出品：敦刻尔克官方

亮点：

策划上，① 以诺兰执导的盗梦空间中唤醒梦境的旋转陀螺做loading，在一开始就奠定了整支H5案例悬疑神秘的氛围，引起大家的好奇心；② 而后再将诺兰的经典电影，如星际穿越，蝙蝠侠·黑暗骑士以倒叙的时间线，并加以标志性镜头和音效使其再现，让用户勾起对诺兰电影的印象；③ 然后自然而在的过渡到《敦刻尔克》的关键镜头与配音，如同简洁的预告片，最后引导用户购票观影。
设计上，① 以黑色和深蓝色作为主色调，黑色深刻，深蓝色神秘，有利于渲染气氛；② 画面采用幻化消散的形式进行场景切换，产生了及其令人震撼的视觉体验；③ 经典的原声配音，让用户在视觉体验上又享受一把听觉盛宴，事整支H5的内容更加的形象饱满。
技术上，这支H5主要是采用图片依次切换，通过改变img的src里的图片路径做成的序列帧的形式来实现的。

技术实现： jQuery

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

识别图中二维码

诺兰的电影世界-查阅二维码

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

标签