Nové přechody z dílny Microsoftu
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
Mohlo by vás také zajímat
-
Rychlost serveru: Klíč k lepšímu umístění ve vyhledávačích
7. června 2024 -
Znovuuvedení domény .AD
5. září 2024 -
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
10 nejpopulárnějších programovacích jazyků a jejich využití
9. listopadu 2023
Nejnovější
-
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024 -
Znovuuvedení domény .AD
5. září 2024