CSS＆JavaScriptで作成した8つの素晴らしいテクスチャー＆パターンエフェクト

テクスチャとパターンは、長い間ウェブデザインの一部として存在してきました。控えめな背景として使用する場合でも、コンテンツの焦点として使用する場合でも、それらは私たちの作品の雰囲気を設定する役割を担っています。

 

現在、進化し続けるウェブテクノロジーのおかげで、テクスチャやパターンを使用することでさらに大きな効果を得ることができます。それらはもはや脇役としての表示に限定される必要はなくなりました。今では、モーションやシェーディングの手法と組み合わせて、驚異的なグラフィック機能として、デザインに貢献することができます。

 

私たちは、クラシックアなセットを新しくエキサイティングな方法で使用する、非常にクリエイティブなコードスニペットのコレクションをまとめました。ご覧になった後は、数分間複雑な装置などは操作しないでくださいね！あなたの脳が目の錯覚を起こしている場合がありますから。

 

大きなトーラス、小さなコード

 

トーラスの数学的概念は、革命的で魅力的なリング状の円環です。この例は、ただ素晴らしいとしか言えません。これは、誰が説明するよりもわかりやすい概念をデモンストレーションしています。さらに、わずか33行のJavaScriptを使用して作成可能です。あなたも、これを数時間見つめたいという衝動に駆られるかもしれません。

 

See the Pen
inner torus by Ryan Thavi (@rthavi)
on CodePen.

 

それはペトリ皿ですか？

 

この“円充填”アニメーションの美しい詳細以外にも、非常に有用な現実世界への適応も考えられます。たとえば、バクテリアがどのように成長するかを示したり、点描の絵を再現したりするためにも使用することできます。とにかく、見ていてとても魅力的です。

 

See the Pen
Text Circle Packing by Samarth Gulati (@samarthg)
on CodePen.

 

夜の光

 

テクスチャは、まだまだ素晴らしい背景にもなります。そして、輝く（そして時折流れる）星でいっぱいのこの夜空は、特殊効果が圧倒的である必要がないことを示しています。使いやすさを保ちながら、動きのあるものを作ることが可能です。

 

See the Pen
Glowing Stars by Francesco Allegrini (@francesco-allegrini)
on CodePen.

 

ダイナミックディスコボール

 

これはかなり面白い例です。 Three.jsでの反射マッピングを使用して、カーソルを動かすと変化するディスコボールのようなサーフェスを作成できます。上下に動かすとなめらかな動きに変化し、横に動かすとテクスチャの“でこぼこ”が増します。

 

See the Pen
GLSL: Chrome by Liam Egan (@shubniggurath)
on CodePen.

 

木を育てる

 

ここに、手描きのパラパラマンガを彷彿とさせるアニメーションツリーがあります。走り書きの背景が猛烈に動き回ると、木が芽を出し、葉を形成します。さらに面白いのが、HTML5 CanvasとJavaScriptのみを使用する点です―なので画像は必要ありません。

 

See the Pen
A Tree by Mustafa Enes (@pavlovsk)
on CodePen.

 

たくさんの点

 

最初、この例が宇宙の出来事映像なんではと、間違えてしまうかもしれません。実際の役目は、WebGL2を使用して変換フィードバックパーティクルを作成するスクリプトです。ここには、カーソルの動きに反応する500,000個のカラーシフトパーティクルがあります。これが実際に宇宙で起こっているものだったら、すぐ逃げたほうがいいでしょう。

 

See the Pen
1 million particles. WebGL2 Transform Feedback by Karol Stopyra (@stopyransky)
on CodePen.

 

数学に戻る

 

私に対数の概念を説明させないでくださいね。アニメーション形式で見ると、対数は非常に魅力的であるということだけ知っておいてください。カラフルで形を変えるテクスチャーは、信じられないほどレトロな雰囲気を放っています。ボーナスとして、アニメーションをクリックすると新しい効果が作成されます。

 

See the Pen
Art of Logarithm by jagarikin (@jagarikin)
on CodePen.

 

太陽の光

 

これであなたが笑顔にならなかったら、上記の謎の数学を勉強したほうがいいかもしれません。刻々と変化する背景の上に回転する形が重ねられており、ここでは多くのことが一気に起こっています。おそらくページの背景にはあまり適していませんが、バナーやヒーローエリアに焦点を当てることは確かなデザイン例でしょう。

 

See the Pen
Chamaleon Mood by Bailh (@cathbailh)
on CodePen.

 

変化のパターン

 

上記の例では、基本的なもの（形状、パターンなど）を取り、それを完全に別のものに変換しています。これらのスニペットは、カラフルでインタラクティブで説得力があります。このように、これらがコーディングの知識と創造性の適切な組み合わせがどんなことを達成できるかの証明なのです。