Overgangen voorbeelden

Samenvatting

Overgangen maken je website levendiger. In dit artikel vind je vijf praktische voorbeelden die je meteen kunt toepassen. Elk voorbeeld legt stap voor stap uit wat je moet instellen, zodat je er direct mee aan de slag kunt.

Hoe werkt het

De basisstappen zijn altijd hetzelfde

Voor elk voorbeeld hieronder geldt dezelfde werkwijze:

1. Selecteer het element in de editor
2. Ga naar het tabblad Overgangen
3. Klik op + om een nieuwe overgang toe te voegen
4. Stel de eigenschap, duur en timing in
5. Bekijk het resultaat in de preview

Voorbeeld 1: Knop wordt iets doorzichtig bij hover

Als een bezoeker met de muis over een knop gaat, wordt de knop iets doorzichtiger. Dit geeft een subtiel signaal dat de knop klikbaar is.

Wat stel je in? Eigenschap: Ondoorzichtigheid (opacity) | Duur: 0,3s | Timing: Vloeiend

Stappen:

1. Selecteer de knop
2. Ga naar Opmaak → Mouseover en zet de ondoorzichtigheid op 80%
3. Ga naar Overgangen → klik +
4. Kies eigenschap Ondoorzichtigheid, duur 0,3s, timing Vloeiend

Voorbeeld 2: Afbeelding zoomt langzaam in bij hover

Als een bezoeker met de muis over een afbeelding gaat, vergroot deze subtiel. Dit effect wordt veel gebruikt bij portfolio's en productoverzichten.

Wat stel je in? Eigenschap: Schaal (transform) | Duur: 0,4s | Timing: Vloeiend

Stappen:

1. Selecteer de afbeelding
2. Ga naar Opmaak → Mouseover en zet de schaal op 1.05 (dat is 5% groter)
3. Ga naar Overgangen → klik +
4. Kies eigenschap Schaal, duur 0,4s, timing Vloeiend

Voorbeeld 3: Element schuift het beeld in bij scrollen

Een element dat van onder het scherm omhoog schuift als de bezoeker naar beneden scrollt. Dit geeft je pagina een professionele, opgebouwde uitstraling.

Wat stel je in? Eigenschap: Verticale verplaatsing (transform) | Duur: 0,5s | Timing: Vloeiend

Stappen:

1. Selecteer het element
2. Ga naar Instellingen en kies een scroll-effect (bijv. "Inschuiven van onder")
3. Ga naar Overgangen → klik +
4. Kies eigenschap Verticale verplaatsing, duur 0,5s, timing Vloeiend
5. Test op zowel desktop als mobiel

Voorbeeld 4: Achtergrondkleur verandert vloeiend bij hover

De achtergrondkleur van een kaart of blok verandert geleidelijk als je er met de muis overheen gaat. Dit werkt goed voor klikbare elementen.

Wat stel je in? Eigenschap: Achtergrondkleur | Duur: 0,3s | Timing: Vloeiend

Stappen:

1. Selecteer het element (bijv. een kaart of blok)
2. Ga naar Opmaak → Mouseover en stel een andere achtergrondkleur in
3. Ga naar Overgangen → klik +
4. Kies eigenschap Achtergrondkleur, duur 0,3s, timing Vloeiend

Voorbeeld 5: Tekst schuift omhoog bij hover op een kaart

De tekst in een kaart schuift een klein beetje omhoog als iemand over de kaart gaat. Dit trekt op een subtiele manier de aandacht.

Wat stel je in? Eigenschap: Verticale verplaatsing | Duur: 0,25s | Timing: Vloeiend

Stappen:

1. Selecteer het tekstelement in de kaart
2. Ga naar Opmaak → Mouseover en zet de verticale verschuiving op -5px (dat is 5 pixels omhoog)
3. Ga naar Overgangen → klik +
4. Kies eigenschap Verticale verplaatsing, duur 0,25s, timing Vloeiend
5. Je kunt dit combineren met een schaduweffect op de kaart zelf voor nog meer effect

Tips

• Houd het kort: overgangen van 0,2 tot 0,5 seconden voelen het meest natuurlijk aan
• Minder is meer: niet elk element heeft een overgang nodig. Kies bewust.
• Denk aan mobiel: hover-effecten werken niet op telefoons en tablets, want daar heb je geen muis. Zorg dat je website er ook zonder hover goed uitziet.
• Combineer effecten: overgangen werken mooi samen met schaduwen of schaaleffecten

Wanneer gebruik je dit

• Je wilt praktische voorbeelden van overgangen om direct toe te passen
• Je zoekt inspiratie voor hover-effecten op knoppen, afbeeldingen of kaarten
• Je wilt leren hoe je overgangen stap voor stap instelt