Cauta rapid aici ↑

Cum sa personalizezi fiecare litera dintr-un titlu pentru anumite evenimente declansate de mouse

Personalizarea fiecarei litere dintr-un titlu se poate realiza foarte usor si cu ajutorul limbajelor HTML si CSS. In HTML am fi avut fiecare litera a unui titlu de nivel 1...6 (h1...h6) incorporata in tag-ul span caruia i-am fi atribuit o clasa CSS prin care puteam personaliza, stiliza respectiva litera. Tot cu CSS puteam sa ii punem un stil in momentul cand se efectueaza evenimentul hover peste respectiva litera. Realizam asta cu ajutorul pseudo-clasei :hover.

In JavaScript lucrurile acestea sunt putin mai complicate dar cu rezultate mult mai spectaculoase. Pentru HTML nu vom avea nevoie de nici-un tag span pentru a incorpora fiecare litera a titlului. Nu este nevoie decat sa punem titlul nostru asa cum este el in interiorul tag-ului h1...h6. In acest fel toata munca este facuta de limbajul JavaScript iar avantajele sunt un cod mai curat si o mai buna intelegere a HTML-ului de catre motorul Google pentru a stii ce tip de continut are respectiva pagina si nu in ultimul rand... o mai buna intelegere de catre un alt frontend developer al codului respectiv.

Un alt aspect pe care vreau sa il retineti este ca in acest caz vom folosi font-uri mai speciale, font-uri pe care le vom incarca de pe site-ul celor de la compania Adobe. Pentru mai multe informatii va rog sa vizitati acest url. → https://edgewebfonts.adobe.com ←. In site-ul lor veti gasi imediat o multime de font-uri pe care le puteti folosi in paginile voastre web. Daca nu va plac aceste font-uri, atunci puteti sa folositi oricare alt font va place.

Pentru acest exemplu ne vom folosi doar de limbajele CSS si JavaScript iar titlul va sta frumos in tag-ul h1. CSS-ul il vom folosi pentru a stiliza o litera din titlu care va apare intr-un tag span in BOM (Browser Object Model) cu ajutorul limbajului JavaScript. Va rog sa inspectati elementul in browser.

Primul lucru pe care il vom face in JavaScript este sa selectam elementele noastre si sa le declaram in variabile. Prima variabila va selecta tag-ul h1, a doua variabila va selecta si va contine toate literele ce se afla in tag-ul span, a treia variabila va contine intreg textul ce se afla in tag-ul h1 iar a patra variabila va fi un array gol care va contine ulterior toate literele titlului puse in tag-ul span.

Dupa aceste variabile, va trebui sa golim din fereastra browser-ului tot text-ul din titlu. Acest lucru nu se va putea vedea cu ochiul liber pentru ca se intampla foarte rapid. Mai departe vom avea nevoie de o bucla for prin care vom adauga in array-ul gol toate literele titlului si in acest moment vom avea literele cuvantului cu tot cu caracterul spatiu.

Urmatoarea linie de cod va lua fiecare variabila string din array (fiecare litera si spatiu) si o va insera in tag-ul span pentru ca mai apoi sa inseram intreg string-ul nostru in interiorul tag-ului nostru h1 exact cum se poate vedea mai jos. Daca vrem sa vedem cum arata array-ul nostru putem sa il afisam in consola, asa cum am facut eu.

Dupa cum se poate vedea in momentul cand inspectati fiecare span in browser, fiecarui span din titlu ii este atribuita o clasa CSS. Am facut asta pentru ca daca ulterior vreau sa personalizez o litera in mod special, atunci o pot face foarte usor.

Voi puteti merge mai departe ori cu CSS, prin personalizarea fiecarei litere ori cu script-ul JavaScript, aici ma refer ca puteti sa rulati una sau mai multe functii in momentul cand un eveniment ales de voi este declansat pe una din litere.