DHTML – Scroll-ovanje teksta

 –  aลพurirano:  –  

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 na www.krstarica.com