【Webデザイン】第一印象が大事！美しく動かしたくなる粒子アニメーションスニペット１０選

パーティクルアニメーションは数年前にWebに嵐を巻き起こして、その存在を確固たるものにしました。現在のハイテクな雰囲気と幾何学的な装飾効果を備えたデザインの流行に伴って、パーティクルアニメーションの人気はますます高まってきています。

 

 

原則として、パーティクルアニメーションは、例えばJetUp Digitalのようなヒーローセクションで見られるものです。

 

 

ご覧のとおり、サイトを訪れた時に最初に受ける印象を刺激的なものにするエレガントな方法であり、繊細で控え目なやりかたでこのウェブサイトを他のサイトとは一線を画するものにしています。

 

 

この効果を再現するための、最初のステップはparticles.jsが良いでしょう。

 

 

Vincent Garreauによる軽量プラグインであり、大部分のパーティクルアニメーションの肉体と精神のようなものです。さらに、初期状態は、作者の例のようなパワーは無いかもしれないものの、ウェブ上で最も沢山コピーされたソリューションの1つなのです。

 

 

一般的に、開発者はよりきちんとしていて、控えめで穏やかなバリエーションを好みます。たとえば、Ramswell Roswell Parian PaucarのCanvas Particlesをチェックしてください。それは、魅力的でダイナミックな美しさをもたらすパーティクルアニメーションとパララックスの組み合わせです。

 

 

しかし、このアプローチがこの種の作品に限定されるわけではありません。Dean WagmanによるParticles in space、Robin SelmerのCSSのみのシステム、そしてもちろん、Alex Safayanのコードペンで巧みに再現され、紹介されているプッシュアウェイ効果について考えてみましょう。 Robin Selmerのコンセプトは見て楽しいものですが、他の2つはユーザーのインタラクションを必要としていて、いつもエキサイティングです。

 

 

 

印象に残るパーティクルアニメーション

時とともに、技術は成熟し、キャンバスに散らばった小さな白い点の混沌は、大きな可能性を秘めたツールに姿を変えました。特別なものではありませんが、それなりに人の心を動かす要素を持っています。さらに、ハイテク、幾何学的、そしてビジネスライクな美しいデザインの実現に、それを自然な仕上げを施すことで、間違いなく貢献してくれます。自然にそれらを仕上げます。

 

 

話の前提になっているのは、パーティクルアニメーションは印象的だということです。そして、開発者はどんな状況でもこの前提にこだわり、最大限に活用します。このソリューションの真のファンによって作られた驚異的なコードスニペットを見てみましょう。

 

 

 

30,000 Particles (Justin Windle)

名が体を表しています。ボードに配置された3万個の粒子が壮大なものを期待させてくれます。そしてJustin Windleは確かに私たちの期待に応えてみせました。彼のコンセプトは信じられないほど素晴らしいものでした。マウスを操作して遊んでみてください。パーティクルの動きはただただ目を見張るものです。この手のパーティクルアニメーションは、これほど大きなスケールではないものの、開発者の間では非常に人気があります。

See the Pen 30,000 Particles by Justin Windle (@soulwire) on CodePen.

Fish in Water (Alex Safayan)

Alex Safayanも、ほとんど同じソリューションを構想しましたが、この場合、パーティクルは拡大されています。マウスカーソルもドットを押しのけてかすかな波紋効果を伴う軌跡をのこします。アニメーション、水面近くを泳ぐ魚の動きを連想させる。パーティクルの振る舞いに注目してください。ドット間の相互作用は十分に考え抜かれて作られたものです。

See the Pen Particles #22 – Fish in Water by Alex Safayan (@alexsafayan) on CodePen.

PLANKTON – Particles life (Marco Dell’Anna)

2017年の最も心のこもったプロジェクト賞を受賞したPlanktonは確かに注目に値します。このプロジェクトは、そのアイデアだけでなく、その実現方法によっても人を魅了します。手袋のようにここにフィットする絶妙な色合いから、信じられないほど自然な見事な動きに至るまで、Marco Dell’Annaの細やかな目配りが光っています。

See the Pen PLANKTON – Particles life by Marco Dell’Anna (@plasm) on CodePen.

STARDUST (Marco Dell’Anna)

私はこの壮大なレトロ感、ネオンの雰囲気、そして華やかな色彩を崇拝する。目をそらすことはとても難しいです。Stardustはデザインとコーディングの共生であり、魅力的な傑作に仕上がっています

