Nové přechody – přehled 5.

V tomto článku se podíváme na poslední čtyři nové přechody z dílny Microsoftu. Pomocí přechodu Stretch hravě dosáhneme efektu rotující krychle, máme tu také přechod Strips, který se podobá přechodu Inset, nebo zajímavý přechod Wheel, připomínající roztočené kolo povozu. A na závěr přechod Zigzag, jak již název napovídá, odkrývající nový obsah sem a tam.

Všechny tyto přechody, jak jsem již zdůrazňoval dříve, jsou v současné době bez problémů použitelné v prohlížečích MSIE 5.5 a vyšších. Nejsou ale součástí žádných standardů a pravděpodobně se tomu tak ani nestane, neboť se jedná výlučně o syntaxi Microsoftu.

Přechod Stretch

Nový obsah prvku zobrazí roztažným pohybem překrývajícím původní obsah. Jeden styl připomíná krychli rotující podle středové osy. Také patří mezi nové přechody předtím nikde nezahrnuté.

Syntaxe:

{ filter: progid:DXImageTransform.Microsoft.Stretch(duration=floating-point, enabled=boolean, percent=string, status=integer, stretchstyle=string); }

Parametry:

Parametr	Popis
Duration	Určuje délku trvání celého přechodu. Udává se v sekundách.milisekundách (0.0000).
Enabled	Určuje možnost použití přechodu. Může nabývat hodnot true (zapnutý, implicitní) nebo false (vypnutý).
Percent	Nastaví bod, ve kterým se přechod zastaví a dosáhne tím efektu statického filtru. Může nabývat hodnot 0 (implicitní) až 100.
Status	Uchovává aktuální stav přechodu. Může nabývat hodnot 0 – přechod stojí, 1 – přechod je aplikován, 2 – přechod probíhá.
StretchStyle	Určuje metodu použitou pro přechod. Může nabývat hodnot hide (implicitní), push a spin.

K přechodu Stretch jsem si zde připravil příklad s barevnou plochou přecházející v obrázek, a to za použití změny vlastnosti visibility přechodných prvků. Přechod Stretch si můžete stejně jako ostatní přechody vyzkoušet přímo na testovací stránce MSDN Microsoft.

Zdrojový kód ovládacího skriptu:

<script>
 <!–
 var stav = 0;
 function str() {
   kontejner_str.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr2_str.style.visibility=“visible“;
      obr1_str.style.visibility=“hidden“;}
    else {
      stav = 0;
      obr2_str.style.visibility=“hidden“;
      obr1_str.style.visibility=“visible“;}
   kontejner_str.filters[0].Play();}
 –>
</script>

V ovládacím skriptu nejprve nadefinujeme proměnnou stav a poté funkci str(), která aplikuje daný přechod pomocí metody apply(). Proměnná stav zajišťuje za pomoci podmínek pravidelné střídání barevné plochy a obrázku. Dále jsou ve funkci str() definovány atributem style konečné hodnoty vlastností visibility prvků obr1_str a obr2_str, které jsou nastaveny v závislosti na hodnotě proměnné stav. Nakonec funkce zavolá spouštěcí metodu play() daného přechodu.

Zdrojový kód prvků a tlačítka:

<span id=“kontejner_slide“ style=“width:250px; height:210px; filter:progid:DXImageTransform.Microsoft.Stretch(duration=10);“>
<span id=“obr1_str“ style=“background-color: gold;“>
<span id=“obr2_str“ style=“visibility:hidden;“><img src=“prechod3.gif“ width=“250px“ height=“210px“ alt=“Logo“ /></span>
</span>
</span>
<button onclick=“str()“>Spustit přechod Stretch</button>

Dále jsou tu přechodné prvky obr1_str a obr2_str vnořené do prvku kontejner_str, ve kterém je pomocí atributu style a vlastnosti filter definován přechod Stretch i se svým parametrem duration=10 (doba trvání 10s). U druhého přechodného prvku musíme na začátku nastavit vlastnost visibility na hodnotu hidden, jinak by byl zobrazen ještě před spuštěním přechodu. Stejného efektu se dá jednodušeji dosáhnout i použitím absolutního polohování obou prvků nad sebe. Tlačítko „Spustit přechod Stretch“ po kliknutí jen volá definovanou funkci str(). U prvků div a span nesmíme zapomenout na nastavení atributů width nebo height.

Přechod Strips

Zobrazí nový obsah prvku pohybem odkrývajícího zubatého pruhu po diagonále, připomíná zubatou pilku pohybující se po diagonále. Podobný přechodu Inset. Nahrazuje přechody 17 až 20 staršího přechodu RevealTrans.

Syntaxe:

{ filter: progid:DXImageTransform.Microsoft.Strips(duration=floating-point, enabled=boolean, motion=string, percent=string, status=integer); }

Parametry:

