Rolujeme pozadí stránky pomocí JavaScriptu

18. dubna 2003

•

Jako určitý zpestřující efekt nebo i pro zvláštní reklamu můžeme použít následující skript, který mění pozici obrázku na pozadí stránky.

K rolování pozadí použijeme skript, který zjistí velikost okna klienta a poté mění styl pozice objektu backgroundPosition v rozmezí od nuly do zjištěné pozice. Jakmile je dosaženo pozice výšky (šířky) okna, nastaví se pozice opět na nulu a rolování pokračuje od začátku – prohlédněte si ukázku.

<body style=“background-image: url(pozadi.gif);background-repeat:no-repeat“>
<script type=“text/javascript“>
<!–
var moveBg=0; // počáteční pozice, odkud se bude rolovat
function BackgroundRoll()
{ // funkce, která roluje pozadí v rozmezí moveBg až clientHeight
document.body.style.backgroundPosition=’20px ‚+moveBg + ‚px‘; // nastavit pozici na 20px od leva a moveBg px shora
moveBg++; // zvýšit pozici o 1
if (moveBg>=document.body.clientHeight)
moveBg=0; // pokud se dosáhlo pozice spodního okraje okna, začít od začátku
}
window.setInterval(„BackgroundRoll()“,32); // nastavit opakování funkce BackgroundRoll každých 32 ms
// –>
</script>
<p>V této stránce na pozadí roluje reklama.</p>
</body>

Funkce BackgroundRoll() je volána opakovaně každých 32 milisekund, přičemž při každém volání nastaví pozici pozadí a zvýší hodnotu pozice o 1. Nastavení pozice se provádí povelem, do kterého se poskládá vodorovná a svislá pozice document.body.style.backgroundPosition='20px 45px';. Důležité je také nastavení stylu pozadí tak, aby se obrázek neopakoval, což je zajištěno stylem pozadí body background-repeat: no-repeat.

V ukázce je horizontální souřadnice napevno zadána na 20 px, mění se pouze vertikální, a tak obrázek ujíždí ve svislém směru dolů. Jednoduchou úpravou můžeme dosáhnout opačného stavu, kdy bude obrázek pojíždět ve vodorovném směru, je pouze potřeba nastavit svislou pozici napevno a měnit vodorovnou pozici, document.body.style.backgroundPosition=moveBg + 'px 50px';. Současně je ovšem nutné v části, která sleduje, zda již pozadí není „mimo okno“, změnit clientHeight na clientWidth.

Pokud bychom chtěli změnit směr posuvu (zdola nahoru, zprava doleva), pak je potřeba výchozí hodnotu moveBg nastavit na výšku (šířku) okna klienta, ve funkci BackgroundRoll() změnit zvyšování pozice na snižování moveBg--; a současně upravit testování na dosažení nulové pozice – zhruba takto:

moveBg–; // snížit pozici o 1
if (moveBg<=0)
moveBg=document.body.clientHeight; // pokud se dosáhlo pozice horního okraje okna, začít od začátku

Samozřejmě by bylo možné rolovat v obou směrem současně, pozadí by pak mohlo ujížet „do rohu“. V závislosti na kombinaci směrů nahoru-dolů, doprava-doleva dosáhneme pohybu do požadovaného rohu.

Další možností, jak si pohrát s pozadím, je nastavit opakování obrázku jen v jedné ose, například background-repeat: repeat-x. Jak vypadá situace se stejným skriptem jako v první ukázce, ale s pozadím opakujícím se ve všech směrech, můžete vidět v druhé ukázce (vodorovná pozice je nastavena na 0 px).

Popsaný efekt by se mohl využít například v okně různých chatů, kam se jen obtížně propracovává jiný druh reklamy – dobře připravený banner by čas od času mohl zbystřit pozornost proplutím na pozadí. Skript jsem testoval v prohlížečích MSIE 6, Mozilla 1.3, NN7 a Opera. Soubor se zdrojovými kódy ukázek si můžete stáhnout.