Google搜索滅霸彩蛋的實(shí)現(xiàn)效果

王巖威發(fā)布于2019-08-23 17:13 / 3018人閱讀

詳見(jiàn)Github
https://github.com/lichking24...

Thanos Dust Effect Effects Demo

As Thanos making a snap with the Infinite Gauntlet, half the heros vanish to dust. As using the time stone, people come back.

Details

The procedures:

Click the Gauntlet button, and display animation to make a snap, and play audio file;

Select half heros by random, the random method is to resort members array;

arr.sort(function() {
  return 0.5 - Math.random();
});

Make selected item to dust

3.1 use html2canvas library to convert dom to a canvas image

3.2 split the canvas images into many pieces by pixel, function generateFrames()

3.3 create a container which has the same size and position as the converted dom

3.4 appendChild to the container with the pieces

3.5 rotate random degrees and translate random pixel for each piece, which shows the dust animation

3.6 set converted dom item to be invisible and finish the SNAP action

Reverse time to bring heros back by adjusting the visibility of converted dom items

FAQ

Why use a nodejs express server?

A static html file will show errors with "Unable to get image data from canvas because the canvas has been tainted by cross-origin data", even if I set allowTaint to be true.

GPU云服務(wù)器云服務(wù)器 google彩蛋 php搜索界面的實(shí)現(xiàn) js實(shí)現(xiàn)f11的效果 Google搜索

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103999.html

相關(guān)文章

Google搜索滅霸彩蛋的實(shí)現(xiàn)效果

詳見(jiàn)Githubhttps://github.com/lichking24... Thanos Dust Effect Effects Demo As Thanos making a snap with the Infinite Gauntlet, half the heros vanish to dust. As using the time stone, people come back. D...

CHENGKANG 2019-08-29 18:46 評(píng)論0 收藏0
從滅霸的無(wú)限手套說(shuō)起

摘要：前兩天看到搜索有個(gè)彩蛋，搜索滅霸或者，點(diǎn)擊右邊的無(wú)限手套觸發(fā)彩蛋，打個(gè)響指，消滅一半的搜索結(jié)果條目，消失特效類似電影里的。但是百度的這個(gè)頁(yè)面樣式類是動(dòng)態(tài)的，還要把整個(gè)內(nèi)容也輸出，而且很多圖片大概是經(jīng)過(guò)了什么處理，沒(méi)權(quán)限顯示不了，遂放棄。本文不是技術(shù)文章，只是單純記錄下最近婦聯(lián)4在熱映，先劇透兩個(gè)精彩片段。showImg(https://segmentfault.com/img/bV...

whatsns 2019-08-23 17:14 評(píng)論0 收藏0
從滅霸的無(wú)限手套說(shuō)起

摘要：前兩天看到搜索有個(gè)彩蛋，搜索滅霸或者，點(diǎn)擊右邊的無(wú)限手套觸發(fā)彩蛋，打個(gè)響指，消滅一半的搜索結(jié)果條目，消失特效類似電影里的。但是百度的這個(gè)頁(yè)面樣式類是動(dòng)態(tài)的，還要把整個(gè)內(nèi)容也輸出，而且很多圖片大概是經(jīng)過(guò)了什么處理，沒(méi)權(quán)限顯示不了，遂放棄。本文不是技術(shù)文章，只是單純記錄下最近婦聯(lián)4在熱映，先劇透兩個(gè)精彩片段。showImg(https://segmentfault.com/img/bV...

Mertens 2019-07-01 12:44 評(píng)論0 收藏0
十分鐘實(shí)現(xiàn)滅霸打響指灰飛煙滅的效果

摘要：全部文章列表從模塊化到私有倉(cāng)庫(kù)搭建十分鐘實(shí)現(xiàn)滅霸打響指灰飛煙滅的效果是時(shí)候開(kāi)發(fā)你自己的擴(kuò)展插件了看過(guò)復(fù)仇者聯(lián)盟的都知道，滅霸作為計(jì)劃生育政策的堅(jiān)定支持者和執(zhí)行者，一個(gè)響指清除了宇宙中二分之一的生命。電影中被清除的生命灰飛煙滅的鏡頭很是酷炫，所以在復(fù)聯(lián)4上映后，那個(gè)不存在的網(wǎng)站google，推出了一個(gè)彩蛋，如果在搜索框搜索滅霸，會(huì)出現(xiàn)一個(gè)手套的按鈕，點(diǎn)擊后會(huì)讓網(wǎng)頁(yè)搜索結(jié)果消失一半。 showI...

Wildcard 2019-05-22 18:00 評(píng)論0 收藏0
嘗試用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果 demo

摘要：寫(xiě)在前面滅霸打響指的消失效果。算是蹭熱度的一個(gè)我通過(guò)試圖去查看是如何實(shí)現(xiàn)的，也摳了一些音頻圖片資源下來(lái)。點(diǎn)擊一下手套，伴隨音效和響指的動(dòng)畫(huà)，會(huì)有一半的英雄消失。翻轉(zhuǎn)時(shí)間，英雄又回來(lái)的效果是將原來(lái)的節(jié)點(diǎn)設(shè)置為可見(jiàn)的，并加了回復(fù)動(dòng)畫(huà)。寫(xiě)在前面滅霸打響指的消失效果。效果來(lái)源于 Google 搜索滅霸或者 thanos。算是蹭熱度的一個(gè) Feature, 我通過(guò) F12 試圖去查看是如何實(shí)現(xiàn)的...

kelvinlee 2019-05-23 16:26 評(píng)論0 收藏0