Webデザインにおける粒子アニメーションの10の美しい例

公開: 2020-02-27

Webを席巻し、パーティクルアニメーションは、数年前に自分たちのためにかなりのニッチを切り開くことができました。ハイテクな雰囲気と幾何学的な装飾を備えたデザインへの現在の大規模な執着は、それらを今日最も求められているソリューションの1つにしています。

原則として、パーティクルアニメーションは、JetUpDigitalなどのヒーローセクションで見ることができます。

ご覧のとおり、ウェブサイトを群衆から繊細かつ目立たないように分離しながら、第一印象に特定のスパイスを加えるエレガントな方法です。

この効果を再現するには、最初のステップはparticles.jsである必要があります。

これは、Vincent Garreauによる軽量のプラグインであり、そこにある大多数のパーティクルアニメーションの心臓部です。さらに、元の状態では、Web上で最もコピーされたソリューションの1つですが、作成者の例のように強度が高くない可能性があります。

一般的に、開発者はよりきちんとした、控えめで落ち着いたバリアントを好みます。たとえば、Romswell Roswell ParianPaucarによるCanvasParticlesをチェックしてください。それは、魅力的でダイナミックな美学をもたらす粒子と視差の組み合わせです。

しかし、それはアプローチがこの種の実現だけに限定されているという意味ではありません。 Dean Wagmanによる宇宙の粒子、Robin SelmerによるCSSのみの粒子システム、そしてもちろん、Alex Safayanのコーデックスで巧みに再現され、フィーチャーされたプッシュアウェイ効果を考えてみてください。ロビン・セルマーのコンセプトは見るのが楽しい作品ですが、他の2つはユーザーの操作を必要とし、それは常にエキサイティングです。

パーティクルアニメーションを使用して印象付ける

時が経つにつれて、技術は成熟しました。キャンバス全体に散らばった小さな白い点の混沌とした混乱から、それは大きな可能性を秘めた道具に変わりました。それは特別なことではありませんが、それでも一定のすごい要素があります。さらに、それはハイテク、幾何学的、そしてビジネスライクな美学に完全に貢献します–自然にそれらを仕上げます。

前提は次のとおりです。パーティクルアニメーションは印象的である必要があります。そして、開発者はこの仮定に固執し、それを最大限に活用します。このソリューションの本当のファンによって作成されたいくつかの驚異的なコードスニペットを考えてみましょう。

ジャスティン・ウィンドルによる30,000個の粒子

ここで、タイトルはそれ自体を物語っています。 30,000個の粒子が搭載されているので、何か壮大なものが期待できます。そして、ジャスティン・ウィンドルは確かに私たちの期待に応えました。彼のコンセプトは素晴らしいです。マウスを使って遊んでください。物理学はただ例外的です。このバージョンのパーティクルアニメーションは、開発者の間で非常に人気がありますが、それほど大きな規模ではありません。

アレックスサファヤンによる水中の魚

Alex Safayanはほぼ同じ解決策を考え出しましたが、この場合、粒子はますます大きくなります。マウスカーソルもドットを押しのけて、微妙な波及効果のあるトレースを形成します。アニメーションの動作は、水面に近いときの魚の動きを彷彿とさせます。物理学に注意してください：ドット間の相互作用はよく考えられています。

プランクトン– MarcoDell'Annaによるパーティクルライフ

2017年の最も心のこもったプロジェクトで賞を受賞したプランクトンは、確かに注目に値します。プロジェクトはアイデアだけでなく、実現にも夢中になります。手袋のようにここにフィットする微妙なカラーリングから、信じられないほど自然に見える壮大な行動まで、MarcoDell'Annaは細部に目を向けています。

STARDUST by Marco Dell'Anna

壮大なレトロな雰囲気、ネオンのタッチ、ゴージャスなカラーリングが大好きです。それから目を離すのはとても難しいです。スターダストは、デザインとコーディングの共生であり、感動的な傑作を生み出します。

濱室明光のグラビティポイント

浜室明光は、遊び場にいわゆる「重力ポイント」を追加するように勧めています。それらはドットの混沌とした動きに侵入し、磁石のようにそれらを引っ張ります。それらは軌道の中心の役割を果たしませんが; それでも、それらは粒子をそれらの方向に動かすように強制する焦点を形成します。

NateWileyによるParticleOrb CSS

球体は、最近のヒーローエリアで非常に人気のあるスタイルの選択肢です。そして、ネイト・ウィリーのこの傾向に対する見方は非常に印象的です。オーブは小さな粒子のおかげで壊れやすく見えると同時に、よく考えられた振る舞いのおかげでしっかりしています。球を崩壊させて再形成する彼のルーチンは素晴らしいです。

KevinRajaramによる粒子波

Kevin Rajarmは、パーティクルアニメーションの美しさと優雅さを取り入れ、Three.jsの素晴らしさでそれを強化し、繊細でありながら真に洗練されたコンセプトをもたらしました。波の驚くべき眺めは、未来的で、人工的で、魅惑的だと感じます。

非正統的な使用

パーティクルアニメーションを使用するさらに印象的な方法があります。殴られた道を離れて、独創的な考えをしましょう。このアプローチは、ロゴタイプやレタリングなどの要素に簡単に役立つ可能性があります。

TaminoMartiniusによるインタラクティブパーティクルロゴ

インタラクティブパーティクルロゴはその典型的な例です。これは、上記で紹介したJustinWindleのスニペットの再考されたソリューションのように見えます。ドットは3万個もありませんが、「CODEPEN」という言葉を巧みに形作った粒子が印象的な数で構成されています。これは、コンセプトが実用化された事例の1つです。

LouisHoebregtsによる粒子へのテキスト

以前のソリューションのカラフルなバージョンは、LouisHoebregtsによってこのペンで入手できます。ここで、テキストは、前の例と同じ対話性によって強化された、何千ものカラフルな黒丸で形作られています。

粒子はMarcoDell'Annaによるテキストを書く

これは劇的な入り口ではありませんが、何か魅力的なものがあります。スムーズなアニメーションはゆっくりとキャラクターを明らかにし、私たちの興味を刺激します。コンセプトには、「ストレンジャー・シングス」のイントロに似た不思議なセンスがあります。

マルコ・デル・アンナ

これはMarcoDell'Annaのもう1つの傑作です。今回は、パーティクルアニメーションが有名なナイキのロゴタイプの形成に参加しています。不明瞭で半透明から鮮明でしっかりしたものまで、アニメーションは徐々にロゴを露出させ、目立たないように全体的な注目を集めます。

enricotoniatoによる404パーティクルテキスト

パーティクルアニメーションの唯一の実用的な使用法がヒーローセクションを充実させることであると考えるなら、EnricoToniatoはあなたが間違っていることを証明します。エラーページに対する彼の見解は素晴らしいです。彼のアイデアに従い、動きのあるパーティクルを使用して、404ページが退屈で反発的に見えるのを防ぎます。

注意を引く効果

パーティクルアニメーションは、小さい方が良い場合の1つです。ドットが小さいほど、達成できる効果がより印象的です。一方では、幾何学と物理学が関係しているので、それは洗練されて複雑に見えます。一方で、繊細な形のおかげで壊れやすく繊細に見えます。このユニークな融合により、パーティクルアニメーションは並外れて注目を集めます。