マウスカーソルに反発する!?リペリングエフェクトを取り入れたコードスニペット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)

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

33,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 33,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