背景に使える”動く液体”のコードスニペット9選。控えめな丸いしずく表現が、見る人の心をうるおす

現代のWebサイトにおいて、もはや標準となりつつある「アニメーション付き背景」。

ブラウザの互換性という課題があるものの、至るところで見かけるようになりましたね。

パーティクル（粒子）、幾何学的、万華鏡風など、さまざまなアニメーションがありますが、今回はWebサイトの背景に使える「動く液体」をシュミレートしたコードスニペット9選をご紹介します。

1. Blob animation by Uwe Chardon

動作が軽く、かつ適度なインパクトのあるアニメーション背景。

滑らかな動きとシンプルな形状の組み合わせが魅力的です。液体の動きをうまく模倣しています。

See the Pen Blob animation pure CSS by Uwe Chardon (@uchardon) on CodePen.

Blob animation by Uwe Chardon

2. Blob by Ashton Holgate

こちらはほぼ正円の液体で、動きも控えめです。しかしカーソルをあわせると、形状がインタラクティブに変化します。

しずくに重なった部分の文字色が反転しているのもポイントです。

See the Pen Blob by Ashton Holgate (@AshHolgate) on CodePen.

Blob by Ashton Holgate

3. Bouncing Liquid Loader by Fabio Ottaviani

小ぶりなしずくが画面を跳ねまわる様子は、おもわず目を奪われます。

HTMLとCSSだけで作られているこの作品は、背景の装飾にぴったりです。

See the Pen Bouncing Liquid Loader by Fabio Ottaviani (@supah) on CodePen.

Bouncing Liquid Loader by Fabio Ottaviani

4. Canvas Blob Test by Shaw

さきほどの作品とは逆に、JavaScriptのみで作られてたこちらの作品。カスタマイズ次第で複雑な操作が可能です。

背景に使うと、落ち着いたアニメーションが穏やかな雰囲気を演出してくれるはず。幅広いプロジェクトに活用できそうですね。

See the Pen Canvas Blob Test by Shaw (@shshaw) on CodePen.

Canvas Blob Test by Shaw

5. Blob by Jeffrey

「背景にスポットで柄を入れるアイデア」と「液体表現」という、ふたつのトレンドを組み合わせた作品。

HTML、CSS、JavaScriptを総動員して作られており、あらゆるブラウザやデバイスにおいて一貫したデザインを保ちます。

カーソルをしずくに近づけると、インタラクティブに反応。動きはとても自然で、人工的な印象を与えません。液体は画面の半分以上を占めていますが、動きが穏やかで控えめなので、悪目立ちしません。

See the Pen Blob by Jeffrey (@LSArt) on CodePen.

Blob by Jeffrey

6. Blobs by Charlotte Dann

アニメーションがついた巨大な光の塊は、発光する液体がいくつも融合したものです。

液体同士は互いに影響しあっており、それがユニークな動きを生み出しています。

See the Pen Blobs by Charlotte Dann (@pouretrebelle) on CodePen.

Blobs by Charlotte Dann

7. Blob by Georgi Nikoloff

鮮やかな色彩と近未来的なデザインが目をひく作品。WebGL、GLSL、シェーダーなど、高度な技術を最大限に活用して作られています。

ブラウザの互換性という課題はあるものの、すばらしい出来栄えですね。

See the Pen blob by Georgi Nikoloff (@gbnikolov) on CodePen.

Blob by Georgi Nikoloff

8. Experiment #6 by Daniel Del Core

シンプレックスノイズ（Simplex noise）を取り入れた、スタイリッシュな液体表現。

特徴的なテクスチャは、キャンディに着想を得ているとのこと。そのすばやい動きを思わず目で追ってしまう、魅力的な作品です。

スクロールにより、拡大／縮小ができます。

See the Pen Experiment #6 by Daniel Del Core (@danieldelcore) on CodePen.

Experiment #6 by Daniel Del Core

9. Fake particle blob by Eli Fitch

小さな粒子で構成された近未来的な液体デザイン。

Three.jsとプロシージャルテクスチャを用いた、ユニークな作品です。

See the Pen #3December fake particle blob by Eli Fitch (@elifitch) on CodePen.

Fake particle blob by Eli Fitch

おわりに

静的でフラットなものから、動的な3Dのものまで、背景に使える液体のデザインはさまざま。動きを工夫してエレガントな雰囲気にすれば、目をひきつつも悪目立ちはしない、優秀な背景になってくれるはずです。

背景を効果的に装飾しながらコンテンツも引き立てるしずくの背景は、テキストとの相性も抜群。ぜひ次のプロジェクトに取り入れてみてください。

執筆：Nataly Birch
翻訳：Nakajima Asuka
編集：内田一良（じきるう）

こちらもおすすめ！▼