Parametr	Popis
Duration	Určuje délku trvání celého přechodu. Udává se v sekundách.milisekundách( 0.0000).
Enabled	Určuje možnost použití přechodu. Může nabývat hodnot true (zapnutý, implicitní) nebo false (vypnutý).
Motion	Nastavuje roh prvku ze kterého se nový obsah prvku začne odkrývat. Může nabývat hodnot leftdown – z horního pravého rohu (implicitní), leftup – z dolního pravého rohu, rightdown – z levého horního rohu, rightup – z levého dolního rohu.
Percent	Nastaví bod, ve kterým se přechod zastaví a dosáhne tím efektu statického filtru. Může nabývat hodnot 0 (implicitní) až 100.
Status	Uchovává aktuální stav přechodu. Může nabývat hodnot 0 – přechod stojí, 1 – přechod je aplikován, 2 – přechod probíhá.

Na demonstraci možností přechodu Strips jsem použil příklad přechodu dvou obrázků pomocí změny atributu src přechodného prvku. Přechod Strips si můžete také vyzkoušet přímo na testovací stránce MSDN Microsoft.

Zdrojový kód ovládacího skriptu:

<script>
 <!–
 var stav = 0;
 function strips() {
   obr_strips.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_strips.src=“prechod3.gif“;}
    else {
      stav = 0;
      obr_strips.src=“prechod1.gif“;}
   obr_strips.filters[0].Play();}
 –>
</script>

V ovládacím skriptu nejprve definujeme funkci strips(), která aplikuje daný přechod pomocí metody apply(). Definovaná proměnná stav zajišťuje za pomoci podmínek pravidelné střídání obrázků. Dále je ve funkci strips() definována konečná hodnota atributu src obrázku obr_strips, která je určena právě v závislosti na hodnotě proměnné stav. Nakonec již funkce volá metodu play() daného přechodu.

Zdrojový kód prvků:

<img src=“prechod1.gif“ id=“obr_strips“ width=“250px“ height=“210px“ style=“filter:progid:DXImageTransform.Microsoft.Strips(duration=0.4,motion=rightup);“ alt=“Logo“ /><br>
<button onclick=“strips()“>Spustit přechod Strips</button>

Přechod Strips spolu s parametry duration=0.4 (doba trvání 400ms) a motion=rightup (z levého dolního rohu) je definován v atributu style přechodného obrázku obr_strips vlastností filter. Dále je zde již pouze tlačítko „Spustit přechod Strips“, které po kliknutí volá funkci strips() definovanou v ovládacím skriptu.

Přechod Wheel

Zobrazí nový obsah prvku postupným odkrýváním paprsku rotujícího kolem středu. Připomíná rotující kolo povozu. Také tento přechod patří mezi nové předtím nikam nezahrnuté filtry.

Syntaxe:

{ filter: progid:DXImageTransform.Microsoft.Wheel(duration=floating-point, enabled=boolean, percent=string, spokes=integer, status=integer); }

Parametry:

Parametr	Popis
Duration	Určuje délku trvání celého přechodu. Udává se v sekundách.milisekundách (0.0000).
Enabled	Určuje možnost použití přechodu. Může nabývat hodnot true (zapnutý, implicitní) nebo false (vypnutý).
Percent	Nastaví bod, ve kterým se přechod zastaví a dosáhne tím efektu statického filtru. Může nabývat hodnot 0 (implicitní) až 100.
Spokes	Určuje počet klínů, do kterých se obsah prvku rozdělí. Může nabývat hodnot 2 až 20, implicitně 4.
Status	Uchovává aktuální stav přechodu. Může nabývat hodnot 0 – přechod stojí, 1 – přechod je aplikován, 2 – přechod probíhá.

U přechodu Wheel bych vám rád na příkladě předvedl také možnost pravidelného opakování, které je zde zajištěnou pomocí funkce SetTimeout. V pravidelných intervalech zde budou pomocí vlastnosti InnerHTML přecházet obrázek a text. Přechod Wheel zase trochu jinak si můžete vyzkoušet také přímo na testovací stránce MSDN Microsoft.

Zdrojový kód ovládacího skriptu:

<script>
 <!–
 var stav = 0;
 function wheel() {
   obr_wheel.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_wheel.innerHTML=“<img src=’prechod1.gif‘ width=’250px‘ height=’210px‘ alt=’Logo MSIE 6.0′ />“;}
    else {
      stav = 0;
      obr_wheel.innerHTML=“<br><br>Filtr Wheel“;}
   obr_wheel.filters[0].Play();
   cas = setTimeout(„wheel()“,5000);}
 –>
</script>

V ovládacím skriptu je nejprve definována funkce wheel(), která aplikuje daný přechod pomocí metody apply(). Definovaná proměnná stav pak zajišťuje za pomoci podmínky pravidelné střídání obrázku a textu. Pomocí vlastnosti InnerHTML, která mění obsah prvku včetně elementů jazyka HTML, ve funkci wheel() nadefinujeme konečné obsahy prvku obr_wheel. Potom již funkce wheel() zavolá metodu play() daného přechodu. Aby se celý přechod pravidelně opakoval, je do skriptu přidána navíc proměnná cas, která pomocí předdefinované funkce SetTimeout() nastavuje volání funkce check() na 5000 milisekund. A vzhledem k tomu, že je tato funkce volána na konci každého proběhnutí funkce wheel(), opakuje se spouštění přechodu pravidelně každých 5000 milisekund.

