プログレッシブブラーとグラデーションでインタラクティブなスイッチをつくる

Hana初級4分

このチュートリアルでは、プログレッシブブラーとグラデーション、そしてインタラクションのためのマウスホバーイベントを使って、100%Hanaでつくるインタラクティブなスイッチのつくり方を紹介します。さまざまなプロジェクトに使える面白いデザインで、各ステップを順に解説します。

このデモをリミックス:https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

学べること

  1. 0:00イントロ
  2. 0:15ベースのシェイプをつくる
  3. 0:39グラデーションを追加する
  4. 1:04レイヤーブラーのエフェクトを追加する
  5. 1:46トリガーをつくる
  6. 1:57マウスホバーイベントとトランジションを追加する
  7. 2:24白いストロークをつくってステートを追加する
  8. 3:07ストロークのトランジションを設定する
  9. 3:35エンディング

関連リソース

関連するチュートリアル

すべてのチュートリアル