スライムから泡まで!液体をシュミレートしたリキッドモーション8選

LIQUID

Webデザインと特殊効果は、切っても切れない関係にあります。これまで多種多様な特殊効果が制作されてきましたが、高度な技術を使うことができるいま、ぜひ取り入れたいのが「液体を再現したデザイン(リキッドモーション)」です。

一口に液体といっても、スライムのようなものから泡のようなものまで、さまざまなデザインが可能です。

今回は多様なデザインの中から8つの例をご紹介します。

1. 輝く液体を動かそう

WebGLで作られた、発光する不思議な液体のかたまりが空間に浮かんでいます。

ぜひカーソルで動かしてみてください。

See the Pen
Blob study
by Liam Egan (@shubniggurath)
on CodePen.

2. 暗闇に浮かぶ液体のかたまり

最初にご紹介した例と比べると、こちらはより形がはっきりしています。まるで目の前に浮かんでいるかのような、リアルな液体作品です。

液体の中の模様が、プールのような雰囲気を演出しています。

See the Pen
Shiny Blob | CodePenChallange
by Tibix (@Tibixx)
on CodePen.

3. ゼリーのようなプルプルのボタン

魅力的なデザインをフルスクリーンで展開するのも効果的ですが、小さいボタンでもその実力を発揮できます。

こちらは一見普通のボタンに見えますが、カーソルオンするとゼリーのようにプルプルと動くのが特徴です。

実装にはやや手間がかかるためあまり実用的ではありませんが、小さなUIが大きな力を持っていることは、この作品を見れば明らかでしょう。

See the Pen
Liquid button
by Waaark (@waaark)
on CodePen.

4. クリックするのが楽しくなる水滴ボタン

UXにとって、マイクロインタラクションはとても重要な存在です。

美しいアニメーションとともに、水滴がボタンを満たします。シンプルで効果的なデザインです。

See the Pen
Liquid Radio Button using SVG and GSAP (GreenSock)
by Ryan LaBar (@ryan_labar)
on CodePen.

5. 水がしたたるローディングアイコン

Webデザインにおいて、昔から用いられてきたローディングアイコン。しかし、デザインが退屈になりがちなのがネックです。

そんな中この作品は、水がしたたるような遊び心たっぷりのデザインを、JavaScriptなしで実現しています。飲料会社のWebサイトなどにもぴったりですね。

See the Pen
Liquid Loader
by Onno (@Penno)
on CodePen.

6. ジュースと泡をカスタマイズ

充電中のAndroid端末のアニメーションに触発されたこのスニペットは、スライダーを使用して色やデザインをカスタマイズできます。

泡を塗りつぶしたり、色を変えたりなど、ぜひカスタマイズして楽しんでください。

See the Pen
liquid
by Arturo Morán (@Armolp)
on CodePen.

7. Three.jsで作られたスライムの海

紫色の霧から青い波まで、さまざまなアングルでアニメーションが展開されるこの作品。

色や動きを簡単にカスタマイズでき、未知の惑星でダイビングをしたかのような感覚にさせてくれます。

See the Pen
Liquid Landscape ThreeJS
by Paul J Karlik (@pjkarlik)
on CodePen.

8. 波打つ虹色の液体

レトロとモダンが融合したこの作品は、1960年代のテイストをGLSLのシェーディングで実現しています。

なめらかなアニメーションを作り出しているのは、たった60行のJavaScriptです。

See the Pen
Liquid Rainbow | GLSL
by Johan Karlsson (@DonKarlssonSan)
on CodePen.

おわりに

液体をシュミレートしたリキッドモーションの魅力が、技術不足からあまり発揮されない時代もありました。しかし今の進んだ環境であれば、複雑なアニメーションも可能です。

クロスブラウザで軽量なソリューションは、幅広いデザインを可能にしてくれます。技術を駆使してユニークな作品を作ってみましょう。

(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:じきるう 出典元:speckyboy

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件