Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
JavaScript
Filtry v dynamickém HTML, IV. část: přechody aneb RevealTrans
1. června 2001, 00.00 | Přechody ovlivňují způsob, jakým se prvky na obrazovce objeví,
i jakým z ní zmizí. Kromě toho existují ještě mezistránkové přechody, které to samé umožňují u celých HTML stránek. My se dnes tyto finesy naučíme používat.
Abyste věděli, o čem se v dnešním článku budeme bavit, vyzkoušejte si následující příklad:
Jak to funguje
Nyní se podívejte na tento kód, na kterém si vysvětlíme princip používání přechodů:
|
Nejprve si na stránku vložíme obrázek (pojmenovali jsme si ho objekt1). Ten definujeme jako neviditelný (pomocí visibility:hidden) a zároveň na něj aplikujeme filtr revealtrans. Jeho parametr duration říká, jak dlouho bude celý efekt trvat, parametr transition udává, jaký z efektů bude použit. Jednotlivé efekty jsou reprezentovány čísly a v dnešním článku se k nim ještě dostaneme.
Samotný efekt ale zajišťuje kód ve funkci showPrechod(). Tuto funkci spouštíme v momentě, kdy se celá stránka nahraje do paměti prohlížeče (událost onload) - to z toho důvodu, abychom měli jistotu, že obrázek, který chceme zobrazit pomocí přechodu, je již nahraný v paměti. Samozřejmě můžeme tento kód spustit i ve spojení s jinou událostí, ale je potřeba, aby se obrázek již nacházel v paměti prohlížeče.
Samotná funkce showPrechod() nejprve filtr (jeho číslo v pořadí je 0) aplikuje (pomocí metody apply()), v dalším řádku se nachází cílový stav objektu (v našem případě viditelnost, ale efekt může fungovat i opačně) a v posledním řádku se filtr přehraje (pomocí metody play()).
Jednotlivé druhy přechodů
Přechody se číslují od nuly a je jich 23. V následujícím příkladu se můžete s jednotlivými druhy přechodů seznámit:
Zatím nebyl definován žádný přechod.
Míchání přechodů
Samozřejmě můžete smíchat i několik přechodů dohromady. Vše si ukážeme na příkladu:
|
Jen dodám, že tuto kombinaci přechodů jsme použili v prvním příkladu dnešního článku.
Mezistránkové přechody
Mezistránkové přechody pracují stejně jako ty, které jsme si dosud ukázali, jenom s malým rozdílem. Místo jednoho objektu (obrázku) se pomocí přechodu zobrazí celá stránka. K tomu může dojít při příchodu na stránku a při odchodu ze stránky. Připravit takový přechod je velmi jednoduché, ukážeme si to na příkladu:
|
Samozřejmě je i zde možné míchat jednotlivé přechody, jen je třeba mezi nimi uvést čárku a mezeru.
Závěrem
Dnešním článkem jsme završili náš miniseriál o filtrech v dynamickém HTML. V příštích článcích se soustředíme na technologii DirectAnimation.
Poslat článek
Nyní máte možnost poslat odkaz článku svým přátelům:
-
25. listopadu 2012
-
30. srpna 2002
-
10. října 2002
-
4. listopadu 2002
-
12. září 2002
-
25. listopadu 2012
-
28. července 1998
-
31. července 1998
-
28. srpna 1998
-
6. prosince 2000
-
27. prosince 2007
-
4. května 2007