Tartalomjegyzék

< Bemutató

Impress.js

Az impress.js

Az impress.js egy JavaScript keretrendszer, amely bemutatók létrehozására készült.

Az impress.js letölthető a következő helyről:

Telepítés npm csomagkezelővel: 

npm install impress.js

Telepítés után: 

node_modules/impress.js/js/impress.js

Felépítés

<div id="impress">
 
Ide jön a tartalom (újabb divek)
 
</div>
 
<script src="js/impress.js"></script>
<script>impress().init();</script>

Az impress.js beillesztése és meghívása a fájl végén történik. Egy újabb script elemben meghívjuk az impress() metódust, majd azon meghívjuk az init() metódust a példa szerint.

Diák

A burkoló elemek közzé újabb diveket veszünk fel. Ezek a divek lesznek az egyes diák. 

<div id="impress">
 
    <div id="dia1" class="step">tartalom 1</div>
    <div id="dia2" class="step">tartalom 2</div>
 
</div>

Minden diát jelképező div kap egy step osztályt; opcionálisan azonosítót is kaphatnak.

Címdia

Készíthetünk címdiát is, egyedi formázással. 

<div id="impress">
    <div id="cim" class="step">cím</div>
    <div id="dia1" class="step">tartalom 2</div>
    <div id="dia2" class="step">tartalom 3</div>
 
</div>

A címdiába mehet a bemutató címe, a szerző stb.: 

<div id="title" class="step">
    <h2>Cím</h2>
    <p>Szerző</p>
</div>

Elhelyezés

A divek számára megadhatók data-x és data-y attribútumok, amelyekkel meghatározhatók az adott diák helyei weboldalon. Képzeljünk el egy hatalmas papírlapot, amelyre kisebb papírlapokat helyezünk. A kisebb papírlapok a diák (slide-ok).

A data-x a dia vízszintes elhelyezését szabályozza, a data-y a dia függőleges elhelyezését. 

<div id="dia1" class="step" data-x="0" data-y="0">
<h1>Első dia</h1>
<p>Tartalom</p>
</div>
 
<div id="dia1" class="step" data-x="1000" data-y="0">
<h1>Második dia</h1>
<p>Tartalom</p>
</div>
 
 
<div id="dia1" class="step" data-x="2000" data-y="0">
<h1>Harmadik dia</h1>
<p>Tartalom</p>
</div>

A példában már h2-es fejezetcímet és „p” elemek között tartalmat is elhelyeztünk.

Lépték

A data-scale attribútummal meghatározható a lépték. Az alapértelmezett lépték az „1”. Ha ennél nagyobb számot adunk meg egy dia számára, az kiemelve jelenik meg a többihez képest. A többi dia kisebb lesz. 

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
<h1>Címdia</h1>
<p>Ide jön a szerző</p>
</div>
 
<div id="dia1" class="step" data-x="1000" data-y="0" data-scale="1">
<h1>Első</h1>
<p>Az első tartalma</p>
</div>

A címdiát nagyobb léptékre tehetjük például 4.

Forgatás

A data-rotate attribútummal meghatározható elforgatás. A forgatást szögben kell megadni. 0 fokot beállítva függőles, alapértelmezett helyzetben van a dia. 10 fok esetén jobbra elfordul 10-fokot. -10 érték esetén balra fordul 10 fokot. 

 
<div id="dia1" class="step" data-x="1000" data-y="0" data-scale="1" data-rotate="10">
<h1>Első</h1>
<p>Az első tartalma</p>
</div>
 
<div id="dia2" class="step" data-x="1000" data-y="0" data-scale="1" data-rotate="-10">
<h1>Második</h1>
<p>A második tartalma</p>
</div>

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

A class után újabb attribútumokat adhatunk meg, amelyeket az impress.js használ. A data-x, data-y stb, attribútumokkal, effekteket hozunk létre. Valójában mindig az aktuális dia helyét, irányát, skáláját adjuk. Az effekt az egyik diából a másik diába való átmenet során jön létre. 

<div class="step"
	data-x="-600"
	data-y="500" 
	data-scale="4"
	data-rotate="10">
<p>Tartalom</p>
</div>

Az attribútumok tetszőlegesen megadhatók vagy elhagyhatók. A következő példában csak egyetlen attribútumot adtunk meg a class mellett: 

<div class="step" data-x="1000">
         <h1>Dia</h1>
</div>

A data-x -el a középponthoz képest vízszintesen 1000 pixelre toljuk el a diát.

A data-scale értéket ha nagyobbra vagy kisebbre állítjuk, mint az előző diáé, akkor nagyítást vagy kicsinyítést hozhatunk létre.

Támogatott effektek

effekt Leírás Példa
data-x Mozgatás az x tengelyen. data-x=„200”
data-y Mozgatás az y tengelyen. data-y=„200”
data-z Mozgatás a z tengelyen. data-z=„200”
data-scale A dia léptéke a többihez képest. data-scale=„4”
data-rotate A dia forgatása jobbra vagy balra fokokban. data-rotate=„10”
data-rotate-x Forgatás az x tengely körül. data-scale-x=„45”
data-rotate-y Forgatás az y tengely körül. data-scale-y=„45”
data-rotate-z Forgatás a z tengely körül. data-scale-z=„45”

