Ať se okno roluje samo!

9. června 2002

•

Jako zvláštní efekt můžeme v dlouhé stránce přidáním následujícího skriptu aktivovat samočinné rolování. Stránka se chvíli po načtení začne sama rolovat, jako kdyby někdo posouval stránku myší nebo klávesnicí. Jakmile je dosaženo konce stránky, je po určité prodlevě nastavena na začátek a po chvíli se rolování opakuje. Tak můžeme čtenáře automaticky seznámit například s naším kompletní sortimentem.

Hned na začátku si můžete prohlédnout ukázku.

Princip rolování celého okna může být různý. Můžeme například uzavřít celou stránku do absolutně pozicovaného divu a měnit jeho pozici tak, že nám vlastně „uteče“ z obrazovky. Já jsem se rozhodl pro postup, kdy se využívá funkce JavaScriptu scroll(). Stránka se tedy skutečně fyzicky roluje. Základem je následující skript, který uložíme do externího souboru scrollpage.js:

if (navigator.appName==’Netscape‘)
StartRoll=1; // výchozí hodnota počátku rolování
else
StartRoll=0; // totéž pro „normální“ prohlížeč
TitresPosition=StartRoll;
EndRoll=0;
RollPause=2000; // jak dlouho čekat před opakováním rolování
function Titres() {
TitresPosition+=1; // zvýšit „narolovanou“ pozici o 1
scroll(0,TitresPosition); // odrolovat
if (navigator.appName == "Netscape")
    EndRoll=window.pageYOffset; // zjistit, kam až je treba rolovat v Netscape
if ((navigator.appVersion.indexOf("MSIE") != -1) || (navigator.userAgent.indexOf(„Opera“)!= -1))
    if (navigator.appVersion.indexOf("Mac") == -1)
      EndRoll=document.body.scrollTop; // zjistit, kam až je třeba rolovat v IE a Opeře
if (TitresPosition>EndRoll) { // pokud je zarolováno tak, že už okno stojí
    setTimeout("scroll(0,StartRoll)",RollPause); // po prodlevě nastavit pozici na vrchol okna
    TitresPosition=StartRoll; // nastavit pozici na začátek (vrchol) okna
    setTimeout("Titres()",RollPause*2); // a po prodlevě zahájit celé rolování znovu
}
else
    setTimeout("Titres()",50); // ještě je co rolovat – rekurzivně opakovat, číslo udává zpoždění rolování
}
setTimeout("Titres()",RollPause); // po prodlevě aktivovat rolování stránky

Uvedený skript pak vložíme do hotové HTML stránky, nejlépe těsně před uzavírací tag elementu body:

Skript jsem se snažil napsat tak, aby pracoval ve většině prohlížečů. Zajímavého efektu lze dosáhnout vložením do frame nebo iframe (pouze IE a Opera).Tento skript může také nalézt uplatnění i při rolování celé stránky, pokud obsah bude přiměřený možnostem této aplikace. Obsah rolujícího se okna může být zajímavé doplnit (stejně jako v ukázce) statickým obrázkem na pozadí, který ovšem nelze použít korektně v NN4.x, proto je styl uveden v externím souboru a je použita metoda @import, kterou NN4.x ignoruje. To už ale se samotným principem rolování celého okna přímo nesouvisí.

Celý příklad si můžete stáhnout.