Hoe de tekst in HTML kan flikkeren

Knipperende tekst maakt nooit deel uit van de standaard HTML-functies en er is een aanpak die voor elke browser werkt. De dichtstbijzijnde optie die alleen HTML gebruikt, is de selectiekader (of selectiekader), maar zelfs dit werkt niet in Google Chrome. jаvascript is een betrouwbaarder methode en u kunt de code rechtstreeks in het HTML-document kopiëren en plakken.

Inhoud

Stappen

Methode 1gebruik de marquee-tag
Methode 2gebruik jаvascript

Tips
Waarschuwingen

stappen

Methode 1
Gebruik de marquee-tag

Titel afbeelding Make Text Blink in HTML Stap 1

Gebruik dit alleen in persoonlijke projecten. Het selectiekader is verouderd en ontwikkelaars worden sterk aangemoedigd om het te vermijden. Verschillende browsers zullen het anders weergeven, en toekomstige updates kunnen de tekst helemaal niet laten knipperen. Leer jаvascript te gebruiken als u een professionele website gaat maken.

Google Chrome ondersteunt het kenmerk niet "scrollamount", die de methode ondersteunt. In deze browser zal de tekst door de pagina gaan in plaats van knipperen.

Titel afbeelding Make Text Blink in HTML Stap 2

Plaats de markeringslabels rond de knipperende tekst. Open het HTML-document in een eenvoudige teksteditor. invoeren voor de tekst die u wilt dat deze knippert. invoeren na de tekst

Zoals altijd schrijf de pagina eerst in HTML met labels , en .

Titel afbeelding Make Text Blink in HTML Stap 3

Stel de tekstgrootte in Verander de openingstag naar breedte ="300">. Dit zal de lettergrootte niet veranderen. Er zijn twee redenen waarom u dit nummer wellicht moet wijzigen in een ander:

Als de tekst niet past, wordt deze verplaatst in plaats van knipperend. Vergroot de maat om dit te voorkomen.

In Chrome verplaatst de tekst zich langs een afstand die wordt bepaald door de grootte.

Titel afbeelding Make Text Blink in HTML Stap 4

Stel het scrollamount in op dezelfde waarde als de grootte. Schrijf binnen hetzelfde label scrollamount ="300" (of hetzelfde nummer dat de grootte heeft). Standaard worden selectiereeksen op de pagina verplaatst. Door de scrollamount te configureren met hetzelfde nummer als de grootte, is de tekst dat "moves" in dezelfde positie als jij. Dit veroorzaakt het flikkereffect.

De tekst ziet er ongeveer als volgt uit:
Hier knippert de tekst.

Titel afbeelding Make Text Blink in HTML Stap 5

Verander het scrolldelay. Open het HTML-bestand in een webbrowser om het effect te zien. Als de tekst te langzaam of te langzaam knippert, wijzigt u de snelheid met het kenmerk scrolldelay ="500". De standaardwaarde is 85. Gebruik een hoger cijfer om langzamer te knipperen of een lager om sneller te flitsen.

Nu heb je:
Hier knippert de tekst.

Titel afbeelding Make Text Blink in HTML Stap 6

Beperk het aantal knipperingen (optioneel). Veel gebruikers vinden de flikker in de tekst vervelend. Om de animatie te stoppen nadat deze de aandacht van de lezer heeft getrokken, gaat u naar loop ="7". De tekst knippert zeven keer en verdwijnt (het is mogelijk om elk nummer naast zeven te gebruiken).

De volledige code is:
Knipperende tekst hier.

Methode 2
Gebruik jаvascript

Titel afbeelding Make Text Blink in HTML Stap 7

Voeg een flikkerscript toe in de kop van het HTML-document. Tussen labels en van het HTML-document, voeg de volgende jаvascript-code in:

function blinktext () {
var f = document.getElementById (`announcement`) -
setInterval (function () {
f.style.visibility = (f.style.visibility == `hidden`? ``: `hidden`) -
}, 1000) -
}

Titel afbeelding Make Text Blink in HTML Stap 8

Voeg de opdracht in om het script te laden. De hierboven geschreven code definieert een functie die heeft aangeroepen "blinktext". Als u deze functie in uw HTML wilt gebruiken, wijzigt u het label naar .

Titel afbeelding Make Text Blink in HTML Stap 9

Definieert de knipperende tekst als een "aankondiging". Het script heeft alleen betrekking op elementen die als geïdentificeerd zijn "aankondiging". Plaats de knipperende tekst in een willekeurig element en geef het die identiteit. Voer bijvoorbeeld in

Hier knippert de tekst.

U kunt deze naam wijzigen voor wat u maar wilt. Zorg ervoor dat u hetzelfde woord gebruikt in het script en het element "id".

Titel afbeelding Make Text Blink in HTML Stap 10

Pas het script aan Het nummer "1000" in het script bepaalt het de tijdsperiode tussen knipperen. Het is in microseconden, dus de waarde 1000 zorgt ervoor dat de tekst één keer per seconde knippert. Verander het in een kleiner getal zodat het meer keer flitst of voor een groter getal om het te vertragen.

De real-time ruimte past niet perfect bij deze waarde. Het heeft de neiging iets korter te zijn, maar je hebt mogelijk meer tijd nodig voor het geval de browser bezig is met andere processen.

tips

U kunt het uiterlijk van de tekstmarkering aanpassen met het kenmerk "stijl". Probeer style = toe te voegen"rand: vast".
Het is mogelijk om een hoogte-attribuut toe te voegen binnen de marquee-tag en één breedte, maar veel browsers zullen het negeren. Mogelijk merkt u een verschil in het geval u een rand aan het selectiekader hebt toegevoegd.
U kunt ook CSS-animaties gebruiken om de tekst te laten knipperen. Dit is vrij ingewikkeld en wordt niet aanbevolen voor CSS-beginners. Houd er rekening mee dat u een CSS-document gekoppeld (tekst in het Engels) omdat Firefox geen animaties met interne CSS ondersteunt.