Strona głównaFacebookTwitterInstagramRSS
Dzisiaj jest czwartek, 27 kwietnia 2017
Zmiana interfejsu Photoshopa w minutęBardzo ważne pytania25 cech ludzi silnych psychicznie
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.

Darmowy plugin dla WordPressa

Jeśli ktoś mimo wszystko nie wie jak to ugryźć a korzysta z WordPressa, może skorzystać z darmowego pluginu Scroll Baner, który realizuje powyższe aż na pięciu warstwach!

Zobacz demo Scrollbanera w działaniu

Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na