Webデザインの反発効果を示す8つのスニペット

公開: 2020-10-07

キャンバスを使った実験は、最近の町の話題です。それらは、人気のあるWeb開発者の遊び場の概念としてだけでなく、実際のプロジェクトのソリューションとしても見ることができます。多様性は間違いなく驚くべきものです。人気のあるプラグインに基づく原始的な粒子アニメーションから、最新の実績のあるツールの融合であるユニークなアイデアまで。

本日は、反発効果にご注目いただきます。反発的な振る舞いをしますが、確かに魅力的な性質を持っています。さまざまな方向に押したり、場合によってはすべてを吹き飛ばしたりして、風景の細部を操作するようにユーザーを促し、それが即座にメインエンターテインメントになります。これにより、ユーザーエクスペリエンスが楽しくエキサイティングになります。

コードスニペットを使用して刺激的なデモのコレクションを調べて、独自のトレンドを確認してみましょう。

反発線

一見すると、このデモはギター弦のセットを彷彿とさせます。それらの上にカーソルを移動すると、魔法が表示されます。線が曲がったり変形したりして、小さな球を形成します。

右側のオプションパネルでは、効果を制御できます。マウス範囲の半径を設定したり、行数を追加または削減したり、文字列間の距離を変更したりできます。物理学に注意してください。よく考えられ、丁寧に再現されています。

DanielVelasquezによるPenRepelingLinesを参照してください

30,000個の粒子

反発効果は、線ではなく数千のドットに適用すると、単純に素晴らしいように見えます。ジャスティンウィンドルは実際にこれを証明しています。 CodePenでの彼の象徴的で非常に人気のあるプロジェクトは、30,000個の小さな粒子が快適に座るパネルを特徴としています。

それらは密集して密な表面を作成します。その上にマウスカーソルを置くと、ドットがどのようにあなたから逃げるかがわかります。それらは視界から消えることはありませんが、マウスの範囲によって抑制されます。したがって、ドットが境界を形成する比較的大きな中空の円を見ることができます。

JustinWindleによるペン30,000粒子を参照してください

インタラクティブパーティクル

シンプルな長方形のフレームがあなたの創造性を刺激しない場合は、TaminoMartiniusがInteractiveParticlesプロジェクトで行ったように、いつでもこれらすべてのドットをキャラクターに集めることができます。

彼のデモには1つの単語が含まれており、各文字は数百のドットで構成されています。マウスカーソルでそれらを吹き飛ばして、スパイスを効かせます。実験のパラメータを変更し、好みに合わせて調整できる小さなコントロールセンターがあります。

TaminoMartiniusによるペンインタラクティブパーティクルロゴを参照してください

粒子へのテキスト

LouisHoebregtsがTextto Particlesプロジェクトで行ったように、色とサイズを試して、以前の2つの概念を活気のあるひねりで豊かにしましょう。

Tamino Martiniusによるソリューションとは異なり、ここではドットの半径と色が異なります。さらに、入力を使用して設定することにより、テキストを変更することもできます。マウスカーソルの動作はスムーズで穏やかで、群衆を分散させ、遊び場に小さな障害をもたらします。これは本当に目を楽しませてくれるデモです。

LouisHoebregtsによる粒子へのペンテキストを参照してください

ボールと重力

忌避効果は、他の物理ベースのソリューションと簡単に組み合わせて、優れた結果をもたらすことができます。ボールと重力を考慮してください。

プロジェクトの名前がすべてを物語っています。重力と反発効果は、コンセプトの中心にあり、体験を魅力的なものにします。

前の例とは異なり、ここでは円をつかんで、他の円を押しのけるための道具として使用する必要があります。あなたはこれらのカラフルな平らなボールをほとんど打つことができ、それらを動かすことを強制します。さらに、重力と戦う必要があります。これにより、体験がさらにエキサイティングになります。

MarcoDell'AnnaによるPenBALLS＆GRAVITYをご覧ください

アトラクター

Marco Dell'Annaによるこのプロジェクトも、重力を中心に構築されています。マウスカーソルで操作できます。これを使用して、パーティクルを移動し、それらの位置を再配置します。

パーティクルの位置が変わっても、サークルに戻ろうと努力することに注意してください。したがって、ここでは、磁石の役割を果たすマウスカーソルと、ドットを（少なくとも一時的に）押しのけるためのツールを見ることができます。

ペンアトラクタ– MarcoDell'AnnaによるMatterJSを参照してください

活性化

Activateは、GerardFerrandezによって作成された優れたペンです。前の例と同じように、作者も重力を優先することを選択しました。今回は、流動的な動作と、もちろん反発効果が組み合わされています。その結果、このプロジェクトは、そのはしゃぐような外観と遊び心のある性質で私たちを魅了します。

GerardFerrandezによってアクティブ化されたペンを参照してください

モアプラズマ

反発効果は、パーティクルアニメーションにも非常に役立ちます。あなたはそれらをさらにスリリングにすることができます。 MoarPlasmaを見てみましょう。

ここでは、マウスカーソルがすべてのパーティクルを別の側に押して怖がらせる、混沌としたアニメーションを見ることができます。デモを楽しむだけでなく、デモを操作することもできます。

JohnChin-JewによるPenMoarPlasmaを参照してください

雪に覆われた粒子

Snowy Particlesは、従来のパーティクルアニメーションが後押しされるもう1つの優れた例です。ペンの作者であるNatは、2つのトリックを使用しました。

まず、マウスカーソルには、単純なドットを雪片に変換する機能があるため、シーンは本当に魔法のように感じられます。次に、小さな忌避効果が追加され、雪の塊がわずかに分散して、独特の雪の結晶が見えるようになります。単に素晴らしい。

NatによるPenparticles.jsの雪を参照してください

リペラー

反発効果が利点をもたらし、鈍いシーンを簡単に贅沢に変換するもう1つの領域は、テキスト効果です。千のドットで作成された単語がどのように目立つかはすでに見てきました。ドットを線に変えて、反発効果ですべてを盛り上げる時が来ました。検討念のためのリペラー。

このプロジェクトは、シンボルが視聴者に向けられた短く細い線でできているという言葉を特徴としています。このように、あなたはその体積の性質をほとんど感じることができます。マウスカーソルをつかんでテキスト上でドラッグすると、線がどのように踊り始めるかがわかります。

テキスト自体が少しシャープで鋭く感じられますが、それらの動作はスムーズで目を楽しませてくれます。その上、線も自然に動くので、構図の一部を揺さぶる小さなそよ風があるように感じます。その結果、シンプルなテキストがショーを実行する真の傑作を楽しむことができます。

Rein van derWoerdのペンリペラーをご覧ください

反発による引力

反発効果は、組成物の細部を押しのけるために使用されますが、それでもそれは完全に磁気的です。あなたはそれから目を離すことはできません。それはその遊び心のある振る舞いで即座に目を引き、ユーザーにシーンと対話するように促します。

観客を勝ち取るのに苦労しているのは、反発効果だけではありません。他の種類のアニメーションやエフェクトと完全に連携して、ユニークで注目を集めるソリューションをもたらします。