Nové přechody – přehled 3.

V tomto přehledu nových přechodů z dílny Microsoftu se vám pokusím přiblížit tři další kousky. Prvním je přechod přes čtvercový barevný rozklad pixelů (Pixelate), dalším je RadialWipe vypadající jako rameno stěrače a posledním třetím je přechod RandomBars, který je pro změnu podobný nepravidelné roletě.

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ě ani nikdy nebudou (alespoň ve stávající podobě), protože se jedná výlučně o syntaxi Microsoftu.

Přechod Pixelate

Zobrazí nový obsah prvku pomocí barevných čtverců, jejichž barva je získána z průměru barev pixelů, které nahrazují. Pixelate je zcela nový přechod, dříve nezahrnutý.

Syntaxe:

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

Parametry:

Přechod Pixelate bych vám rád demonstroval na příkladě dvou přecházejících obrázků, přičemž řídící skript bude zcela jednoduše měnit pouze atribut src přechodného obrázku. Přechod Pixelate si můžete také vyzkoušet přímo na stránce testovací stránce MSDN Microsoft.

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

<script>
 <!–
 var stav = 0;
 function pixel() {
   obr_pixel.style.filter = „progid:DXImageTransform.Microsoft.Pixelate(duration=5,maxsquare=20)“;
   obr_pixel.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_pixel.src=“prechod2.gif“;}
    else {
      stav = 0;
      obr_pixel.src=“prechod1.gif“;}
   obr_pixel.filters[0].Play();}
 –>
</script>

Nejprve v ovládacím skriptu definujeme funkci pixel(). Dále, abychom zajistili použití filtru až při zavolání funkce, nastavíme pomocí vlastnosti filter atributu style prvku obr_pixel ve skriptu přechod Pixelate s jeho dvěma parametry duration=5 (doba trvání 5s), maxsquare=20 (maximální velikost čtverců 20). Pak již normálně aplikujeme 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 pixel() definována konečná hodnota atributu src obrázku obr_pixel, která je určena v závislosti na proměnné stav. Nakonec funkce zavolá metodu play() daného přechodu.

Zdrojový kód prvků:

<img src=“prechod1.gif“ id=“obr_pixel“ width=“250px“ height=“210px“ alt=“Logo“ /><br>
<button onclick=“pixel()“>Spustit přechod Pixelate</button>

U tohoto příkladu už je pro nás důležité jenom tlačítko „Spustit přechod Pixelate“, které po kliknutí zavolá funkci pixel() definovanou v ovládacím skriptu. Přechod je totiž v tomto případě definován již v ovládacím skriptu.

Přechod RadialWipe

Nový obsah prvku vznikne paprsčitým setřením původního obsahu podle nastaveného stylu. Podobá se efektu, který vyvolává rameno stěrače. Jedná se o zcela nový filtr, dříve nikde nezahrnutý.

Syntaxe:

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

Parametry:

V příkladu k přechodu RadialWipe si ukážeme přechod obrázku do textu pomocí vlastnosti InnerHTML. Jinak si přechod RadialWipe můžete vyzkoušet přímo na testovací stránce MSDN Microsoft.

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

<script>
 <!–
 var stav = 0;
 function rwipe() {
   obr_rwipe.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr_rwipe.innerHTML=“<br><br>Ukázka přechodu RadialWipe<br><br>Za pomoci přechodu RadialWipe zde uvidíte přechod ve stylu Wedge:)“;}
    else {
      stav = 0;
      obr_rwipe.innerHTML=“<img src=’prechod1.gif‘ width=’250px‘ height=’210px‘ alt=’Logo MSIE 6.0′ />“;}
   obr_rwipe.filters[0].Play();
 –>
</script>

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

Zdrojový kód prvků:

<div id=“obr_rwipe“ style=“width:250px; height:210px; color:olive; font-family:Comic Sans MS; font-weight:bold; text-align:center; filter:progid:DXImageTransform.Microsoft.RadialWipe(duration=4,wipestyle=wedge);“>
<img src=’prechod1.gif‘ width=’250px‘ height=’210px‘ alt=’Logo MSIE 6.0′ />
</div>
<button onclick=“rwipe()“>Spustit přechod RadialWipe</button>

Přechod RadialWipe je potom spolu se svými parametry duration=4 (doba trvání 4s) a wipestyle=wedge (okolo středu shora v obou směrech) definován v atributu style prvku obr_rwipe vlastností filter. V atributu style prvku obr_rwipe je ještě pomocí vlastností jazyka CSS nastaveno formátování písma textu. Přechod je pak spuštěn kliknutím na tlačítko „Spustit přechod RadialWipe“, které volá nadefinovanou funkci rwipe(). Všimněte si také, že u prvku obr_rwipe jsou v atributu style nastaveny povinné atributy (vlastnosti) pro prvky div a span, a to width nebo height.

Přechod RandomBars

Zobrazí nový obsah prvku náhodným odkrýváním tenkých linek. Nahrazuje přechody 21 a 22 staršího přechodu RevealTrans.

Syntaxe:

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

Parametry:

Přechod RandomBars bych vám rád předvedl na příkladě přechodu dvou obrázků při změně jejich atributu src. Přechod RandomBars si také můžete otestovat přímo na testovací stránce MSDN Microsoft.

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

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

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

Zdrojový kód prvků:

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

Přechod RandomBars je pak i se svými parametry duration=5 (doba trvání 5s) a orientation=vertical (ve svislém směru) definován v atributu style přechodného obrázku obr_rbars vlastností filter. Dále je tu ještě tlačítko „Spustit přechod RandomBars“, které po kliknutí zavolá funkci rbars() definovanou již dříve 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.