DHTML – Scroll-ovanje teksta

Od verzije 3 u Internet Explorer-u je veoma lako postići scroll-ovanje teksta, zahvaljujući tagu koji podržava ovaj efekat. To je tag . Potrebno je samo da ubacite neki tekst unutar taga i sve će raditi kako treba:

<marquee>Ovo je tekst 

koji ce scroll-ovati.

</marquee>

Takođe, od verzije IE4,
moguće je u tag ,
ugnezditi i druge HTML tagove.

<marquee><big>Ovo je VELIKI tekst koji ce scroll-ovati.</big></marquee>

Sve je ovo u redu u IE4, ali šta je sa Netscape-om. Netscape ne poseduje tag kakav je „marquee“, tako da se tekst koji se nađe u ovom tagu neće „kretati“. Ali ovo možemo da predupredimo malom JavaScipt funkcijom.
Pošto u Netscape Navigator-u ne postoji tag za scroll teksta, iskoristićemo jedan drugi tag – tag „layer“ (sloj) – koji Netscape podržava. U stvari kreiraćemo novi layer u kome će se nalaziti samo tekst, i dodavanjem kretanja sloju, omogućićemo efekat scroll-ovanja na našoj stranici. Tekst koji se nalazi na novom sloju biće u liniji sa celokupnom stranicom uz pomoć taga :

<ilayer name="scroll1" width=300 height=20>
<layer name="scroll2">Ovo je tekst koji scroll-uje.

Ovo je tekst koji scroll-uje....</layer>
</ilayer>

Potom ćemo koristeći jednostavan JavaScript povećavati levu poziciju sloja, i na taj način dobiti efekat kretanja. Tag definiše „scroll prozor“ (kao na slici), tj. fizički prostor sloja koji se vidi (zeleni pravougaonik). Tag definiše sam prostor za ukupni tekst koji će da scroll-uje i na slici je predstavljen belim pravougaonikom sa crnim ivicama. Script će pomerati beli pravougaonik kontinualno na levu stranu, sve do kraja teksta, i onda će krenuti iz početka. Evo i same JavaScript funkcije:

function scrollit (){
       //duzina teksta u scroll sloju (beli pravougaonik)
scrollerlength=document.scroll1.document.scroll2.document.width
if (document.scroll1.document.scroll2.left >= scrollerlength*(-1)){
      //smanjenje leve pozicije za 6 piksela
     document.scroll1.document.scroll2.left-=6
     setTimeout("scrollit()",100)
}
else {
      //ukoliko je scroll layer dosao do kraja, resetuje se pozicija
     document.scroll1.document.scroll2.left=300
      //i scroll-ovanje krece iz pocetka
      scrollit()
}
}

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.