Zdrojový kód prvků:

<div id=“obr_wheel“ style=“width:250px; height:210px; font-size:26px; font-family:Comic Sans MS; font-weight:bold; text-align:center; filter:progid:DXImageTransform.Microsoft.Wheel(duration=5,spokes=7);“>
<img onload=“wheel()“ src=“prechod1.gif“ width=“250px“ height=“210px“ alt=“Logo MSIE 6.0″ />
</div>

Samotný přechod Wheel je potom spolu se svými dvěma parametry duration=5 (doba trvání 5s) a spokes=7 (7 klínů) definován v atributu style prvku obr_wheel vlastností filter. Spuštění ovládací funkce wheel() zajišťuje atribut onload vnořeného prvku, který funkci wheel() zavolá po načtení. V atributu style prvku obr_wheel jsou potom ještě pomocí vlastností jazyka CSS nastaveny parametry písma zobrazovaného textu. U prvku obr_wheel musí být v atributu style nastaveny povinné atributy (vlastnosti) pro prvky div a span, a to width nebo height.

Přechod Zigzag

Nový obsah prvku zobrazí pohybem tam a zpět postupně shoda dolů. Poslední z nových přechodů, které dříve nebyly nikam zahrnuty.

Syntaxe:

{ filter: progid:DXImageTransform.Microsoft.Zigzag(duration=floating-point, enabled=boolean, gridsizex=integer, gridsizey=integer, percent=string, status=integer); }

Parametry:

Parametr	Popis
Duration	Určuje délku trvání celého přechodu. Udává se v sekundách.milisekundách (0.0000).
Enabled	Určuje možnost použití přechodu. Může nabývat hodnot true (zapnutý, implicitní) nebo false(vypnutý).
GridSizeX	Nastavuje počet sloupců mřížky použité pro přechod. Může nabývat hodnot 1 až 100, implicitně 16.
GridSizeY	Nastavuje počet řádků mřížky použité pro přechod. Může nabývat hodnot 1 až 100, implicitně 16.
Percent	Nastaví bod, ve kterým se přechod zastaví a dosáhne tím efektu statického filtru. Může nabývat hodnot 0 (implicitní) až 100.
Status	Uchovává aktuální stav přechodu. Může nabývat hodnot 0 – přechod stojí, 1 – přechod je aplikován, 2 – přechod probíhá.

Na příkladě přechodu Zigzag můžete vidět dva přechodné textové prvky, přecházející díky vlastnosti InnerHTML. Přechod Zigzag si můžete také vyzkoušet přímo na testovací stránce MSDN Microsoft.

Zdrojový kód ovládacího skriptu:

<script>
 <!–
 var stav = 0;
 function zig() {
   txt_zig.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      txt_zig.innerHTML=“<br>Na přechod Zigzag!“;}
    else {
      stav = 0;
      txt_zig.innerHTML=“<br>Víte na jaký přechod se právě díváte?“;}
   txt_zig.filters[0].Play();
 –>
</script>

V ovládacím skriptu napřed nadefinujeme funkci zig(), která aplikuje daný přechod pomocí metody apply(). Definovaná proměnná stav pak zajišťuje za pomoci podmínky pravidelné střídání prvního a druhého textu. Dále jsou ve funkci zig() pomocí vlastnosti InnerHTML, která mění obsah prvku včetně elementů jazyka HTML, nadefinovány konečné obsahy prvku txt_zig. Dále už funkce jen zavolá metodu play() daného přechodu.

Zdrojový kód prvků:

<div id=“txt_zig“ style=“width:250px; height:100px; font-size:20px; font-family:Comic Sans MS; font-weight:bold; text-align:center; filter:progid:DXImageTransform.Microsoft.Zigzag(duration=2,gridsizex=40,gridsizey=40);“>
<br>Víte na jaký přechod se právě díváte?
</div>
<button onclick=“zig()“>Spustit přechod Zigzag</button>

Přechod Zigzag jako takový je potom včetně svých parametrů duration=2 (doba trvání 2s), gridsizex=40 (40 sloupců mřížky) a gridsizey=40 (40 řádků mřížky) definován v atributu style prvku txt_zig vlastností filter. V atributu style prvku txt_zig je pak ještě pomocí vlastností jazyka CSS nastaveno formátování písma textu. Přechod se spouští kliknutím na tlačítko „Spustit přechod Zigzag“, které volá předem definovanou funkci zig(). U prvku txt_zig musí být v atributu style nastaveny povinné vlastnosti pro prvky div a span, tedy width nebo height!

A tímto přechodem jsem již zakončil přehled všech sedmnácti nových přechodů z dílny Microsoftu.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.