Animowany baner w JavaScript

poniedziałek, 2021-04-121657Alib CyMeS, Tutoriale, Internet, Programowanie

Pokażę Wam, jak przy pomocy „gołego” JavaScript można zrobić na stronie internetowej animowany baner, nawet taki wielowarstwowy z efektem paralaksy.

Zobacz demo ScrollBanera w działaniu

Chociaż obecnie biblioteka jQuery jest integralną częścią mojego CMS-a, to nie zawsze tak było, zwłaszcza, że do wielu działań jest po prostu zbędna i w „gołym” JavaScript dany efekt można uzyskać o wiele szybciej i sprawniej. Bardzo pomaga w tym CSS3, chociaż akurat w tym wypadku nie użyjemy go bezpośrednio do animacji.

Muszę przyznać, że do uzyskania opisanego efektu sam chciałem początkowo użyć jQuery i szukałem w internecie wielu rozwiązań, które jednak wciąż kręciły się wokół typowego slidera nie o to mi chodziło. Dopiero upraszczając skrypt do „Panoramy 360” ogarnąłem, jakie miałem wcześniej zaćmienie umysłu, że wcześniej nie wpadłem na tak banalne rozwiązanie.

Zacznijmy od przygotowania grafiki

Ja tradycyjnie narysowałem robale, podzieliłem na warstwy i takiej samej wysokości, co jest ważne. Szerokość ma mniejsze znaczenie, bo tak będzie się zapętlać, ale im większa, tym „szerszy” świat uzyskamy. Niestety kosztem „ciężaru” plików, bo ze względu na przezroczystość muszą być zapisane w formacie PNG. Ja zrobiłem 4 warstwy.

Przygotujmy style CSS

Potrzebny jest główny kontener i tyle subkontenerów, ile ma być warstw. Każda warstwa będzie wskazywać na odpowiedni plik PNG. Subkonteneru są pozycjonowane absolutnie względem rodzica, dlatego ważne jest, żeby każdy miał podaną taką samą wysokość.

#ScrollBaner {position:relative; width:100%; height:500px;}
#ScrollBaner .Baner {position:absolute; left:0; top:0; width:100%; height:500px;}
#ScrollBaner #Baner1 {background:url(img/baner-1.png);}
#ScrollBaner #Baner2 {background:url(img/baner-2.png);}
#ScrollBaner #Baner3 {background:url(img/baner-3.png);}
#ScrollBaner #Baner4 {background:url(img/baner-4.png);}

W sekcji BODY trzeba umieścić kontenery, to jest banalnie proste

<div id="ScrollBaner">
    <div class="Baner" id="Baner1"></div>
    <div class="Baner" id="Baner2"></div>
    <div class="Baner" id="Baner3"></div>
    <div class="Baner" id="Baner4"></div>
</div>

W końcu banalnie prosty skrypt

Ważne, żeby był na końcu, bo musi się uruchomić PO wyświetleniu całej strony, inaczej nie zadziała, bo skrypt nie znajdzie odpowiednich kontenerów.

var aBaner=new Array();
aBaner[0]=["Baner1",0,1.0,1400];
aBaner[1]=["Baner2",0,1.5,1200];
aBaner[2]=["Baner3",0,2.0,1233];
aBaner[3]=["Baner4",0,2.5,1400];

function ScrollBaner() {
    for(i in aBaner) {
        var cDX=aBaner[i][1]-aBaner[i][2];
        if (cDX<-aBaner[i][3]) cDX+=aBaner[i][3];
        aBaner[i][1]=cDX;
        document.getElementById(aBaner[i][0]).style.backgroundPosition=cDX+"px 0";
    }
    setTimeout("ScrollBaner()",20);
}

ScrollBaner();

Tablica aBaner zawiera odpowiednio dla każdej warstwy?: nazwę ID, bieżącą pozycję, wartość do przesunięcia w każdym cyklu oraz szerokość grafiki do zerowania pozycji po jej przekroczeniu. To akurat nie jest specjalnie istotne, ale mam takie zboczenie, żeby nie przekręcać żadnych liczników bez względu na ich pojemność. Zresztą kiedyś o tym przekonał się nawet YouTube, kiedy wyzerował się licznik obejrzeń teledysku Gangnam Style. Tutaj nie ma to akurat żadnego znaczenia, ale dobrze mieć ten nawyk :)

Funkcja ScrollBaner robi pętlę dla każdej warstwy, w której odczytuje bieżącą pozycję z tablicy, zwiększa o odpowiednią wartość, opcjonalnie zmniejsza o szerokość grafiki, zapisuje z powrotem do tablicy i w końcu odpowiednio ustawia pozycję tła kontenera. Ufff. Udało mi się to wszystko napisać w jednym zdaniu.

Po wszystkim wywołuje samą siebie po 20 milisekundach. Oczywiście samą funkcję też trzeba odpalić, stąd jej wywołanie na samym końcu skryptu.

I tyle, nie trzeba do tego żadnych mniej lub bardziej skomplikowanych pluginów jQuery.

Zobacz demo ScrollBanera w działaniu