Cum se face flickerul textului în HTML

Textul clipit nu a făcut niciodată parte din funcțiile HTML standard și nu există o abordare care să funcționeze pentru fiecare browser. Cea mai apropiată opțiune care folosește numai codul HTML este eticheta pentru marquee (sau marquee), dar chiar și acest lucru nu funcționează în Google Chrome. jаvascript este o metodă mai sigură și puteți să copiați și să inserați codul direct în documentul HTML.

conținut

Pași
Metoda 1utilizați eticheta marquee
Metoda 2utilizați jаvascript
Sfaturi
Avertismente

pași

Metoda 1
Utilizați eticheta marquee

Imaginea intitulată Faceți textul să clipească în HTML Pasul 1

Utilizați acest lucru numai în proiecte personale. Marca etichetă a devenit depășită, iar dezvoltatorii sunt încurajați să o evite. Diferitele browsere o vor afișa diferit, iar actualizările viitoare pot împiedica ca textul să clipească deloc. Aflați cum să utilizați jаvascript în schimb, dacă intenționați să creați un site profesional.

Google Chrome nu acceptă atributul "scrollamount", care este cea care susține această metodă. În acest browser, textul va trece prin pagină în loc să clipească.

Imaginea intitulată Make text Blink in HTML Pasul 2

Introduceți etichetele de marcă în jurul textului care clipește. Deschideți documentul HTML într-un simplu editor de text. introduce în fața textului pe care doriți să îl lumineze. introduce după text

Ca întotdeauna, scrieți prima pagină în HTML cu etichete , și .

Setați dimensiunea textului Schimbați eticheta de deschidere la latime ="300">. Acest lucru nu va schimba dimensiunea fontului. Există două motive pentru care poate fi necesar să modificați acest număr într-unul diferit:

În cazul în care textul nu se potrivește, se va mișca în loc să clipească. Măriți dimensiunea pentru a evita acest lucru.

În Chrome, textul se va deplasa de-a lungul unei distanțe determinate de dimensiune.

Imaginea intitulată Faceți textul să clipească în HTML Pasul 4

Setați scrollabount la aceeași valoare ca dimensiunea. În cadrul aceleiași etichete, scrieți scrollamount ="300" (sau același număr care are dimensiune). În mod implicit, textele marcajelor se deplasează de-a lungul paginii. Configurând scrollamount cu același număr ca dimensiunea, textul este "mută" în aceeași poziție. Acest lucru provoacă efectul de pâlpâire.

Textul va arăta similar cu următorul text:
A apărut text aici.

Imaginea intitulată Make text Blink in HTML Pasul 5

Schimbați viteza de derulare. Deschideți fișierul HTML într-un browser web pentru a vedea efectul. În cazul în care textul clipește prea lent sau prea lent, schimbați viteza cu atributul scrolldelay ="500". Valoarea implicită este 85. Utilizați un număr mai mare pentru a clipi mai lent sau unul pentru a bloca mai repede.

Acum veți avea:
A apărut text aici.

Imaginea intitulată Faceți textul să clipească în HTML Pasul 6

Limitați numărul clipirilor (opțional). Mulți utilizatori găsesc pâlpâirea în text enervant. Pentru a opri animația odată ce a atras atenția cititorului, introduceți bucla ="7". Textul va clipi de șapte ori și va dispărea (este posibil să utilizați orice număr în afară de șapte).

Codul complet este:
Clipește aici.

Metoda 2
Utilizați jаvascript

Imaginea intitulată Faceți textul să clipească în HTML Pasul 7

Introduceți un script de flicker în antetul documentului HTML. Între etichete și a documentului HTML, introduceți următorul cod jаvascript:

funcția blinktext () {
var f = document.getElementById ("anunț") -
setInterval (funcția () {
f.style.visibility = (f.style.visibility == `ascuns`? `:` ascuns `) -
}, 1000) -
}

Imaginea intitulată Faceți textul să clipească în HTML Pasul 8

Introduceți comanda pentru a încărca scriptul. Codul scris mai sus definește o funcție pe care a apelat-o "blinktext". Pentru a utiliza această funcție în HTML, schimbați eticheta la .

Imaginea intitulată Make text Blink in HTML Pasul 9

Definește textul care clipeste ca a "anunț". Scriptul afectează numai elementele identificate ca "anunț". Plasați textul care clipește în interiorul oricărui element și dați-i acea identitate. De exemplu, introduceți

A apărut text aici.

Puteți schimba acest nume pentru orice doriți. Doar asigurați-vă că utilizați același cuvânt în script și element "id".

Imaginea intitulată Faceți textul să clipească în HTML Pasul 10

Reglați scenariul Numărul "1000" în scenariu, stabilește perioada de timp dintre clipiri. Este în microsecunde, astfel încât valoarea 1000 face ca textul să clipească o dată pe secundă. Schimbați-l la un număr mai mic, astfel încât să clipească de mai multe ori sau pentru unul mai mare pentru ao încetini.

Spațiul în timp real nu se va potrivi perfect cu această valoare. Acesta tinde să fie puțin mai scurt, dar este posibil să aveți nevoie de mai mult timp în cazul în care browserul este ocupat cu alte procese.

sfaturi

Puteți ajusta aspectul marcajului text cu atributul "stil". Încercați să adăugați stil ="frontieră: solidă".
Este posibil să includeți un atribut de înălțime în eticheta de marcă, precum și un atribut de lățime, dar multe browsere o vor ignora. Este posibil să observați o diferență în cazul în care ați adăugat o margine la marquee.
De asemenea, puteți utiliza animații CSS pentru a bloca textul. Acest lucru este mult mai complicat și nu este recomandat pentru începătorii CSS. Rețineți că veți avea nevoie de a Document CSS legat (text în limba engleză) deoarece Firefox nu acceptă animații cu CSS intern.