Greenshift biedt een onvoorstelbare hoeveelheid en combinaties aan effecten en animaties. Ze allemaal creëren en uitleggen is onmogelijk, maar we laten er hier een aantal zien, met de juiste stappen. Onderaan deze pagina staat ook een uitgebreide van de Greenshift animaties!
Kop 1 met animatie
Kop 2 met animatie
Kop 3 met animatie
Kop 4 met animatie
Uitleg ‘kop met fade animatie’
- Heading Advanced of Text Advanced
- Advanced tab
- Animation type: Fade
- Choose an animation: Default Ease
- Duration: 800 ms
- De 2e kop is identiek, maar met een Delay van 500 ms
- De 3e heeft Animation type: Zoom-in
- De 4e heeft Animation type: Aangepast, met Choose an animation: Ease-in-out-quad, Opacity: 0, met een Delay van 1000 ms om het hier als laatste van de 4 te tonen.
Uitleg ‘grijstoon bij hover’
- Image advanced block
- Advanced tab
- Background/filters options
- Hover tab
- Greyscale 0,74
Uitleg ‘hover and reverse on release’
- Image advanced block
- Advanced tab
- Enable advanced animations
- Animation type ‘Regular’
- Scale 1,1 (groeit 10%)
- Trigger type: observer
- Set direction: To
- Observe type: hover and reverse on release
Uitleg effect ‘move on scroll’
Het hover-grijs is gewoon een class. De beweging:
- Image advanced block
- Advanced tab
- Enable advanced animations
- Animation type ‘Regular’
- Shift Y 100 px (de beweging)
- Trigger type: scroll
- Interpolate animation by Scroll 1 (hoe hoger de waarde hoe meer vertraging)
Je kunt de start en eind positie ook aangeven met:
- Trigger start (0 is onderaan het scherm)
- Trigger end (+=100px is een beweging van +100 px en dan gefixeerd)
Uitleg ‘hover and reverse on release’ met een ander action object
- Button
- Enable advanced animations
- Animation type ‘Regular’
- Scale 1,2 (groeit 20%)
- Trigger type: observer
- Set direction: To
- Observe type: hover and reverse on release
- Koppelen aan de foto bij ‘Custom action object’, klik op icoon en kies bij ‘selector’ het juiste object.
Header met kleur en animatie
Header met kleur en animatie
- Heading Advanced
- Typography
- Tab Gradiënt en kies kleuren
- Tab Advanced
- Tab Animation
- Kies Animation type Zoom in
- Chose animation: ease-in-out-sine
- Duration 800 (ms)
WP News – blijf op de hoogte!
Header break type words
- Heading Advanced
- Tab Advanced
- Tab Animation
- Animation type: Text
- Break type for text: Words
- Shift X 100 px
Video over Greenshift animaties
Als je meer wil weten over Greenshift, klik op de knop.
Zie ook de uitgebreide video om nog verder kennis te maken met de animatie mogelijkheden van Greenshift!
