Webデザインにおけるブロブベースのアニメーション背景の攻撃

公開: 2020-10-26

アニメーションの背景は、最新のWebサイトで人気のある機能です。それはもはやトレンドや特別なものではありません。これは、最近のヒーローエリアを飾る実行可能な方法の1つにすぎません。ブラウザの互換性にはまだ問題がありますが、ソリューションはそれ自体のニッチを切り開くことができました。

アニメーションにはさまざまな種類があります。あなたはつまずくことができます：

パーティクルアニメーション;
万華鏡のようなアニメーション;
抽象的な3Dアニメーション;
スムーズな幾何学的アニメーションなど。

数年前は星座に着想を得た粒子アニメーションがねぐらを支配していましたが、今日ではブロブ型のアニメーションがクリエイティブチームの心を刺激します。あなたは何ができますか？液体の振る舞いは魅力的です。大きなドロップが空間内をスムーズに移動する様子を示すモーフィングルーチンは、オンラインオーディエンスに簡単に勝ち、Webサイトをリードします。

この主流の手法を活用するために、独自のブロブ型アニメーションを作成する方法のヒントを提供する優れたコードスニペットのコレクションを提供します。これは、従来のツールまたは新しいツールのいずれかを使用して行うことができます。それでは、次のプロジェクトに最適なものを見つけましょう。

UweChardonによるBlobアニメーション

この人気のあるソリューションに対するUweChardonの見解は、実用的で刺激的です。シンプルでフラットなブロブが特徴で、美しいオレンジ色と滑らかなエッジがきれいな環境に配置されています。彼はなんとか液体の振る舞いをかなりうまく模倣することができました。

その結果、非常に印象的なシンプルな形状と複雑な動作の優れた組み合わせが実現します。

UweChardonによるペンブロブアニメーションの純粋なCSSを参照してください

AshtonHolgateによるBlob

前の例は、不規則な形状と比較的表現力豊かなモーフィングを備えた従来の種類のブロブを示しています。しかし、アシュトン・ホルゲートによるこのプロジェクトは、円とほぼ接しているより神聖な形に固執しており、変化はほとんど目立たない。それにもかかわらず、それはまた傑出しているように見えます。

さらに、アーティストはテキストをいじって、バブルの領域に当たったときにその色を反対の色にシフトするように強制しました。

AshtonHolgateによるPenBlobを参照してください

FabioOttavianiによるバウンス液体ローダー

Fabio Ottavianiは、ブロブアニメーションに固有のねばねばした動作の遊び心のある性質を実践しました。彼の泡は小さいですが、それでもその愛らしいモーフィングと面白いバウンドでかなりのインパクトを生み出します。

ペンプロジェクトのネームプレートには「ローダー」と書かれていますが、背景の装飾的なディテールに簡単に変えることができます。アーティストはJavaScriptの魔法をまったく使用していないため、これを行うために知っておく必要があるのはHTMLとCSSだけです。頭いい。

FabioOttavianiによるペンバウンス液体ローダーを参照してください

ShawによるCanvasBlob Test

前の例とは異なり、このドロップは純粋にJavaScriptによって生成されます。ですから、エキサイティングなソリューションに飛び込み、グラフィックを複雑に操作する準備をしてください。さらに、コンセプトは他のコンセプトとは異なり、その原始的な外観と、全体的に穏やかな雰囲気をもたらす非常に滑らかで落ち着いた動作が特徴です。

それはかなり普遍的で中立的です。したがって、多くのプロジェクトの完璧な背景アニメーションになる可能性があります。

Shawによるペンキャンバスブロブテストを参照してください

ジェフリーによるブロブ

ジェフリーによるこのソリューションは、2つのトレンドの勝利の組み合わせです。ここでは、最近非常に人気のあるむらのある背景と、他のオプションよりも優勢な流動的な動作を見つけることができます。

コードスニペットは、HTML、CSS、JavaScriptで作成されています。さまざまなブラウザやデバイスで一貫しているように見えます。アーティストは、巨大なブロブとの相互作用をリアルで非人工的なものに感じさせる基本的なスプリングアルゴリズムを使用しています。

ブロブはシーンの半分を占めていますが、見物人を圧倒することはありません。スムーズで穏やかな行動は、この目立たないことの背後にあります。

ジェフリーのペンブロブを見る

CharlotteDannによるブロブ

1つのブロブでは適切な印象を作成するのに十分でない場合は、いつでも数十のブロブを選択できます。 Charlotte Dannは、独創的なコードスニペットを使用して、一般的な効果を損なうことなく、訪問者を圧倒することなく、これを行う方法を示します。

彼女のコードスニペットは、目の保養にすぎません。それは互いに相互作用するたくさんの小さな動くブロブを特徴とします。それぞれが小さな光のスポットのように見えます。一緒に、それらはすべての面で暖かさをしみ出させる1つの巨大な塊を形成します。

CharlotteDannによるペンブロブを参照してください

それでは、フラットな世界から3次元の世界に移りましょう。

GeorgiNikoloffによるBlob

GeorgiNikoloffによるBlobはその一例です。鮮やかなカラーリング、ハイテクな外観、ダイナミックな動作ですぐに目を奪われます。開発者は、WebGL、GLSL、およびシェーダーを活用して、高度なテクノロジーを最大限に活用します。このソリューションはブラウザの互換性の影響を受けますが、刺激的なように見えます。

GeorgiNikoloffによるペンブロブを参照してください

ダニエルデルコアによる実験＃6

Daniel Del Coreは、オンラインの視聴者に、シンプレックスノイズを操作し、注意深く再現されたテクスチャでそれを整える方法を示します。その結果、キャンディーに着想を得たペイントのようなボールができあがります。動きはかなり速いですが、すぐに目が離せないほど魅惑的です。

Daniel Del Coreによるペン実験＃6を参照してください

EliFitchによる偽の粒子ブロブ

大胆な個性とスパンデックスに夢中になっている80年代のポップスターのカリスマ性を備えた前の例とは異なり、これは控えめなテクノの未来のもののように感じます。ブロブは、3Dの外観を実現するために、いくつかの角度で明るくなる小さな粒子で構成されています。

予想通り、アーティストはThree.jsの魔法と、手続き型テクスチャを使用した独創的な作品を使用して、このコンセプトを実現しています。

Eli Fitchによるペン＃3December偽の粒子ブロブを参照してください

EdwinChenによるCSSBlob Generator

コレクションは、EdwinChenによるCSSBlobGeneratorで終了します。タイトルが示すように、このペンは、ブロブの形を作成できる小さな遊び場を備えています。

ここには、各境界線に半径を割り当てることができる小さなパネルがあります。静的でフラットですが、JavaScriptを使用して、結果を簡単にコピーして動作させることができます。

EdwinChenによるPenCSS BlobGeneratorを参照してください

落ち着いた雰囲気にぴったりの形

液体の挙動の滑らかで穏やかな性質が最近人気を博していることは驚くべきことではありません。森の中を流れる小さな魅惑的な小川のように、それはあなたを魅了し、絶えず変化するオンライン世界の静けさの島として機能します。

ブロブベースのアニメーションは、現代のプロジェクトに役立つ運命にあります。彼らは確かに注目を集めていますが、目立たないです。エレガントでフラットな実現でも贅沢な3Dでも、落ち着いた雰囲気を簡単に確立できます。

それは経験を豊かにし、背景を飾り、同時にコンテンツに道を譲ります。これらの背景は、視覚データとテキストデータのバランスを保つのに役立ちます。