Textualizer - nietypowy slajder tekstu | DailyWeb.pl - codziennie o sieci

Textualizer - nietypowy slajder tekstu

Opublikowano 6 lat temu -


Slajdery obrazów graficznych to standardowy element praktycznie każdej witryny internetowej. Co ciekawe do tej pory nie potrafię znaleźć sensownej polskiej nazwy tego tworu.

Korzystają z niego małe blogi ale także wielkie portale z dość prozaicznego powodu: ilości informacji którą można wyświetlić użytkownikowi. Jego kształt to z reguły grafika + opis, który znajduje się u jego dołu z krzykliwą treścią zachęcającą do kliknięcia.

Co gdyby pozbyć się grafiki i przewijać sam tekst? Wówczas powstał by produkt konkurencyjny do narzędzia Textualizer. Jego głównym zadaniem jest serwowanie treści z wykorzystaniem jednego z czterech dostępnych efektów. Twórca tego skryptu udostępnia nam takie efekty jak: fadeIn, slideLeft, slideToprandom. Zachowania poszczególnych animacji chyba nie trzeba tłumaczyć? ;-)

W jaki sposób skorzystać z Textualizera? Wystarczy podpiąć w sekcji <head> pobraną bibliotekę a następnie wywołać kod narzędzia:


var list = ['first blurb', 'second blurb', 'third blurb'];  // list elementów zawierających tekst do animacji

var txt = $('#txtlzr');  // nazwa sekcji w której znajduje się tekst

var options = {
duration: 1000,          // czas wyświetlania każdego elementu
rearrangeDuration: 1000, // czas trwania pojedynczej animacji
effect: 'random',        // rodzaj animacji
centered: true           // wyrównanie tekstu
}

txt.textualizer(list, options); // textualize it!
txt.textualizer('start'); // start

Textualizer obsługuje wszystkie popularne przeglądarki i jak zapewnia twórca, zadziała ona nawet w Internet Explorer 6 :-)