Dziudek's jogger

Wraz z dołączeniem do naszej strony pliku moo.fx.pack.js otrzymujemy możliwość korzystania z kolejnych dwóch klas – Fx.Scroll i Fx.Color.

Fx.Scroll

Klasa Fx.Scroll daje nam możliwość przewijania zawartości danego elementu w górę, bądź w dół bez wykorzystywania paska przewijania. Efekt możemy oczywiście dostosować do własnych potrzeb, za pomocą opcji dostępnych tak jak w klasie bazowej Fx.Base:

efekt = new Fx.Scroll(‘nazwa_elementu’,{opcje_dodatkowe});

Na przykład:

efekt = new Fx.Scroll(‘test’,{duration: 1000});

Aby przewinąć zawartość elementu w górę wykorzystujemy funkcję up():

efekt.up();

natomiast, aby przewinąć zawartość elementu w dół, stosujemy funkcję down():

efekt.down();

PRZYKŁAD 1

Warto tutaj zwrócić uwagę, na fakt, że jeśli tekst (lub inna zawartość) będzie zajmować obszar o wysokości większej od dwóch wysokości danego elementu, to należy ustawić odpowiednio niską prędkość przewijania (opcja duration), aby internauta mógł spokojnie przeczytać przewijający się tekst, inaczej (przy dużych prędkościach przewijania), będzie można zobaczyć jedynie górny i dolny obszar o wysokości danego elementu.

Fx.Color

Klasa Fx.Color jak sama nazwa wskazuje, służy do manipulowania kolorem elementu. Możemy zmieniać kolor wybranej właściwości danego elementu, oczywiście pod warunkiem, że dana właściwość daje taką możliwość – chodzi tutaj głównie o kolor tła elementu, kolor tekstu czy kolor obramowania.

Aby zmienić kolor wybranej właściwości elementu, stosujemy następujący zapis:

tworzymy efekt:

efekt = new Fx.Color(‘nazwa_elementu’,’właściwość_elementu’,{opcje_dodatkowe});

dokonujemy zmiany:

efekt.custom(kolor_początkowy, kolor_końcowy);

Na przykład:

efekt = new Fx.Color(‘test’,’background’,{duration: 1000});

efekt.custom("#FFF", "#000");

PRZYKŁAD 2

Kolory początkowy i końcowy podajemy zawsze w postaci zapisu heksadecymalnego.

Przejdź do opisu pliku moo.fx.utils.js