Animacja warstwy DIV poprzez manipulację stylem CSS dla tej warstwy.

Wykorzystujemy funkcję

1
 setTimeout ( funkcja, czas, parametr );

Funkcja ta wywołuje z opóźnieniem inną, podaną jako pierwszy parametr funkcję. Kolejne wartości to opóźnienie w milisekundach, oraz parametr (tu aktualny rozmiar i pozycja animacji).

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
<html>
 <head></head>
 <body>
  <!-- Warstwa animacji, pozycja musi być absolute, nadajemy początkowe położenie i romiar animacji -->
  <div style="position: absolute; left: 95px; top: 50px; font-size: 15px;" id="warstwa">
   Tekst
  </div>

  <script>
        //zmienna globalna, od tej pory pisząc 'warstwa' odwolujemy się do DIV o tej nazwie:
        var warstwa = document.getElementById('warstwa');

        function przesun( kierunek )
        {
                var odLewej =  parseInt(warstwa.style.left); //odczytanie aktualnej pozycji od lewej i zamiana na liczbę bez px
                odLewej += kierunek; //dodanie pikseli, jeśli wartość ujemna będzie zmniejszać w kolejnym kroku
                warstwa.style.left = odLewej + 'px' ; //nadanie nowej pozycji warstwie
                warstwa.style.fontSize = odLewej + 'px';
                if (odLewej>300 || odLewej<0) kierunek *= -1;
                setTimeout( przesun, 50, kierunek); //za 50 ms zrobi przesun(kierunek);
        }
       
    przesun(5); //start animacji z krokiem 5 pikseli
  </script>

 </body>
</html>

Przykład 2

Drugi przykład, powyższą funkcję – jeśli dodamy jej jako parametr warstwę – można wykorzystać do tworzenia wielu współbieżnych animacji, o różnej szybkości:

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
<html>
 <head></head>
 <body>
  <!-- Warstwa animacji, pozycja musi być absolute, nadajemy początkowe położenie i romiar animacji -->
  <div style="position: absolute; left: 95px; top: 50px; font-size: 15px;" id="warstwa1">
   Duży
  </div>

  <div style="position: absolute; left: 295px; top: 200px; font-size: 200px; font-color:green;" id="warstwa2">
   Mały
  </div>

  <script>
        //zmienna globalna, od tej pory pisząc 'warstwa' odwolujemy się do DIV o tej nazwie:


        function przesun( warstwa, kierunek )
        {
                var odLewej =  parseInt(warstwa.style.left); //odczytanie aktualnej pozycji od lewej i zamiana na liczbę bez px
                odLewej += kierunek; //dodanie pikseli, jeśli wartość ujemna będzie zmniejszać w kolejnym kroku
                warstwa.style.left = odLewej + 'px' ; //nadanie nowej pozycji warstwie
                warstwa.style.fontSize = odLewej + 'px';
                if (odLewej>300 || odLewej<0) kierunek *= -1;
                setTimeout( przesun, 50, warstwa, kierunek); //za 50 ms zrobi   przesun (warstwa, kierunek);
        }
       
    var warstwa1 = document.getElementById('warstwa1');
    var warstwa2 = document.getElementById('warstwa2');
    przesun( warstwa1, 15); //start animacji z krokiem 5 pikseli
    przesun( warstwa2, 5);
  </script>

 </body>
</html>

Oto działający kod:
http://ti.fulara.com/~adam/fx-team/animacja.html
Lista dostępnych opcji stylu CSS jest tu:
http://www.w3schools.com/jsref/dom_obj_style.asp

JavaScript