マウスカーソルに反発する!?リペリングエフェクトを取り入れたコードスニペット9選

リペリングエフェクト

インタラクティブなエフェクトにもさまざまな種類があります。今回ご紹介するのは、マウスカーソルから粒子や線が逃げ出すような動きをする「リペリング(反発)エフェクト」

この記事では、リペリングエフェクトを作品として落とし込んだコードスニペット9選をご紹介します。

1. Repeling Lines

一見するとギターの弦のようですが、カーソルをあわせるとその部分の線が曲がり、円形の空白ができます。

ぜひ右側のオプションパネルから、エフェクトを調整してみてください。円の半径や線の数、線の間隔などが変更可能です。自然な動きが実現されていますね。

See the Pen Repeling Lines by Daniel Velasquez (@Anemolo) on CodePen.default

Repeling Lines

2. 30,000 Particles

3万個もの粒子がぎっしりと詰まった、象徴的なスニペット。カーソルをあわせると、粒子が砂のようにカーソルを避け、まわりに円形の空白ができます。

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

30,000 Particles

3. Interactive Particles

数百の粒子でつくられた文字の作品。カーソルをあわせると、文字の粒子が避けるように吹き飛ばされます。ぜひパラメーターを調整してデザインを弄ってみましょう。

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

Interactive Particles

4. Text to Particles

色と大きさが異なる粒子により、徐々に文字が形成されていく作品。Interactive Particlesと同じく、マウスカーソルを近づけると粒子が吹き飛ばされます。

はじめに表示されているのは「Hello Codepen♡」という文字ですが、この文字は下部にある入力ボックスから自由に変更可能です。

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

Text to Particles

5. Balls and Gravity

単独でも目をひくリペリングエフェクトですが、他のエフェクトと組み合わせるとより効果的です。この作品では、文字を避けるリペリングエフェクトのほかに「重力」という要素がプラスされています。

ここまでご紹介したものとは異なり、このスニペットではボールをつかむことができます。重力を意識しながら、ボールをドラッグしてみましょう。

See the Pen BALLS&GRAVITY by Marco Dell’Anna (@plasm) on CodePen.default

Balls and Gravity

6. Attractor

カーソルをあわせると、カーソルのまわりに小さな粒子が円形に集まり、まわりの粒子もそれにあわせてゆっくりと追尾する作品。

リペリングエフェクトでありながら追尾させるという、面白いアイデアですね。

See the Pen Attractor – MatterJS by Marco Dell’Anna (@plasm) on CodePen.default

Balls and Gravity

7. Activate

前の2つにつづき、こちらも重力の概念を取り入れたスニペットです。ボックスがガタガタと揺れるたびに粒子が跳びまわり、粒子をクリックすると弾け飛びます。

液体のような動作とリペリングエフェクトを、遊びごころたっぷりに組み合わせていますね。

See the Pen activate by Gerard Ferrandez (@ge1doot) on CodePen.default

Activate

8. Moar Plasma

ここまでご紹介した例からも明らかなとおり、リペリングエフェクトはパーティクルアニメーションとの相性が抜群です。

このスニペットでは、プラズマのような粒子とリペリングエフェクトが組み合わせられており、プラズマがカーソルを避けるようデザインされています。

See the Pen Moar Plasma by John Chin-Jew (@johnchinjew) on CodePen.default

Moar Plasma

9. Repellers

粒子の文字とリペリングエフェクトを組み合わせたスニペットも見事でしたが、こちらは線で文字を表現しています。

細くて短い線の組み合わせで構成された文字の上にカーソルをあわせると、もともとそよ風に吹かれるように動いていた文字が、さらにカーソルを避けるような動きをします。

ただの文字を主役にできるような、ユニークなデザインですね。

See the Pen Repellers by Rein van der Woerd (@reinvdwoerd) on CodePen.default

Repellers

おわりに

リペリングエフェクトは、まるでカーソルが磁石になったような不思議な感覚を与えます。遊びごころのある仕掛けは、人の目をひくにはぴったりです。

また、他のアニメーションやエフェクトと連携させるのもおすすめです。ぜひ既存の作品や、これから制作する作品に、リペリングエフェクトを取り入れてみてはいかがでしょうか。

(執筆:Nataly Birch 翻訳:Nakajima Asuka 編集:Sato Mizuki)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア副業案件
Workship