Filtry v dynamickém HTML, IV. část: přechody aneb RevealTrans - Builder.cz - Informacni server o programovani

Rubriky
Odběr fotomagazínu

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.

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

<html>
<head>
<title>Naše první stránka s použitím přechodů</title>

<script type="text/JavaScript">
function showPrechod() {
objekt1.filters[0].apply();
objekt1.style.visibility = "visible";
objekt1.filters[0].play();
}
</script>

</head>
<body onload="showPrechod();">

<img src="obrazek.gif" style="filter:revealtrans(duration=1.5,transition=23); visibility:hidden;" id="objekt1">

</body>
</html>

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:

Vyberte číslo přechodu a stiskněte OK nebo spusťte SlideShow:
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:

<html>
<head>
<title>Naše druhá stránka s použitím přechodů</title>

<script type="text/JavaScript">
function showPrechod() {
objekt1.filters[0].apply();
objekt1.filters[1].apply();
objekt1.style.visibility = "visible";
objekt1.filters[0].play();
objekt1.filters[1].play();
}
</script>

</head>
<body onload="showPrechod();">

<img src="obrazek.gif" style="filter:revealtrans(duration=1.5,transition=14), revealtrans(duration=1.5,transition=12); visibility:hidden;" id="objekt1">

</body>
</html>

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:

<html>
<head>
<title>Naše první stránka s použitím mezistránkových přechodů</title>

<meta http-equiv="Page-Enter" content="revealtrans(duration=2.0,transition=1)"> <!-- Spustí se při příchodu na stránku. -->
<meta http-equiv="Page-Exit" content="revealtrans(duration=5.1,transition=12)"> <!-- Spustí se při odchodu ze stránky. -->

</head>
<body>
Obsah stránky
</body>
</html>

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.

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

 » Rubriky  » HTML  

Poslat článek Diskuse (0) Tisk Přečteno: 1450x

www.builder.cz/rubriky/javascript/filtry-v-dynamickem-html-iv-cast-prechody-aneb-revealtrans-155782cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Krátké zprávy

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: