< Bemutató

Jmpress.js

Szerző: Sallai András

Copyright © Sallai András, 2013, 2014

Licenc: GNU Free Documentation License 1.3

Web: http://szit.hu

Bevezetés

A jimpress.js a jQuery alapú bemutató készítő keretrendszer. Egy dián belül képes az egyes szövegrészek külön-külön beúsztatására is. Beállíthatók billentyűkódok.

Indulás

Elkészítjük a gyökérelemet:

<div id="jmpress"> </div>

Hozzáadjuk a scriptek meghívását:

<script src="js/jquery-1.11.0.min.js"></script> <script src="js/jmpress.js"></script> <script> $("#jmpress").jmpress(); </script>

Az utolsó script elemek között hívjuk meg a jmpress-t, a jmpress azonosítójú elemre. Az elem azonosítója, természetesen más is lehet.

Diák

<div id="jmpress"> <div id="dia1" class="step">Dia 1</div> <div id="dia2" class="step">Dia 2</div> </div>

Egy dia lehetséges beállításai

<div id="dia1" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6"> Dia 1 </div>
Attribútum	Leírás
data-x	Derékszögű koordináta: x pozíció
data-y	Derékszögű koordináta: y pozíció
data-z	Derékszögű koordináta: z pozíció
data-r	Sarok koordináta rendszer: rádiusz
data-phi	Sarok koordináta rendszer: szög (indulás felülről az óra járásával megegyezően).
data-scale	Az elemke aránya (scale-y, scale-y, scale-z is).
data-rotate	A forgatás foka.
data-rotate-x	Forgatás szöge x tengely körül.
data-rotate-y	Forgatás szöge y tengely körül.
data-rotate-z	Forgatás szöveg z tengely körül.
data-delegate	Aktivitás egy másik szelektorhoz rendelése.
data-src	Dinamikus tartalom betöltése.
data-exclude	Ne használd a következő lépést, de követheted az parancs irányát
data-next	A következő lépés szelektora
data-prev	Az előző lépés szelektora
data-template	Apply a template, which must be defined before init jmpress.
data-jmpress	Egyéni animáció alkalmazása

Link

http://jmpressjs.github.io/jmpress.js (Weboldal)

http://jmpressjs.github.io/docs/ (Dokumentáció)