デザイン

デザイン

爆発効果でデザインに差をつける!すぐ導入できるJavaScriptとCSSアニメーションコード11選

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、Boom! Examining Explosions in Web Design
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

288 views

読了時間 : 約4分53秒

見る人の観客の注目を集めるには多くの方法がありますが、今の技術はまだ不完全で、いくつかのブラウザの互換性の問題を経験していたり、すべてのデバイスがウェブ開発者のすべての壮大な解決策に対処できているわけではありません。

 

それにもかかわらず、画像が主な要素で、ファンシーなトランジションを備えたスライダーが唯一の注目点の静的ウェブサイトの時代は終わり、大胆なアイデアの時代に入っています。

 

この変化の最大の特徴は、開発者が焦点を大きなものに限定しないことです。全画面モードなどを必要とする圧倒的な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.

 

爆発的な機能

爆発効果は物議を醸すであろうツールです。「爆発的」な性質と強力なカリスマ性があるためで、すべてのインターフェースに適しているわけではありません。マウスカーソルで始めることができ、無害で中立的であるように見えますが、それはかなり「騒がしい」です – したがって、注意が必要です。

 

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

 

しかし、遊び心のある、いわゆる「騒がしく」エキサイティングなユーザーインタラクションを行うための変わった方法を探しているのであれば、間違いなく爆発効果が役に立つでしょう。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