JavaScriptové bannery 2.
V dalším článku o animacích vytvořených pomocí Javascriptu a DHTML si představíme filtr revealTrans(), který umožňuje přes 20 různých efektů, kterými můžeme obohatit jednoduché obměňování obrázků. Dále si ukážeme, jak při animaci průběžně měnit jednotlivé filtry.
Na začátek připomínám, že uvedené animace jsou funkční v MSIE 4.0 nebo vyšších verzích tohoto prohlížeče. Netscape Navigator filtry nepodporuje, takže se zde musíme spokojit s pouhým střídáním obrázků.
Filtr RevealTrans()
Tento filtr umožňuje 24 různých efektů při přechodu mezi jednotlivými obrázky. Filtr definujeme přímo v tagu <img> pomocí parametru style např. takto:
|
U tohoto filtru lze nastavit dva parametry: jednak dobu působení daného filtru (parametr duration), který je udáván v sekundách, jednak typ filtru (parametr transition). Kompletní přehled jednotlivých možných přechodů naleznete v níže uvedené tabulce. Protože jsem nenašel výstižné české ekvivalenty k anglickým názvům, uvádím původní označení z dokumentace Microsoftu.
| Typ přechodu | Hodnota |
| Box in | 0 |
| Box out | 1 |
| Circle in | 2 |
| Circle out | 3 |
| Wipe up | 4 |
| Wipe down | 5 |
| Wipe right | 6 |
| Wipe left | 7 |
| Vertical blinds | 8 |
| Horizontal blinds | 9 |
| Checkerboard across | 10 |
| Checkerboard down | 11 |
| Random dissolve | 12 |
| Split vertical in | 13 |
| Split vertical out | 14 |
| Split horizontal in | 15 |
| Split horizontal out | 16 |
| Strips left down | 17 |
| Strips left up | 18 |
| Strips right down | 19 |
| Strips right up | 20 |
| Random bars horizontal | 21 |
| Random bars vertical | 22 |
| Random | 23 |
Dynamické změny filtrů
Využití filtru revealTrans() si ukážeme na malé ukázce. Vyjdeme z minulého dílu, tentokráte ovšem použijeme filtr revealTrans a postupně využijeme všech typů přechodů mezi obrázky (budeme průběžně měnit parametr transition).
V první fázi musíme obrázky, které budeme animovat, načíst do cache počítače:
|
Samozřejmě musíme nadefinovat i vlastní obrázek. V parametru style pak nadefinujeme i filtr. Dobu působení filtru nastavíme na 3 sec. (parametr duration).
|
Funkce, která provede vlastní animaci pak vypadá následovně:
|
Řadu příkazů známe již z minulého dílu, takže se o nich jen krátce zmíním: Prohlížeč nejprve zjistí, zda-li je podporován objekt sample. V případě že není, provede se pouhé střídání obrázků. V opačném případě se provede úplná animace. Tu spustíme pomocí příkazů Apply() a Play(). Oproti skriptu z minulého dílu určujeme v každém cyklu typ filtru pomocí proměnné transtyp, kterou postupně měníme. To nám umožňuje postupné obměňování typu filtru během animace. Aby byla funkce, provedena musíme ji zavolat, například hned při načtení stránky:
|