See the Pen STARDUST by Marco Dell’Anna (@plasm) on CodePen.

Gravity Points (Akimitsu Hamamuro)

Akimitsu Hamamuroは、プレイグラウンドにいわゆる「重力ポイント」を追加するようにうながします。 重力ポイントはドットの混沌とした動きのなかに割り込み、ドットを磁石のように引っ張り始めます。 軌道の中心になるわけではありませんが、 粒子を自分自身へ向けて動かす焦点を形成するのです。

See the Pen Gravity Points by Akimitsu Hamamuro (@akm2) on CodePen.

Particle Orb CSS (Nate Wiley)

球体は最近、ヒーローデザインの分野で非常に人気のあるスタイルです。 そして、このトレンドに対してNate Willeyが取った態度はかなり印象的です。 球体は小さな粒子のおかげで壊れやすいように見えると同時に、よく考えられた動作のためにしっかりした印象も与えます。 球を分解し、再形成する彼が作ったルーチンは素晴らしいです。

See the Pen Particle Orb CSS by Nate Wiley (@natewiley) on CodePen.

Particle Waves (Kevin Rajaram)

Kevin Rajarm氏は、パーティクルアニメーションの美しさと優雅さを取りあげ、Three.jsの驚異的な機能でそれを強化し、繊細でしかも洗練されたコンセプトを生み出しました。 表示される波の素晴らしい眺めは、未来的で、人工的でそして魅力的なものに感じられます。

See the Pen Particle Waves by Kevin Rajaram (@kevinsturf) on CodePen.

型破りな使い方

パーティクルアニメーションをさらに印象的に使用する方法があります。 踏み固められた道からそれて常識を破りましょう。このアプローチでは、ロゴタイプやレタリングなどの要素に簡単に好ましい印象を与えることができます。

 

 

 

Interactive Particle Logo (Tamino Martinius)

Interactive Particle Logoは典型的な、型破りな使用例です。 上述のJustin Windleのスニペットを再構成したようなものです。 ドットが30,000個あるわけではありませんが、 圧倒的な数の粒子が「CODEPEN」を構成されています。 これは、このコンセプトが実現されたケースの1つです。

See the Pen Interactive Particle Logo by Tamino Martinius (@Zaku) on CodePen.

Text to particles (Louis Hoebregts)

1つ前に紹介したソリューションのカラフルなバージョンは、Louis Hoebregtsによるこのcodepenで利用可能です。ここでは、テキストは、前の例と同じような相互作用によって強化されたカラフルな数千もの不透明な円で形作られています。

See the Pen Text to particles by Louis Hoebregts (@Mamboleoo) on CodePen.

Particles write text (Marco Dell’Anna)

これは劇的な導入ではありませんが、魅惑的な部分があります。スムーズなアニメーションが文字をゆっくりと表示し、私たちの興味を引きつけるのです。このコンセプトには、「ストレンジャー・シングス」のイントロと同じような神秘的な雰囲気があります。

 

See the Pen Particles write text by Marco Dell’Anna (@plasm) on CodePen.

JUST DO IT (Marco Dell’Anna)

これはMarco Dell’Annaによるもう一つの傑作です。今回は、パーティクルアニメーションが有名なNikeのロゴタイプを形成します。あいまいで半透明なものから鮮明で不透明なものまで、アニメーションがロゴを徐々に表現していき、控え目に注目を一手に引き付けてしまうのです。

See the Pen JUST DO IT. by Marco Dell’Anna (@plasm) on CodePen.

404 particle (entice toniato)

パーティクルアニメーションの唯一の実用的な使い道がヒーローセクションの質を高めることだけだと思っているのなら、Enrico Toniatoがあなたの間違いを証明することになるでしょう。彼の作成したエラーページは素晴らしいものです。彼の考えに従って動くパーティクルによって、404ページは退屈で反発的なものにならずにすむのです。

See the Pen 404 particle text by enrico toniato (@enricotoniato) on CodePen.

注意を集める効果

パーティクルアニメーションは、小さいほど良い場合の1つです。 ドットが小さいほど、より印象的な効果が得られます。 一方では、geometryとphysicsが関与しているので、洗練されていて複雑に見えます。 一方、繊細な形のため、微かで絶妙な印象も与えます。 このユニークな融合効果により、パーティクルアニメーションは注目度抜群なのです。

 

 

 

※本記事は、10 Beautiful Examples of Particle Animation in Web Designを翻訳・再構成したものです。

 

 

 

▼こちらの記事もおすすめです！