Einen interaktiven Schalter mit Progressive Blur und Verläufen erstellen

Lektion 8 von 15HanaEinsteiger4 Min.

In diesem Tutorial zeigen wir dir, wie du einen interaktiven Schalter erstellst – zu 100 % in Hana, mit Progressive Blur, Verläufen und einem Mouse-Hover-Event für die Interaktion. Ein spannendes Design, das sich in vielen Projekten einsetzen lässt, und wir begleiten dich bei jedem Schritt.

Remixe diese Demo hier: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

Das lernst du

  1. 0:00Intro
  2. 0:15Die Grundform erstellen
  3. 0:39Einen Verlauf hinzufügen
  4. 1:04Einen Layer-Blur-Effekt hinzufügen
  5. 1:46Trigger erstellen
  6. 1:57Das Mouse-Hover-Event und Übergänge hinzufügen
  7. 2:24Die weiße Kontur erstellen und States hinzufügen
  8. 3:07Übergänge für die Kontur festlegen
  9. 3:35Abschluss

Weitere Ressourcen