Stworzenie animowanego banneru który będzie przemieszczał się po naszym ekranie w różnych kierunkach wcale nie jest rzeczą trudną do zrobienia. Do wykonania naszego zadania wystarczy nam 1 plik html w którym umieścimy nasz obraz oraz kod javascript, który będzie odpowiadał za poruszanie nim.

Zaczniemy od dodania naszego banneru do kodu html. Nadajemy mu id „animacja” do którego będziemy się później odwoływali w kodzie javascript. Dodajemy także funkcje „link();” która po kliknięciu w banner przeniesie nas do wybranej strony.

1
<img src="banner.png" id="animacja" style="position:absolute;" onClick="link();" alt="Nasz banner">

Następnie pod obrazkiem dodajemy kod javascript odpowiedzialny za przemieszczanie się naszego obrazka po ekranie. Każda linijka poniższego kodu została opatrzona komentarzem znajdującym się po znakach ” // ” w celu łatwiejszego zrozumienia działania skryptu. Kod mógłby być o wiele mniej rozbudowany, jednak nie chcemy przecież by nasz banner znikał gdzieś za granicami monitora… dlatego też gdy dotknie on granic okna naszej przeglądarki, odbije się i zacznie on poruszać się w drugą stronę.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script>
        var xPos = 0; // Początkowe X
        var yPos = 0; // Początkowe Y
        var step = 1; // Odległość jaka pokonuje obrazek z każdą klatką animacji
        var delay = 10; // Co ile milisekund następuje kolejna klatka animacji
        var yon = 1; // Włączone przemieszczanie pionowe
        var xon = 1; // Włączone przemieszczanie poziome
       
        function changePos() {
                width = document.body.clientWidth; // Szerokosc ekranu
                height = document.body.clientHeight; // Wysokosc ekranu
                Hoffset = animacja.offsetHeight; // Wysokosc obrazka
                Woffset = animacja.offsetWidth; // Szerokosc obrazka
                animacja.style.left = xPos + document.body.scrollLeft; // Przypisanie "marginesu" od lewej
                animacja.style.top = yPos + document.body.scrollTop; // Przypisanie "marginesu" od góry
               
                if (yon == 1) { // Jeśli przemieszczanie w pionie włączone
                        yPos = yPos + step; // Zwiekszenie "marginesu" od góry
                }
               
                else { // Jeśli przemieszczanie w pionie wyłączone
                        yPos = yPos - step; // Zmniejszenie "marginesu" od góry
                }
               
                if (yPos < 0) { // Jeśli obrazek próbuje przejechać przez górę obszaru
                        yon = 1; // Włącz przemieszczanie w pionie
                        yPos = 0; // Ustaw go przy górnej krawędzi obszaru
                }
               
                if (yPos >= (height - Hoffset)) { // Jeśli obrazek próbuje przejechać przez dół obszaru
                        yon = 0; // Wyłącz przemieszczanie w pionie
                        yPos = (height - Hoffset); // Ustaw go na dole obszaru
                }
               
                if (xon == 1) { // Jeśli przemieszczanie w poziomie włączone
                        xPos = xPos + step; // Zwiekszenie "marginesu" od lewej
                }
               
                else { // Jeśli przemieszczanie w poziomie wyłączone
                        xPos = xPos - step; // Zmniejszenie "marginesu" od lewej
                }
               
                if (xPos < 0) { // Jeśli obrazek próbuje przejechać przez lewy bok obszaru
                        xon = 1; // Włącz przemieszczanie w poziomie
                        xPos = 0; // Ustaw go przy krawędzi lewego boku obszaru
                }
               
                if (xPos >= (width - Woffset)) { // Jeśli obrazek próbuje przejechać przez prawy bok obszaru
                        xon = 0; // Wyłącz przemieszczanie w poziomie
                        xPos = (width - Woffset); // Ustaw go przy prawej krawędzi obszaru
                }
        }
        setInterval('changePos()', delay); // Animuje klatkę co daną ilość milisekund

        function link() { // Po kliknięciu na obrazek
                window.location.href = "http://www.fx-team.fulara.com"; // Przenosi do wybranej strony www
        }
</script>
JavaScript