ブーム！ Webデザインにおける爆発の調査

公開: 2020-06-03

聴衆の注意を引く方法はたくさんあります。技術の現状はまだ不完全ですが、私たちは選択に甘んじています。ブラウザの互換性の問題が発生しており、すべてのデバイスがWeb開発者が提供する壮大なソリューションすべてに対応できるわけではありません。

それにもかかわらず、画像が主な原動力であり、派手なトランジションを備えたスライダーが唯一のスパイスであった静的なWebサイトの時代は過ぎ去りました。私たちは大胆なアイデアと贅沢の時代を目の当たりにしています。

最大の側面の1つは、開発者が焦点を大きなものに限定しないことです。はい、多数のキャンバスアニメーション、フルスクリーンモードを必要とする圧倒的なVRやビデオの実験などを見ることができます。しかし、今日では、細部にまで注意が向けられています。

Webサイトは、特にマウスカーソルに基づく微視的なソリューションで溢れています。私たちは多くの賢いアイデアに出くわすことができます。それらは素晴らしいですが、ほとんどの場合（私が探している言葉は何ですか？）、「静か」です。マウスベースのソリューションのいくつかは実際に音を出すので、私はそれらが音を出すことについて話していません。私は彼らの行動について話している。

彼らの行動は滑らかで、穏やかで、穏やかです。場合によっては、それはほとんど知覚できないほどシームレスです。また、コンテンツに夢中になっている場合や、他に気が散る要素がある場合は、それらを見落とす可能性もあります。では、ユーザーがそれらを楽しむ機会を逃さないように、それらを少し「大きく」してみませんか？

これを行う方法、あなたは尋ねるかもしれません。私には1つの良い解決策があります。それは、文字通りそして比喩的に物事を爆発させることです。

ディーン・ワグマンによる宇宙の粒子

たとえば、DeanWagmanによって作成されたこの素晴らしいコードスニペットを見てください。これはディーンが行った最初のキャンバス実験ですが、それでも非常に刺激的です。画面上の任意の場所をクリックするだけで、顔に向かって飛んでいる何百もの小さな明るい粒子が爆発します。音は出ませんが、確かに騒がしいです。

ペンを見る
Dean Wagman（@deanwagman）による宇宙の粒子。

爆発効果は常に何か大きなことが起こったという感覚を目覚めさせます。だから、これを私たちの利点に利用して、実際の音を出さずにノイズを追加してみませんか？さらに、ここには素晴らしいコードスニペットのセレクションがあります。それらを一緒に探検しましょう。

Alekseiによる粒子爆発/ ChristopherLisによるKaboomerz

Dean Wagmanによる解決策が少し多すぎる場合は、いつでもAlekseiによるパーティクル爆発を試すことができます。または、逆に、より重要な影響を与える必要がある場合は、クリストファー・リスのカブーマーズをいつでも採用できます。

最初のコードスニペットは、ディーンの爆発の「弟」バージョンを特徴としており、数十の小さな粒子が小さな爆発を形成し、すぐに現れて死にます。 Christopher Lisの場合、粒子のサイズに驚かれることでしょう。マウスカーソルから出てくる紙吹雪はとてつもなく巨大です。ただし、寿命が短いため、全体的な効果は圧倒的ではありません。それはただ楽しいです。

ペンを見る
Aleksei（@alek）による粒子爆発JS / CSS3。

ペンを見る
#Codevember 5 – Christopher Lis（@chriscourses）によるKaboomerz。

DavidAによるDOMの爆発。

このアイデアは気に入っても、もっとデジタル風でレトロなものが必要な場合は、Davidによって作成された素晴らしいソリューションがあります。彼は、円の代わりにさまざまなサイズの長方形を使用して、素敵な8ビットタッチを実現しています。その結果、80年代のカリスマ性を備えた小さな爆発を目の当たりにすることができます。

ペンを見る
David A。（@ meodai）によるDOMの爆発。

CreateJSによるWebGLスパークル

