Benutzer-Werkzeuge

Webseiten-Werkzeuge


techniken:praesi:position

Positionieren der Folien

Wie in HTML üblich, werden Informationen in Form von Attributen übergeben. Zum Positionieren der einzelnen Slides stehen folgende Attribute zur Verfügung:

  • data-x
  • data-y
  • data-z
  • data-scale
  • data-rotate

Die Angaben beziehen sich immer auf die Mitte der Folie.

Der erste div Container nach dem Präsentationscontainer ist eure erste Folie.

  <div id="folie01" class="step slide">Inhalt Folie 1 </div>

Mit Hilfe der Attribute kannst du die Folie nun frei positionieren:

  <div id="folie01" class="step slide"  data-x="-1000" data-y="-1000" data-scale="3">Inhalt Folie 1 </div>



data-x

von links nach rechts erhöhen sich die x-WErte

data-y

von oben nach unten erhöhen sich die y-Werte

data-z

jeh größer die Zahl, desto weiter „oben“ befindet sich die Folie

data-scale

Jede Folie kann skaliert werde. Der Standardwert ist 1. Je größer die Zahl, desto größer der Zomm. Einen zoom-in Effekt erreichst du, indem du den Wert von einer Folie zur anderen vergrößerst. Zoom-out erreichst du durch verkleinern des Wertes.

data-rotate

Mit diesem Attribut kannst du Folien rotieren.

data-rotate-x

Deine Folien rotieren den angegebenen Wert als Grad um die x-Achse

  <div id="folie01" class="step slide" data-rotate-x="90">Folieninhalt</div>

data-rotate-y

Deine Folien rotieren den angegebenen Wert als Grad um die y-Achse

  <div id="folie01" class="step slide" data-rotate-y="90">Folieninhalt</div>

data-rotate-z

oder data-rotate Deine Folien rotieren den angegebenen Wert als Grad um die z-Achse

  <div id="folie01" class="step slide" data-rotate-z="90">Folieninhalt</div>
  oder
  <div id="folie01" class="step slide" data-rotate="90">Folieninhalt</div>

Präsentieren mit impress.js

techniken/praesi/position.txt · Zuletzt geändert: 10/11/2014 17:01 von 127.0.0.1