Elementy fadeowane

Umieść skrypt w sekcji <HEAD> wraz ze zlinkowanym zewnętrznym plikiem fader.js (czarna skrzynka;)

<SCRIPT TYPE="text/javascript" SRC="fader.js"></SCRIPT>
Przypisz funkcję initFade() zdarzeniu onload

<BODY onload="initFade()">
W funkcji declareFade() umieść jedną lub więcej tablic, stanowiących deklarację fadeowania. Kolejne elementy takiej tablicy oznaczają:
- nazwę klasy elementu
- javascriptową własność stylu, której kolor ma ulegać zmianie np: "color", "backgroundColor", "borderColor"
- kolor początkowy w konwencji rgb
- kolor końcowy w konwencji rgb
- liczbę kroków fadeowania

Na przykład, umieszczenie tablicy:

['bialoczerwony','color','rgb(255,255,255)','rgb(255,0,0)',10]

oznaczać będzie, że każdy dowolny element HTML (zawierający tekst), posiadający atrybut class="bialoczerwony", będzie zmieniał kolor czcionki począwszy od koloru białego do czerwonego w 10 krokach.

Ustawiając odpowiednią ilość kroków, można regulować szybkość fadeowania. Szybkość fadeowania zależy nie tylko od liczby kroków, lecz również od stopnia podobieństwa kolorów: początkowego i końcowego. Ustawienie dwóch podobnych kolorów, na przykład czerwonego i pomarańczowego, spowoduje szybsze fadeowanie. Dlatego w takim przypadku, zalecam ustawienie większej ilości kroków.

Przykłady

Od czarnego do szarego w 10 krokach
Od białego do żółtego w 5 krokach
Od granatowego do niebieskiego w 6 krokach
Od czerwonego do żółtego w 8 krokach
Od niebieskiego do zielonego w 4 krokach
Od brązowego do złotego w 20 krokach

Pokaż źródło