Presentatie over de mogelijkheden van Interactions binnen de Page Builder Pro suite van Joomshaper

1. Interactions
VANAF SP PAGE BUILDER 3.6

2. Interactions

3. Interactions
Doel
Website levendiger maken door Interactions te
gebruiken bij de addons in SP Page Builder
Methode
Met Interactions kun je:
 Bewegingen toevoegen
 Attractieve transities maken
 Animaties toevoegen

4. Interactions
Vormen van Interactions
We kennen de volgende vormen Interactions in SP Page Builder:
 Bewegen (Move)
 Schalen (Scale)
 Roteren (Rotate)
 Scheef trekken (Skew)
 Doorzichtigheid (Opacity)
 Vervagen (Blur)
 3D kantelen (3D Tilt)

5. Interactions
Instellingen van Interactions
De genoemde vormen van Interactions hebben elk twee instellingen:
Scroll effecten:
om animaties te maken bij het scrollen van een webpagina. Bewegingseffecten worden
gedefinieerd door een startpunt en een eindpunt.
Muis effecten:
Voor het creëren van transities die geactiveerd worden door er met de muis overheen te
bewegen.

6. Interactions
Waar kunnen we interactions gebruiken?
Antwoord
Op iedere webpagina in alle gebruikte Page
Builder addons.
Je kunt Interactions toevoegen door in de
frontpage editor naar de edit mode van de
pagina te gaan en de tab “Interactions” aan
te klikken naast de tab “Advanced”.

7. Interactions
Hoe werken de controls in de Interactions tab
Antwoord
1. Controls
Alle controls hebben as-waarden. We kennen
de X-as (horizontaal), Y-as (verticaal) en Z-as
(loodrecht op X- en Y-as)

8. Interactions
Hoe werken de controls in de Interactions tab
2. Timeline
Daarnaast bestaat er een timeline in iedere
Interaction. De timeline verdeeld de “viewport”
(het zichtbare gebied van een webpagina) van
0% tot 100%.
0% is de onderkant van het scherm
100% is de bovenkant van het scherm

9. Interactions
Hoe werken de controls in de Interactions tab
3. Draaipunt van X- en Y-as (Transform Origin)
Werkt als draaipunt voor een effect. Hiermee
kun je het startpunt van het effect bepalen.
Voorbeeld:
X-as rechts, Y-as onder -> startpunt is hoek
rechtsonder van het element waarop de
Interaction wordt gebruikt

10. Interactions
MOVE
Beweegt een addon over de X en Y as in de
opgegeven richting
X = hor | Y= vert
Positieve waarde = rechts (beneden)
Negatieve waarde = links (boven)
Interactions
MOVE
Beweegt een addon over de X en Y as in de
opgegeven richting
X = hor | Y= vert
Positieve waarde = rechts (beneden)
Negatieve waarde = links (boven)

11. Interactions
SCALE
Vergroten of verkleinen van een addon in relatie
tot zijn absolute positie
X = hor | Y= vert
Positieve waarde = vergroten
Negatieve waarde = verkleinen
Interactions
SCALE
Vergroten of verkleinen van een addon in relatie
tot zijn absolute positie
X = hor | Y= vert
Positieve waarde = vergroten
Negatieve waarde = verkleinen

12. Interactions
ROTATE
Roteert een element. Om de rotatie te zien heb
je twee effecten op de timeline nodig.
Een startpunt en eindpunt moeten worden
bepaald
X-waarde = vert flip
Y-waarde = hor flip
Z-waarde = rotatie

13. Interactions
SKEW
Scheef trekken van een twee-dimensionaal vlak.
Skew heeft twee controls
X-as (horizontaal)
Positieve waarde = tilt naar rechts
Negatieve waarde = tilt naar links
Zelfde voor Y-as maar verticaal
Interactions
SKEW
Scheef trekken van een twee-dimensionaal vlak.
Skew heeft twee controls
X-as (horizontaal)
Positieve waarde = tilt naar rechts
Negatieve waarde = tilt naar links
Zelfde voor Y-as maar verticaal

14. Interactions
OPACITY
Hiermee kan de doorzichtigheid van een element
worden veranderd. Heeft maar 1 control
Waarde 0 = volledig onzichtbaar
Waarde 1 = volledig zichtbaar
Voorbeeld
Drie effecten gecombineerd te weten Opacity,
Move en Rotate

15. Interactions
BLUR
Dit effect vervaagt een element. Het heeft
net als Opacity maar 1 control
Waarde 0 = volledig zichtbaar
Waarde 100 = volledig vervaagt

16. Interactions
3D Tilt
Is een 3D muis over effect. Het heeft 1 control en
wordt als volgt gebruikt:
Met Tilt Direction wordt bepaald wat er gebeurd
tijdens de mouse-over.
Forward Direction beweegt het element naar de
muis toe.
Opposite Direction doet uiteraard het
tegengestelde

17. Interactions
Voorbeelden aan de hand van
Organic
Interactieve lay-out bundel die
in SP Page Builder Pro 3.6 zit

18. Interactions

19. Interactions