Protože původních přechodů bylo málo a syntaxe byla až příliš jednoduchá a nevyužitá, přišel Microsoft se sérií nových přechodů, které plně nahrazují původní sadu a navíc ji ještě rozšiřují. Podívejme se na jejich přehled.

Nové přechody

O problematice přechodů jsem psal již v předchozím článku, věnovaném přechodům v CSS, proto jenom připomínám, že dva původní přechody (BlendTrans – stmívací přechod a RevealTrans – zobrazovací přechod), použitelné pouze se starší syntaxí, nahradil Microsoft sérií nových přechodů, které však již fungují pouze s nově definovanou syntaxí. Právě těmto novým filtrům je věnován tento článek.

Nová syntaxe vlastnosti filter

Pro definování přechodů používáme stejně jako u statických filtrů a původní syntaxe vlastnosti filter jazyka CSS, která zatím není zahrnuta do žádného standardu CSS. Rozdílem vůči původní syntaxi je použití složitého textové řetězce před názvem filtru, jinak se syntaxe nijak neliší. Stejná zůstala i syntaxe pro přístup ovládacích skriptů k přechodům.

Synatxe podle Microsoftu:

{ filter: progid:DXImageTransform.Microsoft.Nazev_prechodu(prechod_param1, prechod_param2, prechod_param3, …); }

Syntaxe pro přístup skriptů:

objekt.style.filter = „nazev_prechodu(prechod_param1, prechod_param2, prechod_param3, …)“

Tyto přechody 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ě nebudou zahrnuty ani do CSS3, neboť se jedná výlučně o syntaxi Microsoftu.

Řídící skripty

Pro spouštění přechodů používáme řídící skripty, o kterých jsem již podrobněji psal a tak se k nim nebudu podrobněji vracet. Stručně, pro používání přechodů jsou tu připraveny metody apply, play a stop a událost onfilterchange. Metoda apply aplikuje přechod, metoda play spouští samotný přechod a metoda stop jej v případě potřeby zastaví.

Synatxe pro přístup k metodám:

objekt.filters[id_prechodu].Nazev_metody([parametr_prechodu])

Přehled přechodů

Přechod Parametry Popis
Barn duration=floating-point, enabled=boolean, motion=string, orientation=string, percent=string, status=integer 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.
Blinds bands=integer, direction=string, duration=floating-point, enabled=boolean, percent=string, status=integer Zobrazí nový obsah prvku skrz roletu o zadaném počtu pásů.
CheckerBoard direction=string, squaresx=integer, squaresy=integer Zobrazí nový obsah prvku postupným odkrýváním čtvercových polí šachovnice původního obsahu.
Fade duration=floating-point, enabled=boolean, overlap=floating-point, percent=string, status=integer Nový obsah prvku zobrazí postupným zatměním původního obsahu prvku.
GradientWipe duration=floating-point, enabled=boolean, gradient-size=floating-point, motion=string, percent=string, status=integer, wipestyle=string Odkryje nový obsah prvku pohybem postupně odkrývajícího pásu.
Inset duration=floating-point, enabled=boolean, percent=string, status=integer Odkryje nový obsah prvku pohybem bodu po diagonále.
Iris duration=floating-point, enabled=boolean, motion=string, irisstyle=string, percent=string, status=integer Zobrazí nový obsah prvku pomocí jednoho z předdefinových vzorů, podobně jako při otvírání otvoru fotoaparátu.
Pixelate duration=floating-point, enabled=boolean, maxsquare=integer, percent=string, status=integer Zobrazí nový obsah prvku pomocí barevných čtverců, jejichž barva je získána z průměru barev pixelů, které nahrazují.
RadialWipe duration=floating-point, enabled=boolean, percent=string, status=integer, wipestyle=string Nový obsah prvku vznikne paprsčitým setřením původního obsahu podle nastaveného stylu.
RandomBars duration=floating-point, enabled=boolean, orientation=string, percent=string, status=integer Zobrazí nový obsah prvku náhodným odkrýváním tenkých linek.
RandomDissolve duration=floating-point, enabled=boolean, percent=string, status=integer Nový obsah prvku zobrazí zrněním.
Slide bands=integer, duration=floating-point, enabled=boolean, percent=string, slidestyle=string, status=integer Zobrazí nový obsah prvku různým posouváním řezů původního obsahu prvku.
Spiral duration=floating-point, enabled=boolean, gridsizex=integer, gridsizey=integer, percent=string, status=integer Zobrazí nový obsah prvku šroubovitým pohybem.
Stretch duration=floating-point, enabled=boolean, percent=string, status=integer, stretchstyle=string 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.
Strips duration=floating-point, enabled=boolean, motion=string, percent=string, status=integer Zobrazí nový obsah prvku pohybem odkrývajícího zubatého pruhu po diagonále.
Wheel duration=floating-point, enabled=boolean, percent=string, spokes=integer, status=integer Zobrazí nový obsah prvku postupným odkrýváním paprsku rotujícího kolem středu.
Zigzag duration=floating-point, enabled=boolean, gridsizex=integer, gridsizey=integer, percent=string, status=integer Nový obsah prvku zobrazí pohybem tam a zpět postupně shoda dolů.

Malá ukázka

Čeho můžeme dosáhnout například pomocí přechodu GradientWipe vám nyní ukáži a vysvětlím na jednoduchém příkladě. Kompletní zdrojový kód:

<script>
 <!–
 var stav = 0;
 function gwipe() {
   kontejner.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr.src=“prechod2.gif“;}
    else {
      stav = 0;
      obr.src=“prechod1.gif“;}
   kontejner.filters[0].Play(duration=3);}
 –>
</script>
<div id=“kontejner“ style=“width:250px; height:210px; filter:progid:DXImageTransform.Microsoft.GradientWipe(gradientsize=1.0,wipestyle=1,motion=forward);“>
<img src=“prechod1.gif“ id=“obr“ width=“250px“ height=“210px“ alt=“Logo“ />
</div>
<button onclick=“gwipe()“>Spustit přechod GradientWipe</button>

Pro vysvětlení doplním ještě zdrojový kód o stručný komentář toho nejdůležitějšího. Ovládací funkce gwipe() nejprve připraví přechod zavoláním metody apply(), potom nastaví konečnou hodnotu atributu src prvku obr. Nakonec spustí přechod zavoláním metody play() daného přechodu. Přechod jako takový i se svými parametry je potom definovám v atributu style rodičovského prvku kontejner vlastností filter. Nesmíme ale zapomenout, že u elementů div a span je stejně jako u statických filtrů nutné nadefinovat atribut width nebo height!

Další zdroje

  • MSDN Microsoft – nejucelenější zdroj informací o této problematice
  • W3C CSS – referenční autorita jazyka CSS

Žádný příspěvek v diskuzi

Odpovědět