Nové přechody – přehled 2.

V tomto přehledu nových přechodů z dílny Microsoftu vám přiblížím další tři, a to konkrétně velice efektní přechod GradientWipe, diagonálně rolující Inset a přechod přes aperturu fotoaparátu (Iris).

Všechny tyto přechody, jak již bylo psáno v obecném přehledu, 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 GradientWipe

Odkryje nový obsah prvku velice efektně pohybem postupně odkrývajícího pásu. Jedná se o zcela nový filtr, který nebyl obsažen ve starších přechodech.

Syntaxe:

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

Parametry:

Na příkladě můžete shlédnout přechod GradientWipe na dvou měnících se přechodných prvcích, kde přechod je postaven na změně jejich vlastností visibility. Přechod GradientWipe 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 wipe() {
   kontejner_wipe.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr2_wipe.style.visibility=“visible“;
      obr1_wipe.style.visibility=“hidden“;}
    else {
      stav = 0;
      obr2_wipe.style.visibility=“hidden“;
      obr1_wipe.style.visibility=“visible“;}
   kontejner_wipe.filters[0].Play();}
 –>
</script>

Ovládací skript nejprve definujeme proměnnou stav a funkci wipe(), 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 wipe() definovány atributem style konečné hodnoty vlastností visibility prvků obr1_wipe a obr2_wipe, které jsou nastaveny právě 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:

<span id=“kontejner_wipe“ style=“width:250px; height:210px; filter:progid:DXImageTransform.Microsoft.GradientWipe(duration=10,gradientsize=0.8,motion=reverse,wipestyle=1);“>
<span id=“obr1_wipe“ style=“background-image: url(prechod1.gif);“>
<span id=“obr2_wipe“ style=“visibility:hidden;“><img src=“prechod2.gif“ width=“250px“ height=“210px“ alt=“Logo“ /></span>
</span>
</span>
<button onclick=“wipe()“>Spustit přechod GradientWipe</button>

Oba přechodné prvky obr1_wipe a obr2_wipe jsou vnořené do prvku kontejner_wipe. V něm je pomocí atributu style a vlastnosti filter definován přechod GradientWipe i se svými parametry duration=10 (doba trvání 10s), gradientsize=0.8 (překrývají se po 0.8), motion=reverse (směr je obrácený, tedy zdola nahoru), wipestyle=1 (odkrývání probíhá ve svislém směru shora dolů). 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 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ů s obrázky nad sebe. Tlačítko „Spustit přechod GradientWipe“ potom po kliknutí jenom zavolá funkci wipe() definovanou v ovládacím skriptu. Nesmíme zapomenout, že u elementů div a span musí být nastaven atribut width nebo height!

Přechod Inset

Odkryje nový obsah prvku pohybem rohu pravidelného čtyřúhelníku po diagonále. Tento přechod patří také k novým, dříve nezahrnutým přechodům.

Syntaxe:

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

Parametry:

Pro přechod Inset jsem jako příklad uvedl přechodný text na základě změny vlastnosti visibility přechodného prvku. Přechod Inset si můžete samozřejmě vyzkoušet také přímo na testovací stránce MSDN Microsoft.

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

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

V ovládacím skriptu nejprve definujeme proměnnou stav a potom funkci inset(), která po zavolání aplikuje daný přechod pomocí metody apply(). Definovaná proměnná stav zajišťuje, aby se přechod mohl opakovat. Dále jsou ve funkci inset() definovány atributem style konečné hodnoty vlastností visibility prvku txt_inset, 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:

<div id=“txt_inset“ style=“width:200px; height:70px; font-family:Comic Sans Ms; font-size:15px; color:gold; text-align:center; filter:progid:DXImageTransform.Microsoft.Inset(duration=4);“>Text měnící svoji vlastnost visibility za použití přechodu Inset</div>
<button onclick=“inset()“>Spustit přechod Inset</button>

Přechod Inset je nastaven přímo u přechodného prvku txt_inset pomocí atributu style a vlastnosti filter, tamtéž jsou nastaveny vlastnosti formátující text. Přechod má pouze parametr duration=4 (doba trvání 4s). Tlačítko „Spustit přechod Inset“ po kliknutí zavolá funkci inset(), nadefinovanou v ovládacím skriptu. Nesmíme zapomenout na nutnost nastavení atributů width nebo height u elementů div a span!

Přechod Iris

Zobrazí nový obsah prvku pomocí jednoho z předdefinovaných vzorů podobně jako při otvírání aperturu fotoaparátu. Nahrazuje přechody 0 až 3 staršího přechodu RevealTrans.

Syntaxe:

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

Parametry:

Pro přechod Iris jsem si jako příklad připravil text přecházející obrázkem za použití vlastnosti InnerHTML. Přechod Iris si můžete také vyzkoušet na stránce testovací stránce MSDN Microsoft.

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

<script>
 <!–
 var stav = 0;
 function iris() {
   obr_iris.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_iris.innerHTML=“<img src=’prechod1.gif‘ width=’250px‘ height=’210px‘ alt=’Logo MSIE 6.0′ />“;}
    else {
      stav = 0;
      obr_iris.innerHTML=“<br><br>Ukázka přechodu Iris<br><br>Text se zde mění za obrázek a obráceně, to vše pomocí stylu star – hvězda.“;}
   obr_iris.filters[0].Play();
 –>
</script>

V ovládacím skriptu je nejprve definována funkce iris(), 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 iris() pomocí vlastnosti InnerHTML, která mění obsah prvku včetně elementů jazyka HTML, nadefinovány konečné obsahy prvku obr_iris. Dále už funkce jenom volá metodu play() daného přechodu.

Zdrojový kód prvků:

<div id=“obr_iris“ style=“width:250px; height:210px; color:blue; font-family:Comic Sans MS; font-weight:bold; text-align:center; filter:progid:DXImageTransform.Microsoft.Iris(duration=4,motion=in,irisstyle=star);“>
<br><br>Ukázka přechodu Iris<br><br>Text se zde mění za obrázek a obráceně, to vše pomocí stylu star – hvězda.
</div>
<button onclick=“iris()“>Spustit přechod Iris</button>

Samotný přechod Iris je potom spolu se svými parametry duration=4 (doba trvání 4s), motion=in (přechod do středu), irisstyle=star (tvar arpetury je hvězda) definován v atributu style prvku obr_iris vlastností filter. V atributu style prvku obr_iris je ještě pomocí vlastností jazyka CSS nastaveno formátování písma zobrazovaného textu. Přechod je spuštěn kliknutím na tlačítko „Spustit přechod Iris“, které volá nadefinovanou funkci iris(). Všimněte si také, že u prvku obr_iris jsou v atributu style nastaveny povinné atributy (vlastnosti) pro prvky div a span, a to width nebo height.

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

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