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

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

詳見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搜索界面的實現(xiàn) js實現(xiàn)f11的效果 Google搜索

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103999.html

相關(guān)文章

Google搜索滅霸彩蛋的實現(xià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 評論0 收藏0
從滅霸的無限手套說起

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

whatsns 2019-08-23 17:14 評論0 收藏0
從滅霸的無限手套說起

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

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

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

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

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

kelvinlee 2019-05-23 16:26 評論0 收藏0