一鏡到底H5：比手速宅男福利

最新 05-30

手觸女神，試試手感

完整欣賞此案例大約需要2分05秒

案例：2017特步企鵝派對跑

出品：特步&騰訊

技術實現： Video + ThreeJs + TweenJS

亮點：

策划上，視頻 + 一鏡到底類H5，彈幕亂入，女神降臨，雙擊愛心，看女神，王麗坤邀您一起來參加2017特步企鵝派對跑，長按指印，和女神一起點亮企鵝跑北京之旅；而後採用一鏡到底的方式，將女神跑北京之旅生動形象的展現了出來，滑動女神可幫她助跑，一路嗨跑，來到尾屏，以小視頻形式展現特步企鵝派對跑盛況，想一起跑的小夥伴可點擊嗨起，參加派對。

設計上，都市激情風格，採用紫紅色作為主色調，黃色作為輔色調，色彩艷麗張揚，畫面充滿活力。

交互上，採用上滑&下滑交互，來控制場景是向前還是向後，並根據「手速」及幅度控制女神跑步的速度。

技術上，視頻主要是採用帶有webkit-playsinline，playsinline等屬性的Video來實現的，女神跑步畫面主要是採用Canvas + ThreeJs + TweenJS（CreateJS 套件的一部分）來實現的。

體驗上，開始彈幕部分，點擊開啟不了視頻，因為策劃的是雙擊，策劃團隊有點任性；視頻切換場景部分，小五判斷拖沓了1.57秒，如果再快點，就更流暢了~

王麗坤視頻動效

GIF/1519K