見る人の観客の注目を集めるには多くの方法がありますが、今の技術はまだ不完全で、いくつかのブラウザの互換性の問題を経験していたり、すべてのデバイスがウェブ開発者のすべての壮大な解決策に対処できているわけではありません。
それにもかかわらず、画像が主な要素で、ファンシーなトランジションを備えたスライダーが唯一の注目点の静的ウェブサイトの時代は終わり、大胆なアイデアの時代に入っています。
この変化の最大の特徴は、開発者が焦点を大きなものに限定しないことです。全画面モードなどを必要とする圧倒的なVRやビデオ実験など、多数のキャンバスアニメーションを目にしますが、ごくわずかな細部でさえも、注意が必要なのです。
ウェブサイトは、特にマウスカーソルを基にしたもので、小さめなもので溢れています。ここでは数多くの賢いアイデアをご紹介します。それらは幻想的ですが、ほとんどの場合、それらは「穏やか」なものです。マウスベースのソリューションの中には実際に大きな音を出すものがありますが、音に関しては言及せず、何が見られるかについてご説明します。
動きは滑らかで、落ち着いて、そして穏やかです。いくつかは、それは非常にシームレスなのでほとんど気になりません。コンテンツのほうに興味を持ちすぎたり、気がそらされる要素が他にある場合は、見落としてしまうほどでしょう。それでは、なぜユーザーが楽しむ機会を逃さないよう、少し「目立つもの」にしないのでしょうか？
ここでは、一つの良い解決策をご紹介します：爆発させるのです。文字通りそして比喩的に。
Dean Wagman氏作成の宇宙の粒子
たとえば、Dean Wagman氏によって作成されたこの素晴らしいコードスニペットをご覧ください。これはDean氏が行った最初のキャンバス実験ですが、それでも非常に感動的なものです。スクリーンのどこかをクリックするだけで、爆風で飛んでくるたくさんの小さな明るい粒子が見られます。たとえそれが音を立ていなくても、激動は感じられます。
See the Pen
Particles in space by Dean Wagman (@deanwagman)
on CodePen.
爆発効果は常に何か大きなことが起こっているという感覚を起こしますが、実際に音を出すことのないスニペット使用して、ノイズを追加しないのはなぜでしょうか。ここでさらに素晴らしいコードスニペットをご紹介しますので、一緒にみていきましょう。
Christopher Lis氏とAleksei 氏による粒子爆発
Dean Wagman氏によるものが過多すぎると感じる場合は、Alekseiによる粒子爆発を見てください。また、更に過激なものが必要な場合は、Christopher Lis氏作成のものもチェックしてみてください。
最初のコードスニペットは、Dean Wagman氏の爆発の「兄弟」バージョンであることを特徴としています。そこでは、何十もの小さな粒子が小さな爆発を形成し、それがすぐに現れて消えます。Christopher Lis氏のスニペットでは、粒子の大きさに驚くでしょう。マウスカーソルから出てくる紙吹雪はものすごく巨大です。ただし、時間が短いため、全体的な効果はそれほど大きくありません。ただ楽しいものです。
See the Pen
Particle explosion JS/CSS3 by Aleksei (@alek)
on CodePen.
See the Pen
#Codevember 5 – Kaboomerz by Christopher Lis (@chriscourses)
on CodePen.
David A.氏によるDOM爆発
上で紹介したもののアイデアは好きだけど、もっとデジタル風でレトロ風の何かが必要な場合は、David氏が作成した素晴らしいソリューションがあります。彼は円の代わりに様々なサイズの長方形の物体を使って素敵な8ビットタッチを実現しています。その結果、80年代のカリスマ性を備えた小さな爆発が見られます。
See the Pen
DOM explosions by David A. (@meodai)
on CodePen.
CreateJS氏によるWebGLの輝き
現実的なバージョンを探しているなら、CreateJS氏によるWebGL Sparklesは考慮すべき完璧な例です。ここのすべて粒子は白ですが、よく考え抜かれた動きのおかげで、画面をクリックすると実際のお祝いのクラッカーのように見えます。さらに、カーソルには、魔法をかけるような気になる素敵な細工がしてあります。
See the Pen
CreateJS: WebGL Sparkles by CreateJS (@createjs)
on CodePen.
Christopher Lis氏の自動花火ランチャー
Christopher Lis氏によるAutomatic Firework Launcherは、考慮すべき素晴らしい例です。漫画のような花火ランチャーで、カラフルな粒子とカーネーションのような形のおかげで、星空を照らす本物の花火を思いおこさせます。
See the Pen
Day 29 – Automatic Firework Launcher by Christopher Lis (@chriscourses)
on CodePen.
LegoMushroom氏によるモーダルウィンドウ破棄コンセプト
キャンバスだけが対象ではありません。爆発効果は、モーダルウィンドウのように、インターフェイスのさまざまな要素に適用できます。LegoMushroom氏は鮮やかに証明してくれています。モーダルウィンドウコンセプトをご覧ください。ウィンドウを閉じると、消えるだけでなく、いくつかの部分に分かれます。これは最近非常に人気がある空想世界のウェブサイトへの追加例です。
See the Pen
Modal window destroy concept by LegoMushroom (@sol0mka)
on CodePen.
Sylvain Garnot氏によるSCSSの爆発効果・Kacper Bawol氏によるSVGテキストの爆発・ Tim Horwood氏によるキャンバステキストの爆発
爆発効果はタイポグラフィにも使えます。Sylvain Garnot氏によるSCSS Explosion Effect、Kacper Bawol氏によるSVGテキスト爆発、およびTim Horwood氏によるキャンバステキスト爆発を見てみましょう。
3つともテキストの爆発効果を示しています。マウスカーソルによって始まります。
Sylvain Garnot氏のものでは、ユーザーは各文字を100個の小さな正方形の破片に爆破することができます。 Kacper Bawol氏によるコンセプトもほぼ同じですが、今度はシンボルが小さな三角形に分割されます。また、Tim Horwood氏のものを使用すると、テキスト全体を小さな粒子に分割して最終的に戻ってきて、元の状態に戻ります。 3つのアイデアはそろれぞれすべて素晴らしいものです。
See the Pen
SCSS – Explosion Effect by sylvain garnot (@sylvaingarnot)
on CodePen.
See the Pen
Svg text explosion by Kacper Bawol (@Casperovic)
on CodePen.
See the Pen
Canvas text explosion, click to view by Tim Horwood (@tdhorwood)
on CodePen.
爆発的な機能
爆発効果は物議を醸すであろうツールです。「爆発的」な性質と強力なカリスマ性があるためで、すべてのインターフェースに適しているわけではありません。マウスカーソルで始めることができ、無害で中立的であるように見えますが、それはかなり「騒がしい」です – したがって、注意が必要です。
すべての人がウェブサイトから娯楽を求めるわけではないことを覚えておいてください。誰もが贅沢で圧倒的な印象を求めているわけではありません。結局のところ、コンテンツが常に重要なのです。
しかし、遊び心のある、いわゆる「騒がしく」エキサイティングなユーザーインタラクションを行うための変わった方法を探しているのであれば、間違いなく爆発効果が役に立つでしょう。
おすすめ新着記事
おすすめタグ