Benutzer-Werkzeuge

Webseiten-Werkzeuge


techniken:praesi:sonstiges

Weitere Features von impress.js

Folien sichtbar/unsichtbar

impress.js. kennt drei CSS Klassen, die du frei definieren kannst:

  • active für die derzeit sichbare Folie
  • past für schon gesehene Folien
  • future für noch kommende Folien

z.B.

  .future p{
   display: none;    
  }
  .past p{
   display: none;    
  }

Macht alle <p> Tags in schon gesehenen und zukünftigen Folien unsichtbar.

3D Effekte

Mit dem Attribut data-perspective kannst du 3D Effekte hinzufügen. Der Zahlenwert gibt die Entfernung von der z Achse (0) zum Betrachter an. Die angabe erfolgt im umfassenden impress Tag.

  <div id="impress" data-perspective="500">
  
     <div id="slide1" class="step slide" data-x="-600" data-z="400"  data-rotate-y="-90" >
          <div><h2>Slide 1</h2></div>
     </div>
    
     <div id="slide2" class="step slide" data-x="-1000" data-rotate-y="-180" >
          <div><h2>Slide 2</h2></div>
      </div>
          
  </div>



CSS Informationen

Unterschiedliche Browser stellen CSS oft unterschiedlich dar. Impress.js trägt dem Rechnung, indem es an den entscheidenden Stellen CSS Befehle nach Browser unterscheidet. Gehst du hinter die Kulissen von impress.js erkennst du das an den Prefixen einiger Befehle.

  • -ms- steht für den Internet Explorer
  • -moz- steht für Firefox
  • -webkit- steht für Chrome und Safari
  • -o- steht für Opera

—- Präsentieren mit impress.js

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