カーソルに反応してWebデザインに躍動感を与えるリペリング効果のコードスニペット8選

画面上の実験は最近の話題であり、人気のWeb開発者だけでなく、実際のプロジェクトでも使われています。驚くほど様々なものがあります。

 

今日、私たちはリペリング効果に注意を向けたいと思います。それは反発的する効果を持ちますが、魅力的な性質を持っています。 ユーザーは、それらを様々な方向へ移動させたり、全て吹き飛ばすしたりして楽しむことができます。

 

コードスニペットのコレクションを見て、自分のお気に入りを見つけましょう。

 

 

Repeling Lines

一見すると、このデモはギターの弦を連想させます。しかし、その上にカーソルを移動すると、線が変形し始め、小さな円を形成し、魔法のような効果が現れます。右側のオプションパネルでは、カーソル範囲の設定、線の追加または削減、距離の変更ができます。

 

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

 

30,000 Particles

線の代わりに数千のドットを使用しており、リペリング効果が素晴らしく映えます。JustinWindleはこれを実際にCodePenで使用し、彼の大人気プロジェクトは、30,000個の小さな粒子を使ったパネルが特徴です。

 

カーソルをその上に置くと、ドットが逃げる様子が見れます。画面から消えることはありませんが、カーソルの位置によって変化し、円を見ることができます。

 

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

 

 

Interactive Particles

シンプルな長方形のフレームが創造力を刺激しないなら、Tamino Martiniusが行ったように、これらのドットをいつでも集め形を作ることができます。各文字は数百のドットで構成されており、カーソルがそれらを吹き飛ばします。好みに合わせて調整できる小さなコントロールセンターがあります。

 

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

 

Text to Particles

色とサイズの違いを取り入れて、今見てきた2つ以上に躍動感あふれるLouis HoebregtsのText to Particlesです。Tamino Martiniusとは異なり、ドットは異なる大きさと異なる色を持ち、さらに、テキストを変更することもできます。カーソルは、スムーズにドットを動かし私たちを楽しませてくれます。

 

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

 

Balls and Gravity

リペリング効果は、他の物理ベースと組み合わせて、優れた結果をもたらすことができます。重力とリペリング効果がコンセプトの核心にあり興味深いものを作り出しています。ここでは円を掴み、他の円を押しのけることができます。カラフルな円のほとんどは掴むことができ、強制的に移動させることができます。

 

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

 

Attractor

Marco Dell’Annaによるこのプロジェクトも重力を中心に構築されており、カーソルで制御できます。これを使用して物体を移動し、その位置変えます。しかし位置を変更しても、円に戻ります。ここではカーソルは、磁石の役割を果たしています。

 

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

 

Activate

ActivateはGerard Ferrandezによって作成された傑作であり、前の例と同様に、重力を利用していますが、今回は流動的な動作とリペリング効果が組み合わされています。その結果、戯れた外観と遊び心のある性質を感じさせます。

 

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

 

Moar Plasma

リペリング効果はパーティクルアニメーションにも非常に役立ち、さらにスリリングにすることができます。ここでは、カーソルがパーティクル追い払う動きを見ることができます。

 

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

 

Snowy Particles

Snowy Particlesは、従来のパーティクルアニメーションの効果を高めるもう1つの優れた例です。Natは、2つのトリックを使用しました。最初に、カーソルは単純な点を雪片に変換する力を持っていて、魔法のように感じられます。次に、雪の塊をわずかに分散させる小さなリペリング効果が追加され、独特の雪の欠片を見ることができます。

 

See the Pen
particles.js snow by Nat (@n-sayenko)
on CodePen.

 

Repellers

リペリング効果がさらに輪転を加えることができすテキスト効果です。既に数千個のドットで構成されているものは見ました。ここでは、ドットを線にしてリペリング効果を与えてみましょう。カーソルが文字の上をドラッグすると、ダンスしているように見えます。

 

テキスト自体は少し鋭い感じがしますが、その動きは滑らかで目を楽しませてくれます。また、線自体も動くので、文字を揺らす小さな風のように感じます。

 

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

 

リペリングの魅力

リペリング効果は押しのける効果ですが、不思議さを纏っています。目を離すことができません。その遊び心のある動きで目を引き、ユーザーを画面に惹きつけます。リペリング効果は、観客を惹きつけるだけに留まらず、アニメーションと組み合わせて独創性を出し、注目を集めるために使われたりします。