Interactieve effecten ontwerpen met progressive blur en zachte gradiënten

Les 7 van 15HanaBeginner9 min

In deze tutorial verkennen we verschillende stijlen en technieken om zachte, verfijnde designs te maken met vloeiende gradiënten en progressive blur, en hoe je die in Hana omzet in interactieve ervaringen.

We beginnen met uitleg over het toevoegen van gradiënten en blur-effecten aan vormen en gaan daarna verder met interactieve elementen, zoals hover-animaties, effecten die de cursor volgen, animaties in een loop en gelaagde blur-effecten. Alles is klaar om in je webproject in te sluiten, zonder code! 👌

Demoscènes: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

Wat je leert

  1. 0:00Intro
  2. 0:15Eenvoudig design met gradiënten
  3. 2:57Layer blur toevoegen
  4. 3:41Een Mouse Hover-interactie maken
  5. 5:28Een interactief blur-effect op tekst maken
  6. 6:44Een radiale gradiëntanimatie in een loop maken
  7. 7:43Een gradiënt- en blur-effect maken dat je cursor volgt

Gerelateerde bronnen