Javascriptでアベンジャーズ体験をしてみよう

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. Javascriptでアベンジャーズ体験をしてみよう

Javascriptでアベンジャーズ体験をしてみよう

Javascriptでアベンジャーズ体験をしてみよう

こんにちは、アウラの河野です。
実は僕アメコミ映画「アベンジャーズシリーズ」俗に言うMCU映画が大好きでして、
ついこの間も「スパイダーマン ファーフロムフォーム」を鑑賞してきました。

そしたら、こんな面白いものを見つけたので一部ご紹介しようと思います。

Googleでアベンジャーズを再現!(ネタバレ含む)

映画のネタバレが一部含まれますのでご了承ください。

(1)Googleの検索欄で「サノス」と検索

(2)サノスのガントレットを押してください

(3)これは・・・

Googleすごいです!
地球上の半分の命・・・ではなく、検索数も半分に減るしかけになっています。
また、もう一度押すと「タイムストーン」で元に戻る仕組み。芸が細かい!!

自分でもやってみたい!

こんなの作れるの?っと思い、色々調べてみたところ、
海外のサイトでコードが公開されていたので、貼っておきます。

難しいですが、海外のサイトに説明が掲載されてたいので、一部ご紹介します。

1.要素をcanvasオブジェクトに変換
2.ピクセルを分散させる
3.JQueryでフェードアウトのアニメーション

だいたい、このような感じで行っているらしいです。
しかし、こういう演出はいろんなサイトでも使えそうです。
僕ももっと勉強していきます!

前後の記事

フリー素材の写真を集めたサイトまとめ

イラスト、写真などのイメージ素材は、ホームページを作る上で必ずといって良いくらい必要になって来ますよね。 予算が十分にある時はプロのカメラマンに依頼してオリジナリティのある写真を撮影したり、イラストレ…

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら