Přechody v CSS – dynamické vizuální filtry

Dalším nástrojem ke zpestření vašich internetových stránek mohou být právě přechody – rozpohybované vizuální filtry z dílny Microsoftu. V tomto článku bude řeč o dvou prapůvodních, stmívacím přechodu BlendTrans a zobrazovacím přechodu RevealTrans.

Přechody

Přechody v CSS (kaskádových stylech) velice úzce souvisí se statickými filtry, o kterých již byla na Intervalu řeč například v článku Statické filtry v CSS a několika dalších, a mají spolu také mnoho společného. Přechody jsou dynamické filtry, ovlivňující zobrazení změny obsahu prvku. V podstatě se jedná o animační efekty, použité pro přechod mezi původním a novým obsahem prvku. Sami o sobě ale nic neudělají, proto je potřeba je doplnit o jednoduché skripty iniciující vlastní přechody. Za oživení vaší stránky přechodem v podstatě nic nedáte a návštěvníka třeba příjemně naladíte pomalu se měnícím textem či obrázkem.

Syntaxe vlastnosti filter

Pro definování přechodů používáme stejně jako u statických filtrů vlastnosti filter jazyka CSS, která zatím není zahrnuta do žádného standardu CSS. Microsoft nám použití vlastnosti filter ještě více zkomplikoval, nahradil původní jednodušší syntaxi svou vlastní, která je složitější a použitelná pouze v prohlížečích MSIE 5.5 a vyšších. Dále v textu bude řeč o přechodech BlendTrans a RevealTrans, které využívají i původní syntaxi. Pro novou syntaxi jsou tyto dva přechody nahrazeny a doplněny novými přechody, více najdete v dokumentaci na stránkách MSDN Microsoftu.

Syntaxe vlastnosti filter v CSS:

{ filter: nazev_prechodu(prechod_param1, prechod_param2, prechod_param3, …); }

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, …)“

Přechody v CSS jsou v současné době bez problémů použitelné v prohlížečích MSIE 5.5 a vyšších. Nejsou zatím ale součástí žádných standardů, i když do připravované definice CSS3 by již měli být zahrnuty. Starou syntaxi s těmito dvěma přechody podporují u vybraných elementů prohlížeče MSIE již od verze 4.0.

Řídící skripty

Pro iniciaci přechodů musíme používat řídících skriptů, napsaných nejlépe ve skriptovacím jazyku JScript. Pro využití přechodů je připravena událost onfilterchange, jejíž stav můžeme zjistit také pomocí vlastnosti srcFilter objektu event, a metody apply, play a stop.

Synatxe pro přístup k metodám:

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

Poznámka: Pokud je nastavena hodnota parametru duration metody play, pak jsou ignorovány všechna nastavení vlastnosti Duration u jednotlivých přechodů.

Často využíváme u přechodných prvků k dosažení animačního efektu vlastnost visibility jazyka CSS, která může nabývat hodnot visible, hidden a inherit (přednastevený). Nastavením vlastnosti visibility u jednoho z přechodných prvků na hodnotu hidden docílíme toho, že bude zobrazen pouze jeden přechodný prvek a ostatní se zobrazí až při vyvolání přechodu. Po zavolání metody apply() pak musíme nastavit konečné hodnoty vlastnosti visibility. Názornou ukázku předkládám v příkladech u přechodů.

Přechod BlendTrans

Takzvaný stmívací přechod. Nový obsah prvku zobrazí zmizením nebo objevením původního obsahu prvku. Pro novou syntaxi je též označován jako přechod Fade.

Syntaxe:

{ filter: blendtrans(duration=floating-point,enabled=boolean,percent=string,status=integer); }

Parametry:

A nyní si všechno ukážeme a vysvětlíme na jednoduchém příkladu použití BlendTrans, využívajícím přechodu ke zmizení a zobrazení textu. Nejprve potřebujeme vytvořit ovládací skript, ve kterém definujeme dvě funkce – jednu pro zobrazení a druhou pro zmizení textu. Potom už jenom přidáme prvek obsahující mizící text a dvě ovládací tlačítka. Přechod BlendTrans si také můžete vyzkoušet přímo na stránkách MSDN.

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

<script>
 <!–
 function zmiz() {
   if (prvek.filters[0].status!=2){
      prvek.filters[0].apply();
      prvek.style.visibility=“hidden“;
      prvek.filters[0].play();}}
 function zobraz() {
   if (prvek.filters[0].status!=2){
      prvek.filters[0].apply();
      prvek.style.visibility=“visible“;
      prvek.filters[0].play();}}
 –>
</script>

Po zavolání funkce zmiz() skript nejprve projde podmínku a pokud paramter status filtru BlendTrans není roven 2, tedy pokud přechod právě neběží, připraví přechod pomocí metody apply(), nastaví výslednou hodnotu vlastnosti visible prvku na hidden a pak již spustí samotný přechod metodou play(). Obdobně je tomu i u funkce zobraz(), pouze s tím rozdílem, že výslednou hodnotu vlastnosti visible nastaví na visible.

Zdrojový kód prvku a tlačítek:

<div id=“prvek“ style=“width: 200px; filter: blendtrans(duration=2);“>Příklad využití filtru blendTrans</div>
<button onclick=“zmiz()“>Zmiz</button>
<button onclick=“zobraz()“>Zobraz</button>

Nejdůležitějším prvkem je pro nás v tomto případě prvek div, označený pomocí atributu id jako prvek. V atributu style jsme definovali pomocí vlastnosti filter přechod BlendTrans s parametrem duration nastaveným na hodnotu 2s. Tlačítko Zmiz volá po kliknutí funkci zmiz(), definovanou předtím v ovládacím skriptu. Stejně tak tlačítko Zobraz volá funkci zobraz(). Pro správné fungování přechodu nesmíme, stejně jako u statických filtrů, zapomenout u elementů div a span definovat atribut width nebo height!

Přechod RevealTrans

Takzvaný zobrazovací přechod. Nový obsah prvku zobrazí použití jednoho ze čtyřiadvaceti předdefinovaných přechodů. Pro novou syntaxi je nahrazen několika samostatnými přechody.

Syntaxe:

{ filter: revealtrans(duration=floating-point, enabled=boolean, percent=string, status=integer, transition=integer); }

Parametry:

Hodnoty parametru Transition:

Samozřejmě jsem pro vás připravil i jednoduchý příklad použití RevealTrans. Nejprve vytvoříme ovládací skript, ve kterém definujeme funkci pro spuštění přechodu. Pak již stačí jen přidat kontejner obsahující dva přechodné prvky a tlačítko, pomocí kterého celý přechod spustíme. Připravenou ukázku všech čtyřiadvaceti předdefinovaných přechodů přechodu RevealTrans můžete shlédnout a také vyzkoušet přímo na stránce Microsoftu.

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

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

Nejprve definujeme proměnou stav, která zajištěje pravidelné střídání zobrazených obrázků, a přiřadíme jí hodnotu 0. Funkce prechod() si připraví přechod pomocí metody apply(). Potom projde podmínku, která na základě proměnné stav zajišťuje střídání obrázků, a patřičně nastaví hodnoty proměnné stav a vlastnost visibility u prvků obr1 a obr2. Nakonec spustí přechod zavoláním metody play() daného přechodu.

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

<span id=“kontejner“ style=“width:150px; height:50px; filter:revealtrans(duration=5,transition=8);“>
<span id=“obr1″ style=“background-image: url(revealtrans1.gif);“>
<span id=“obr2″ style=“visibility:hidden; background:white;“><img src=“revealtrans2.gif“ width=“126px“ height=“40px“ alt=“Logo Microsoftu“ /></span>
</span>
</span>
<button onclick=“prechod()“>Přechod</button>

Oba přechodné prvky označené jako obr1 a obr2 jsme vložili do prvku kontejner, u kterého jsme pomocí atributu style a vlastnosti filter definovali přechod RevealTrans s parametrem duration nastaveným 5s a transition nastaveným na hodnotu 8, což je přechod svislými pruhy zleva. Prvek obr1 s vnořeným prvkem obr2 tvoří dvojici přechodných prvků, přičemž u prvku obr2 je přednastavena hodnota vlastnosti visibility na hidden, tedy skryto. Stejného efektu bychom jednodušeji dosáhli použitím absolutního polohování obou prvků s obrázky nad sebe. Tlačítko Přechod už jenom po kliknutí volá funkci přechod() definovanou v ovládacím skriptu. Nesmíme zase zapomenout na definování atributu width nebo height u tagů div a span!

Další zdroje

• MSDN Microsoft – asi nejucelenější zdroj informací o problematice přechodů
• W3C – referenční autorita jazyka CSS

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

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