プログレッシブブラーとなめらかなグラデーションでインタラクティブなエフェクトをデザインする

Hana初級9分

このチュートリアルでは、なめらかなグラデーションとプログレッシブブラーを使って、やわらかく洗練されたデザインをつくるさまざまなスタイルとテクニック、そしてそれをHanaでインタラクティブな体験に変える方法を探ります。

まずシェイプにグラデーションやブラーエフェクトを加える方法を説明し、続いてホバーアニメーション、カーソルを追いかけるエフェクト、ループアニメーション、重ねたブラーエフェクトなどのインタラクティブな要素をつくります。どれもそのままWebプロジェクトに埋め込めて、コーディングは不要です!👌

デモシーン:https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

学べること

  1. 0:00イントロ
  2. 0:15グラデーションを使ったシンプルなデザイン
  3. 2:57レイヤーブラーを追加する
  4. 3:41マウスホバーのインタラクションをつくる
  5. 5:28テキストにインタラクティブなブラーエフェクトをつくる
  6. 6:44ループする放射状グラデーションのアニメーションをつくる
  7. 7:43カーソルを追いかけるグラデーションとブラーのエフェクトをつくる

関連リソース

関連するチュートリアル

すべてのチュートリアル