Board logo

主題: [其他] [閒聊]全聯廣告鬼影網頁設計 [打印本頁]
發表人: ROACH    時間: 2016-8-2 05:27 PM     主題: [閒聊]全聯廣告鬼影網頁設計

越來越覺得..全聯的廣告越來越厲害的

全聯的官網的影片
http://www.whatcanyousee.com.tw/

按下鍵盤的R 跟 I 跟  P  （同時按） 會出現『隱藏人物』
放開又會消失不見

想說這網站用什麼原理呢～套的那麼順....

看的一下網頁原始檔看來用影片堆疊的方式堆上去一起播放的吧!在透過按鍵..去隱藏原先的影片區塊
應該是這樣吧 真是厲害

CODE:
[Copy to clipboard]
    <div id="video">
            <div class="video-box show">
              <video id="v1" preload="auto" poster="assets/images/share_def.jpg">
                <source src="http://210.71.197.156/whatcanyousee/video/v1s.mp4" type="video/mp4">
              </video>
              <video id="v2" preload="auto" poster="assets/images/share_def.jpg">
                <source src="http://210.65.88.2/whatcanyousee/video/v2s.mp4" type="video/mp4">
              </video>
              <div class="btn-play"></div>
            </div>
          </div>
[ROACH 在  2016-8-2 05:30 PM 作了最後編輯]
發表人: H.T.DEMON    時間: 2016-8-2 09:51 PM

只有全聯才能超越全聯
發表人: pandabb    時間: 2016-8-2 10:05 PM

以前倒是用過overmouse變換灰階圖，這種算是類似的用法吧。不過變灰階圖可以在撥接時代用，變影片檔的用法，網路太慢效果就差了。
發表人: roachbody    時間: 2016-8-3 01:52 PM

很簡單
我本身也是網頁前端技術設計師
這技術已經好幾年囉

他是用兩個html5的video疊在一起
一個video是有臨演的影片 藏在後面
一個video是沒臨演的影片 擺在最前
當你三個鍵都被判定有全按下時
沒臨演的影片就隱藏起來

技術上不難
累的是影片要重拍兩次或是後製上去

PS:該網站bug滿嚴重的
     有時RIP三鍵按下只會出現黑畫面
     原因應該是有臨演的影片的主機流量無法負荷上網人數
     導致有臨演影片一直load不進user電腦導致的
     但基本上這個行銷是非常成功的
     因為短短這幾天我看已經好幾個文章跟路人在討論這網站了

[roachbody 在  2016-8-3 01:54 PM 作了最後編輯]
發表人: LiuRambo    時間: 2016-8-3 02:38 PM

同上+1
創意實在是太厲害了
發表人: frans    時間: 2016-8-3 03:00 PM

盪鞦韆部份就做的不好
發表人: speed    時間: 2016-8-4 10:25 AM

拍攝手法是很早已前就有的(古早很多用在戲劇中當一人飾兩角時…雙胞胎老梗)，特點就是畫面會很明顯垂直不重疊的區域
網頁技術上面有高手解說

最後，把這些手法技術及鬼月主題成功結合在一起的創意是了不起的
發表人: jazzblue    時間: 2016-8-6 09:36 AM

這就是現在流行的的 AR 技術嗎 ?   



歡迎光臨 TWed2k (http://twed2k.org/) Powered by Discuz! 4.1.0