Nie jestem zwolennikiem biblioteki jQuery, uważam że często jest zbędna, a wiele rzeczy można zrobić szybciej w "gołym" JavaScript. Jednak ostatnio coraz częściej staję przed zadaniami, do których staje się ona niezbędna.
jQuery idealnie się sprawdza przy tworzeniu animowanych efektów np. slidery grafik i treści, animowane menu czy chociażby wysuwana z boku ekranu zakładka Facebooka. Idąc tym tropem zacząłem szukać w sieci jakichś gotowców do animacji banera (takie powolne ciągłe przesuwanie grafiki w lewo i tyle - nic więcej). Nie bardzo wiedziałem jak to nazwać, wyniki wyszukiwania ciągle dawały mi coś w rodzaju slidera czyli przewijanie co jakiś czas (lub po kliknięciu) danej grafiki. Analizowałem źródła i jakoś nie mogłem tego dopasować do swoich potrzeb. W końcu, po wielu godzinach, udało mi się znaleźć potrzebny moduł na frazę "panorama 360", uprościłem go i... wtedy okazało się, jakie miałem zaćmienie umysłu, że wcześniej sam na to nie wpadłem. Bo przecież to wszystko można było zrobić w kilku linijkach w "gołym" JavaScript:
function ScrollBaner(posx) {
var dx=-1;
var delay=40;
var wdth=1440;
posx+=dx;
if (posx<-wdth) posx=0;
document.getElementById("HeadBaner").style.backgroundPosition=posx+"px 0";
setTimeout("ScrollBaner("+posx+")",delay);
}
dx: kierunek i skok animacji (tutaj w lewo o 1 piksel)
delay: opóźnienie w milisekundach
wdth: szerokość banera
Generalnie cała funkcja wywołuje samą sobie co 40 milisekund z parametrem określającym bieżące położenie banera. Żeby uruchomić animację, trzeba wstępnie wywołać funkcję przez setTimeout:
setTimeout("ScrollBaner(0)",100);
Tło banera określamy w CSS:
#HeadBaner {background:#fff url(baner.gif); width:100%; height:180px;}
a w pliku HTML wpisujemy:
<div id="HeadBaner"></div>
Tyle. I nie trzeba do tego żadnych mniej lub bardzoej skomplikowanych klas. A w działaniu wygląda to tak jak tutaj.
