際際滷

際際滷Share a Scribd company logo

JUG073 - Interactions Page Builder Pro

Download as PPTX, PDF
A
Arkomat

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

1 of 19
Download to read offline
Interactions VANAF SP PAGE BUILDER 3.6
Interactions
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
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)
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.
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.
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)
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
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
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)
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
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
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
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
Interactions BLUR Dit effect vervaagt een element. Het heeft net als Opacity maar 1 control Waarde 0 = volledig zichtbaar Waarde 100 = volledig vervaagt
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
Interactions Voorbeelden aan de hand van Organic Interactieve lay-out bundel die in SP Page Builder Pro 3.6 zit
Interactions
Interactions

More Related Content

JUG073 - Interactions Page Builder Pro

  • 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