Nové přechody – přehled 4.

Čtvrtý přehled nových přechodů z dílny Microsoftu je věnován dalším třem zajímavým přechodům. V prvním z nich projdeme zrněním při použití RandomDissolve, druhý nám umožňuje průchod skrze posun různých řezů původního obsahu (Slide) a třetí Spiral zase prochází šroubovitým pohybem k novému obsahu prvku.

Všechny tyto přechody, jak již bylo několikrát řečeno, 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ě ani nebudou, neboť se jedná výlučně o syntaxi Microsoftu.

Přechod RandomDissolve

Nový obsah prvku zobrazí zrněním. Nahrazuje přechod 12 staršího přechodu RevealTrans.

Syntaxe:

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

Parametry:

Pro demonstraci RandomDissolve jsem si pro vás vybral příklad přechodu dvou textů s využitím vlastnosti InnerHTML. Právě pro takovou aplikaci je tento přechod nejpříhodnější. Přechod RandomDissolve je nachystán k vyzkoušení také přímo na testovací stránce MSDN Microsoft.

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

<script>
 <!–
 var stav = 0;
 function rdis() {
   txt_rdis.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      txt_rdis.innerHTML=“<br>Jedině přechod RandomDissolve!“;}
    else {
      stav = 0;
      txt_rdis.innerHTML=“<br>Jak lépe dosáhnout takto efektní změny textu???“;}
   txt_rdis.filters[0].Play();
 –>
</script>

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

Zdrojový kód prvků:

<div id=“txt_rdis“ style=“width:250px; height:100px; font-family:Comic Sans MS; font-weight:bold; text-align:center; filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=3);“>
<br>Jak lépe dosáhnout takto efektní změny textu???
</div>
<button onclick=“rdis()“>Spustit přechod RandomDissolve</button>

Samotný přechod RandomDissolve je pak včetně svého parametru duration=3 (doba trvání 3s) definován v atributu style prvku txt_rdis vlastností filter. V atributu style prvku txt_rdis je pak ještě pomocí vlastností jazyka CSS nastaveno formátování písma textu. Přechod se spouští tlačítkem „Spustit přechod RandomDissolve“, které po kliknutí volá již nadefinovanou funkci rdis(). U prvku txt_rdis musí být v atributu style nastaveny povinné vlastnosti pro prvky div a span, a to width nebo height!

Přechod Slide

Zobrazí nový obsah prvku různým posouváním řezů jeho původního obsahu. Nenahrazuje žádný původní přechod.

Syntaxe:

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

Parametry:

Pro ukázku chování přechodu Slide jsem v tomto příkladu použil přechod dvou obrázku pomocí jednoduché změny atributu src. Přechod Slide je k vyzkoušení také přímo na testovací stránce Microsoftu.

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

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

V ovládacím skriptu nejprve nadefinujeme proměnnou stav a poté funkci slide(), která následně aplikuje daný přechod pomocí metody apply(). Proměnná stav zajišťuje za pomoci podmínek pravidelné střídání obrázků. Dále jsou ve funkci slide() definovány atributem style konečné hodnoty vlastností visibility prvků obr1_slide a obr2_slide, které jsou nastaveny v závislosti na hodnotě proměnné stav. Nakonec funkce už jen volá 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.Slide(bands=1,duration=6,slidestyle=swap);“>
<span id=“obr1_slide“ style=“background-image: url(prechod1.gif);“>
<span id=“obr2_slide“ style=“visibility:hidden;“><img src=“prechod3.gif“ width=“250px“ height=“210px“ alt=“Logo“ /></span>
</span>
</span>
<button onclick=“slide()“>Spustit přechod Slide</button>

Přechodné prvky obr1_slide a obr2_slide jsou vnořené do prvku kontejner_slide. V něm je pomocí atributu style a vlastnosti filter definován přechod Slide i se všemi svými parametry bands=1 (jeden řez), duration=6 (doba trvání 6s), slidestyle=swap (posouvá řez z prvku i nad prvek najednou). Nezapomeňte, ž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 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 Slide“ potom po kliknutí jenom volá předem definovanou funkci slide(). Nesmíme zapomenout také na nastavení atributů width nebo height u prvků div a span.

Přechod Spiral

Zobrazí nový obsah prvku šroubovitým pohybem. Patří k novým přechodům, které nebyly dříve nikde zahrnuty.

Syntaxe:

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

Parametry:

K prezentaci dovedností přechodu Spiral jsem se rozhodl využít příkladu obrázku a změny jeho vlastnosti visibility, takže doufám, že vše snadno pochopíte. Přechod Spiral si ale 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 spiral() {
   obr_spiral.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_spiral.style.visibility = „visible“;}
    else {
      stav = 0;
      obr_spiral.style.visibility = „hidden“;}
   obr_spiral.filters[0].Play();}
 –>
</script>

V ovládacím skriptu nejprve definujeme proměnnou stav a funkci spiral(), 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í viditelného a neviditelného obrázku. Dále jsou ve funkci spiral() definovány atributem style konečné hodnoty vlastností visibility prvku obr_spiral, které jsou nastaveny v závislosti na hodnotě proměnné stav. Nakonec už funkce volá jen metodu play() daného přechodu.

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

<img id=“obr_spiral“ src=“prechod1.gif“ width=“250px“ height=“210px“ style=“filter:progid:DXImageTransform.Microsoft.Spiral(duration=1,gridsizex=100,gridsizey=100);“ alt=“Logo“ /><br>
<button onclick=“spiral()“>Spustit přechod Spiral</button>

Přechod Spiral je i svými třemi parametry duration=1 (doba trvání 1s), gridsizex=100 (100 sloupců v mřížce), gridsizey=100 (100 řádků v mřížce) nastaven přímo u přechodného prvku obr_spiral pomocí atributu style a vlastnosti filter. Tlačítko „Spustit přechod Spiral“ pak už jen volá funkci spiral(), definovanou v ovládacím skriptu.

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

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