Izrada kartice koja gradijalno mijenja boju na prelazak mišem preko elementa

Ovaj JavaScript kod stvara efekat gdje tekst unutar elementa s klasom card-subtitle postupno dolazi do izražaja, jedan po jedan, pri prelasku mišem (hover efekat).

Kloniraj lekciju

Evo što svaki dio koda radi:

1. const subtitle = document.getElementsByClassName("card-subtitle")[0];

• Ova linija traži prvi element na stranici s klasom card-subtitle i sprema ga u varijablu subtitle. Ovo pretpostavlja da postoji barem jedan takav element.

2. const createWord = (text, index) => { ... }

• Ova funkcija, createWord, prima dva argumenta:
  • text (tekst koji predstavlja jednu riječ).
  • index (pozicija te riječi u rečenici).
• U funkciji se:
  • Stvara novi span element.
  • U taj span se postavlja sadržaj, tj. riječ iz text argumenta, a dodaje se i razmak nakon svake riječi (ovo je zato što se dodaje razmak nakon svakog span elementa).
  • Dodaje se klasa card-subtitle-word na taj span, vjerojatno za stilizaciju kroz CSS.
  • Postavlja se CSS svojstvo transitionDelay koje stvara efekt vremenskog kašnjenja u animaciji, temeljen na index argumentu. Svaka riječ će se pojaviti sa zakašnjenjem od index * 40ms.
• Na kraju funkcija vraća kreirani span element.

3. const addWord = (text, index) => subtitle.appendChild(createWord(text, index));

• Funkcija addWord poziva funkciju createWord za svaku riječ, a zatim dodaje rezultat (novi span) kao dijete elementa subtitle.
• Na taj način se svaka riječ dodaje u card-subtitle element, jednu po jednu, s vremenskim kašnjenjem.

4. const createSubtitle = text => text.split(" ").map(addWord);

• Ova funkcija createSubtitle prima cijeli tekst (string) kao argument i:
  • Dijeli tekst na pojedine riječi pomoću split(" ").
  • Zatim poziva addWord funkciju za svaku riječ pomoću map metode, koja iterira kroz sve riječi u tekstu.

5. createSubtitle("Na prelazak mišem kartica će promijeniti boju gradijalno.");

• Ova linija poziva funkciju createSubtitle s rečenicom: “Na prelazak mišem kartica će promijeniti boju gradijalno.”
• Svaka riječ iz ove rečenice bit će dodana kao span element unutar subtitle elementa, a animacija će biti postavljena tako da svaka riječ dođe sa zakašnjenjem od 40ms * index.

Zaključak:

Ovaj kod omogućuje efekt gdje svaka riječ u tekstu unutar elementa s klasom card-subtitle postupno postaje vidljiva uz animaciju kašnjenja, stvarajući efekt pojavljivanja riječi jednu po jednu pri hoveru nad karticom.