Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JUG073 - Interactions Page Builder Pro

386 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

JUG073 - Interactions Page Builder Pro

  1. 1. Interactions VANAF SP PAGE BUILDER 3.6
  2. 2. Interactions
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Interactions Voorbeelden aan de hand van Organic Interactieve lay-out bundel die in SP Page Builder Pro 3.6 zit
  18. 18. Interactions
  19. 19. Interactions

×