ゆびパッチン気分が楽しめるエフェクト

先日、マーベル作品の映画「アベンジャーズ」が遂に完結しましたね。
自分もマーベル作品大好きなので映画館に足を運び、いつもは割高だったので選ばなかったIMAX 3Dで思いっきり楽しんできました。

劇場で登場する宇宙最強のヴィラン サノスがとても強かったですね。
彼が手にはめているガントレットという武器で繰り出す最強の技「指パッチン」（正式名称は「サノスのスナップ」というみたいです。）
これを繰り出すと、人々が塵になって崩壊していってしまうシーンは、びっくりしましたね。

今回はそんな色んなものが塵になって崩壊する感じが楽しめるJavaScript有ったので紹介します。

https://redstapler.co/thanos-snap-effect-javascript-tutorial/

一度HTMLをcanvasという画像に変換してからそれを細分化して、回転させながら移動させているらしいです。
とても複雑な処理ですね。実際PCでプレビューしていても少し重いです。

実際に動きがわかる説明の動画はコチラになります。

もともとはGoogleが映画の記念に、Googleで「サノス」を検索すると結果の画面に

こういう画面が出てきますので、この手袋をクリックしてみてください。すると・・・！？
遊び心でこのような事ができてしまうってほんとに素敵です。

試しに作ってみたよ！

サンプルのソースに合ったスクリプトを全部集めたつもりなのですが、実際とすこし挙動が違うような気がしてます…。
「バイバイを押してください。」

また、サイトに貼り付けているウィジェットだと更に挙動が違いますのでcodepenに移動してから確認してください。

でも、一応動いたから良いかな。