Jmpress.js

Szerző: Sallai András
Copyright © 2013, Sallai András
Szerkesztve: 2013, 2014
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Bevezetés

A jmpress.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ó)