現実的なバージョンをお探しの場合は、CreateJSによるWebGLSparklesを検討するのが最適です。ここの粒子はすべて白ですが、よく考えられた動作のおかげで、画面をクリックすると本物のお祝いの銃撃戦のように見えます。さらに、カーソルには、シーンに魔法のようなタッチを与える素敵なトレイルがあります。

ペンを見る
CreateJS：CreateJS（@createjs）によるWebGLスパークル。

クリストファー・リスによる自動花火ランチャー

そういえば、私たちの爆発のコレクションは、花火の狂気がなければ完成しません。クリストファー・リスによる自動花火ランチャーは、考慮すべき素晴らしい例です。漫画風の花火ランチャーです。カラフルな粒子とカーネーションのような形のおかげで、星空を照らす本物の花火を思い起こさせます。

ペンを見る
29日目– Christopher Lis（@chriscourses）による自動花火ランチャー。

LegoMushroomによるモーダルウィンドウ破壊コンセプト

私たちのリストにあるのはキャンバス実験だけではありません。爆発効果は、モーダルウィンドウなど、インターフェイスのさまざまな要素に適用できます。 LegoMushroomにはその証拠があります。彼らのモーダルウィンドウの概念を見てください。ウィンドウを閉じると、ウィンドウが消えるのではなく、いくつかの部分に分割されます。これは、最近非常に人気のあるすべての豪華な完全に図解されたWebサイトへの完璧な追加です。

ペンを見る
LegoMushroom（@ sol0mka）によるモーダルウィンドウ破棄の概念。

SylvainGarnotによるSCSSExplosion Effect / KacperBawolによるSVGテキスト爆発/ TimHorwoodによるCanvasテキスト爆発

爆発の影響は、タイポグラフィにも役立ちます。 Sylvain GarnotによるSCSS爆発効果、Kacper BawolによるSVGテキスト爆発、TimHorwoodによるCanvasテキスト爆発を考えてみてください。

3つすべてが、テキストに適用された爆発効果を示しています。予想通り、マウスカーソルがそれぞれをトリガーします。

Sylvain Garnotを使用すると、ユーザーは各文字を100個の小さな正方形に爆破できます。 Kacper Bawolのコンセプトはほとんど同じに見えますが、今回はシンボルが小さな三角形に分割されています。また、Tim Horwoodを使用すると、ユーザーはテキスト全体を小さな粒子に爆破して、最終的にすべてを元の状態に戻すことができます。 3つのアイデアはすべて素晴らしいです。

ペンを見る
SCSS – sylvain garnot（@sylvaingarnot）による爆発効果。

ペンを見る
Kacper Bawol（@Casperovic）によるSvgテキストの爆発。

ペンを見る
キャンバステキストの爆発的増加、クリックしてTim Horwood（@tdhorwood）による表示。

Ko.Yelieによる家の爆発

爆発効果は画像にも適用できます。 Ko.Yelieによるこのコンセプトは素晴らしい例です。写真をクリックすることで、あなたはそれを小さな断片に爆破します。実際のインターフェースでこのアプリケーションを見つけることは困難ですが、一般的なものを他に類を見ないものに見せることができるいくつかの特別なソリューションをすぐに利用できることは常に素晴らしいことです。

ペンを見る
Ko.Yelie（@ ko-yelie）による家の爆発。

爆発的な機能

爆発効果は物議を醸すツールです。その「爆発的な」性質と強力なカリスマ性のために、そこにあるすべてのインターフェースには適していません。マウスカーソルと一緒に適用すると無害でニュートラルに見えますが、かなり「大音量」であるため、注意が必要です。

すべての人がウェブサイトから娯楽を求めるわけではないことを忘れないでください。そして、誰もが贅沢と圧倒的な印象を持っているわけではありません。結局のところ、コンテンツは常に王様のままです。

ただし、遊び心があり、いわゆる「大音量」であるエキサイティングなユーザーインタラクションを作成するためのいくつかの珍しい方法を探している場合は、爆発効果が役立つことは間違いありません。