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

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

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

1. Repeling Lines

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

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

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

Repeling Lines

2. 30,000 Particles

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

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

30,000 Particles

3. Interactive Particles

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

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

Interactive Particles

4. Text to Particles

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

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

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

Text to Particles

5. Balls and Gravity

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

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

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

Balls and Gravity

6. Attractor

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

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

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

Balls and Gravity

7. Activate

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

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

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

Activate

8. Moar Plasma

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

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

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

Moar Plasma

9. Repellers

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

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

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

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

Repellers

おわりに

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

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

（執筆：Nataly Birch　翻訳：Nakajima Asuka　編集：Sato Mizuki）