Dzisiaj jest piątek, 23 czerwca 2017
15 rzeczy, które pomogą Ci stać się bogatym25 cech ludzi silnych psychicznieDLACZEGO tak szybko oceniamy?
Animowany baner w JS

Animowany baner w JS

poniedziałek, 2012-01-230

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);
}

Wcale nie potrzeba jQuery, żeby zrobić animację banera
Zatweetuj

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 bardziej skomplikowanych klas.

Zobacz demo Scrollbanera w działaniu

Spodobał Ci się wpis? Udostępnij go w Social Media:
Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na