Nové přechody – přehled 1.

V prvním přehledu nových přechodů z dílny Microsoftu se blíže podíváme na přechody – přes otevírající se dveře (Barn), roletu (Blinds), šachovnicovými poli (ChekerBoard) nebo třeba setměním (Fade).

Všechny tyto přechody, jak již bylo psáno v přehledu těchto přechodů, 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 Barn

Roluje původní obsah prvku ve vodorovném či svislém směru, a to ze středu nebo do středu nad novým obsahem prvku. Podobá se otevírajícím či zavírajícím se dveřím. Nahradil přechody 13-16 staršího přechodu RevealTrans.

Syntaxe:

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

Parametry:

Na ukázku jsem zde připravil jednoduchý příklad použití přechodu Barn k přechodu dvou obrázků mezi sebou. Přechod Barn 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 barn() {
   obr_barn.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_barn.src=“prechod2.gif“;}
    else {
      stav = 0;
      obr_barn.src=“prechod1.gif“;}
   obr_barn.filters[0].Play();}
 –>
</script>

V ovládacím skriptu nejprve definujeme funkci barn(), 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 barn() definována konečná hodnota atributu src obrázku obr_barn, která je určena právě v závislosti na hodnotě proměnné stav. Nakonec již funkce zavolá metodu play() daného přechodu.

Zdrojový kód prvků:

<img src=“prechod1.gif“ id=“obr_barn“ width=“250px“ height=“210px“ style=“filter:progid:DXImageTransform.Microsoft.Barn(duration=5,orientation=vertical,motion=out);“ alt=“Logo“ /><br>
<button onclick=“barn()“>Spustit přechod Barn</button>

Přechod sám o sobě spolu s parametry (duration=5 – doba trvání 5s, orientation=vertical – ve svislém směru, motion=out – ze středu) je definován v atributu style přechodného obrázku obr_barn vlastností filter. Dále je tu již pouze tlačítko, které po kliknutí zavolá funkci barn() definovanou v ovládacím skriptu.

Přechod Blinds

Zobrazí nový obsah prvku skrz roletu o zadaném počtu pásů. Nahrazuje přechody 4-9 staršího přechodu RevealTrans.

Syntaxe:

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

Parametry:

Na jednoduchém příkladě si můžete vyzkoušet jak funguje přechod Blind v souvislosti se změnami vlastností visibility obou přechodných prvků. Přechod Blinds je možno vyzkoušet i přímo na testovací stránce MSDN Microsoft.

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

<script>
 <!–
 var stav = 0;
 function blinds() {
   kontejner_blinds.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr2_blinds.style.visibility=“visible“;
      obr1_blinds.style.visibility=“hidden“;}
    else {
      stav = 0;
      obr2_blinds.style.visibility=“hidden“;
      obr1_blinds.style.visibility=“visible“;}
   kontejner_blinds.filters[0].Play();}
 –>
</script>

Ovládací skripty budou u většiny příkladů hodně podobné, přesto je pokaždé znovu rozeberu. V ovládacím skriptu nadefinujeme proměnnou stav a funkci blinds(), která potom 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 jsou ve funkci blind() definovány atributem style konečné hodnoty vlastností visibility prvků obr_blinds1 a obr_blinds2, které jsou nastaveny právě v závislosti na hodnotě proměnné stav. Nakonec pouze funkce zavolá metodu play() daného přechodu.

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

<span id=“kontejner_blinds“ style=“width:250px; height:210px; filter:progid:DXImageTransform.Microsoft.Blinds(bands=8,direction=right,duration=2);“>
<span id=“obr1_blinds“ style=“background-image: url(prechod1.gif);“>
<span id=“obr2_blinds“ style=“visibility:hidden;“><img src=“prechod2.gif“ width=“250px“ height=“210px“ alt=“Logo“ /></span>
</span>
</span>
<button onclick=“blinds()“>Spustit přechod Blinds</button>

Oba dva přechodné prvky obr1_blinds a obr2_blinds jsou vnořené do prvku kontejner_blinds, u kterého je pomocí atributu style a vlastnosti filter definován přechod Blinds i se svými parametry (bands=8 – 8 pásů, direction=right – zprava, duration=2 – doba trvání 2s). Nezapomeňte si všimnout, že u druhého přechodného prvku musí být na začátku nastavena vlastnost visibility na hodnotu hidden, jinak by byl tento prvek celý zobrazen již před spuštěním přechodu. Stejného efektu se dá dosáhnout i použitím absolutního polohování obou prvků s obrázky nad sebe. Tlačítko „Spustit přechod Blinds“ potom po kliknutí volá funkci blinds() předem definovanou v ovládacím skriptu. Nesmíme zapomenout, že u elementů div a span je potřeba nadefinovat atribut width nebo height!