A data-rotate esetén a pozitív érték az óramutató járásával egyezően forgat. Megadható 360 foknál nagyobb érték is.

A diák formázása

A diákhoz további egyéni osztályokat adhatunk hozzá. Hozzáadhatjuk például a slide osztályt, amellyel minden dia kinézetét szabályozhatjuk.

A formázáshoz hozzáadunk egy slide nevű osztályt a diánkhoz: 

<div class="step slide">
         <h1>Dia</h1>
</div>

Minden diát a slide osztályba rakjuk, majd a CSS beállításoknál ehhez hasonlóan formázhatjuk: 

.slide {
	border-style: solid;
	border-width: 1px;
	border-color: #FF8C00;
	border-radius: 15px;
	width: 500px;
	height: 400px;
	padding: 10px;
	box-shadow: 15px 15px 15px #dd6C00;
}

Áttekintő nézet

Áttekintő nézetet hozhatunk létre a data-scale érték nagy értékre állításával. 

<div id="overview" class="step" data-x="1000" data-y="0" data-scale="6"></div>

Esetleg így: 

<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="16"></div>

Az osztályoknál hagyjuk ki a „slide” osztályt!

Nem támogatott böngésző

A impress.js lehetőséget biztosít a nem támogatott böngészők vizsgálatára. A használata nem kötelező. 

<div id="impress" class="impress-not-supported">
     <!-- Ide jönnek a diák -->
</div>

Hibaüzenet 

<div id="impress" class="impress-not-supported">
 
    <div class="fallback-message">
        <p>
        A böngésződ <b>nem támogatja ezt tulajdonságot</b> amit az impress.js igényel, 
        így egy egyszerűbb a bemutató egyszerűbb változatát láthatod</p>
        <p>
        A legjobb ha a legújabb <b>Chrome</b>, <b>Safari</b> böngészőt 
        választod. Firefox böngészőből 10 verzió vagy nagyobb.
        </p>
    </div>
 
</div>

Egyszerű példa

Az alábbiakban egy egyszerű példát látunk az eddigiek alapján.

index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bemutató</title>
</head>
<body>
 
<div id="impress" class="impress-not-supported">
 
    <div class="fallback-message">
        <p>
        A böngésződ <b>nem támogatja ezt tulajdonságot</b> amit az impress.js igényel, 
        így egy egyszerűbb a bemutató egyszerűbb változatát láthatod
        </p>
        <p>
        A legjobb ha a legújabb <b>Chrome</b>, <b>Safari</b> böngészőt választod. 
        Firefox böngészőből 10 verzió vagy nagyobb.
        </p>
    </div>
 
    <!-- Ide jönnek a diák -->
 
    <div id="dia1" class="step">
         <h1>Dia 1</h1>
    </div>
 
    <div id="dia2" class="step">
         <h1>Dia 2</h1>
    </div>
 
    <div id="dia3" class="step">
         <h1>Dia 3</h1>
    </div>
 
</div>
 
<script src="js/impress.js"></script>
<script>
impress().init();
</script>
 
</body>
</html>

A működéshez az adott html állománnyal egy szinten lévő js könyvtárban kell legyen az impress.js állomány is.

Impress.js függvények

Időzítés

A diasor automatikus, időzített továbbításához az impress().init(); után a HTML dokumentumunkhoz adunk egy eseményfigyelőt, az alábbiakhoz hasonlóan. 

var ido = 7000; //millisecundum
impress().init();
 
document.addEventListener('impress:stepenter', function(e){
	if (typeof timing !== 'undefined') clearInterval(timing);
	var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : ido);
	timing = setInterval(impress().next, duration);
});

Időzítés és billentyűkódok

A következő példában az Esc és az Enter billentyű figyelését is megoldjuk, hogy azzal leállíthassuk az automatikus továbbítás, illetve elindíthassuk. 

var api = impress();
var timing = null;
var duration = 0;
var ido = 7000; //millisecundum
api.init();
 
document.addEventListener('impress:stepenter', function(e){
	if (typeof timing !== 'undefined') clearInterval(timing);
	duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : ido);
	timing = setInterval(api.next, duration);
});
 
document.addEventListener('keydown', function(e){
	if(e.which) 
	{
		if(eval(e.which)==27)	
		{			
			clearInterval(timing);
			console.log("Esc volt");
		}
		if(eval(e.which)==13)
		{
			timing = setInterval(api.next, duration);
			console.log("Enter volt");
		}
	}
}, false);

CSS

Az egyes diák megjelenését a .slide szelektoron keresztül tudjuk formázni, hiszen a slide osztályba került minden dia.

Kör alakú dobozok

.slide {
 
	border: 15px solid green;
	width: 600px;
	height: 600px;
	padding: 10px;
	border-radius: 50%;
	text-align: center;
}
 
.slide h1 {
	margin-top: 150px;
}
 
.slide ul {
	margin-left: 30%;
	text-align: left;
}

Az aktív diák kiemelése

Az aktuális dia mellet néha megjelennek más diák is a képernyőn. Ilyenkor előnyös a nem aktív diákat átlátszóságát növelni, így kiemelve az aktív diát: 

.step {
    transition: opacity 1s;
}
 
.step:not(.active) {
    opacity: 0.3;
}

Linkek