[[oktatas:bemutato|< Bemutató]]

====== Impress.js ======

  * **Szerző:** Sallai András
  * Copyright (c) 2019, Sallai András
  * Szerkesztve: 2019, 2021, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== 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: 
  * https://github.com/impress/impress.js (2019)
  * https://github.com/impress (2019)
  * https://impress.js.org/ (Demó; 2019)
  * https://github.com/impress (2019)


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 =====

<code html>

<div id="impress">

Ide jön a tartalom (újabb divek)

</div>

<script src="js/impress.js"></script>
<script>impress().init();</script>

</code>

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. 

<code html>
<div id="impress">

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

</div>
</code>

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. 


<code html>
<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>
</code>

A címdiába mehet a bemutató címe, a szerző stb.:
<code html>
<div id="title" class="step">
    <h2>Cím</h2>
    <p>Szerző</p>
</div>
</code>

===== 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.

<code html>
<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>

</code>

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. 

<code html>

<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>

</code>

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.

<code html>


<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>



</code>



===== 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.

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


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:
<code html>
<div class="step" data-x="1000">
         <h1>Dia</h1>
</div>
</code>

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:

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


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

<code css>
.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;
}
</code>



===== Áttekintő nézet =====

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

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

Esetleg így:
<code html>
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="16"></div>
</code>

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ő.

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

Hibaüzenet
<code html>
<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>
</code>
===== Egyszerű példa =====

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

<code html 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>
</code>

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 =====


  * impress().next();
  * impress().prev();
  * impress().goto(10);

===== 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.

<code javascript>
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);
});
</code>

===== 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.

<code javascript>
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);
</code>

===== 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 ====

<code css>
.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;
}
</code>

==== 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:

<code css>
.step {
    transition: opacity 1s;
}

.step:not(.active) {
    opacity: 0.3;
}
</code>

===== Linkek =====

  * https://github.com/impress/impress.js
    * https://github.com/impress/impress.js/wiki
  * http://it-ebooks.info/book/2783/ (Elektronikus könyv)
  * http://strut.io/dist/ (Editor)
  * http://naugtur.pl/builder4impress/#/start
  * https://github.com/harish-io/Impressionist (Vizuális szerkesztő)
  * https://github.com/regebro/hovercraft