Přechod CheckerBoard

Zobrazí nový obsah prvku postupným odkrýváním čtvercových polí šachovnice původního obsahu. Nahrazuje přechody 10 a 11 staršího přechodu RevealTrans.

Syntaxe:

{ filter: progid:DXImageTransform.Microsoft.CheckerBoard(direction=string, squaresx=integer, squaresy=integer); }

Parametry:

U přechodu CheckBoard vám pro změnu na příkladě ukáži kromě samotného přechodu i automatické přecházení textu a obrázku. Přechod CheckerBoard si můžete stejně jako další přechody vyzkoušet přímo na testovací stránce MSDN Microsoft.

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

<script>
 <!–
 var stav = 0;
 function check() {
   obr_check.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_check.innerHTML=“<br><br>Ukázka filtru CheckerBoard<br><br>Logo internetového prohlížeče MSIE verze 6.0 přechází v tento text“;}
    else {
      stav = 0;
      obr_check.innerHTML=“<img src=’prechod1.gif‘ width=’250px‘ height=’210px‘ alt=’Logo MSIE 6.0′ />“;}
   obr_check.filters[0].Play();
   cas = setTimeout(„check()“,7000);}
 –>
</script>

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

Zdrojový kód prvků:

<div id=“obr_check“ style=“width:250px; height:210px; color:blue; font-family:Comic Sans MS; font-weight:bold; text-align:center; filter:progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresx=10,squaresy=10);“>
<img onload=“check()“ src=“prechod1.gif“ width=“250px“ height=“210px“ alt=“Logo MSIE 6.0″ />
</div>

Přechod CheckerBoard je potom spolu se svými parametry (direction=down – směr dolů, squaresx=10 – 10 sloupců, squaresy=10 – 10 řádků) definován v atributu style prvku obr_check vlastností filter. Spuštění ovládací funkce check() zajišťuje atribut onload vnořeného prvku, který funkci check() po načtení zavolá. V atributu style prvku obr_check jsou potom pomocí vlastností jazyka CSS nastaveny ještě parametry písma zobrazovaného textu. Všimněte si také, že u prvku obr_check jsou v atributu style nastaveny povinné atributy (vlastnosti) pro prvky div a span, a to width nebo height.

Přechod Fade

Nový obsah prvku zobrazí postupným zatměním původního obsahu prvku a objevením nového obsahu. Nahrazuje starší přechod BlendTrans.

Syntaxe:

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

Parametry:

K přechodu Fade jsem zde připravil jednoduchý příklad stmívajícího se obrázku pracujícího se změnou hodnoty vlastnosti visibility přechodného prvku. Přechod Fade 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 fade() {
   obr_fade.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_fade.style.visibility=“hidden“;}
    else {
      stav = 0;
      obr_fade.style.visibility=“visible“;}
   obr_fade.filters[0].Play();}
 –>
</script>

V ovládacím skriptu nejprve definujeme proměnnou stav a funkci fade(), která po zavolání aplikuje daný přechod pomocí metody apply(). Definovaná proměnná stav zajišťuje za pomoci podmínek pravidelné střídání „rozsvěcení“ a „zhasínání“ obrázku. Dále jsou ve funkci fade() definovány atributem style konečné hodnoty vlastností visibility prvku obr_fade, které jsou nastaveny v závislosti na hodnotě proměnné stav. Nakonec funkce už jen zavolá metodu play() daného přechodu.

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

<img id=“obr_fade“ src=“prechod1.gif“ width=“250px“ height=“210px“ style=“filter:progid:DXImageTransform.Microsoft.Fade(duration=4,overlap=1.0);“ alt=“Logo“ /><br>
<button onclick=“fade()“>Spustit přechod Fade</button>

Přechod je pak nastaven přímo u přechodného prvku obr_fade pomocí atributu style a vlastnosti filter. Má dva parametry (duration=4 – doba trvání 4s, overlap=1.0 – zobrazeny jsou společně po 1.0). Tlačítko „Spustit přechod Fade“ po kliknutí už jen zavolá funkci fade() nadefinovanou v ovládacím skriptu.