Cauta rapid aici ↑

Simpla animatie a unui text in javascript

Animatiile in JavaScript pot fi foarte complicate uneori si destul de mari ca dimeniune a script-ului, dar efectele sunt dintre cele mai frumoase plus ca au avantajul ca nu au nevoie de multe resurse si nici de un player care sa le redea.

Animatia de mai jos nu ar fi fost posibila atat de usor daca nu as fi folosit si limbajele HTML si CSS. Cu aceste limbaje am creat laptop-ul respectiv unde pe ecranul acestuia ruleaza rapid animatia cu text. Pentru HTML am folosit cateva linii de cod iar in CSS am folosit mult mai multe linii, fiecare element al laptop-ului fiind bine reprezentat inclusiv animatia cu acel cursor verde care pare ca clipeste. Nu este scopul acestui tutorial sa va prezint limbajul CSS insa va pot da un pont. Pentru a modifica laptop-ul pe latime si inaltime, faceti modificari in clasa CSS space-laptop.

In JavaScript primul lucru pe care il facem este sa selectam elementul de pe ecranul laptop-ului, element ce va contine si afisa text-ul nostru, iar acest element este tag-ul HTML code si binenteles ca il vom adauga intr-o variabila.

Imediat vom declara doua functii care ne vor afisa fiecare cate un singur rand de text pe ecranul laptop-ului. Sub fiecare functie, le vom apela pe fiecare in parte. Ca si structura functiile sunt foarte asemanatoare si vor contine fiecare cate trei variabile principale. Prima va fi un string cu textul pe care vrem sa il afisam, a doua va fi un array in care vom insera fiecare litera din string cu ajutorul unei structuri repetitive for pentru ca ulterior sa rulam o functie callback pe metoda setInterval la un anumit interval. La fiecare executie a metodei setInterval, aceasta va executa functia callback prin care vom afisa fiecare litera din string-ul pe care l-am inserat in acel array. A doua functie face si altceva fata de prima. Aceasta goleste din fereastra browser-ului continutul pe care prima functie l-a adaugat. Tot a doua functie o vom executa dupa un anumit timp si asta pentru a nu se intersecta cu prima functie si in acest caz animatia nu ar fi fost asa cum este acum, adica una placuta ochiului. Va las pe voi sa analizati ce am facut si cum am facut aceasta animatie, voi puteti sa scrieti mai eficient acest cod.

Extra

Pe acest principiu, cel de mai sus, am creat o functie care se va apela singura si se va executa in momentul in care un vizitator efectueaza click pe orice paragraf din pagina. Aceasta functie este conditionata sa ruleze o singura data indiferent pe ce paragraf din pagina vizitatorul a efectuat click. Voi puteti sa aplicati acest efect pe orice element ce contine text in interiorul lui. Pentru ca aceasta functie sa poata fi executata in toate paginile din site-ul vostru, va recomand sa lucrati curat si sa separati limbajele unele de altele si in acest caz sa puneti aceasta functie intr-un fiser extern cu extensia .js iar in HTML sa faceti legatura catre acest fisier.