Hoe de flitstekst in HTML: 10 stappen te maken

De knipperende tekst is nooit een standaard HTML-functie geweest en wordt daarom in elke browser anders geïmplementeerd. De dichtstbijzijnde optie die alleen op HTML vertrouwt, is de Marquee-tag, maar zelfs niet werkt in Google Chrome. jаvascript - een betrouwbare methode waarmee u de code rechtstreeks naar het HTML-document kunt kopiëren en plakken.

Stappen

Methode 1 van 2:

Gebruik van de Marquee-tag

een. Gebruik het alleen voor persoonlijke projecten. De Marquee-tag is lang verouderd en de ontwikkelaars worden sterk aanbevolen om het te vermijden. Het wordt op verschillende manieren weergegeven in browsers en na de volgende update de tekst en kan helemaal stoppen met knipperen. Als u een professionele opgebaseerde site ontwikkelt, kunt u jаvascript beter vervangen.

Google Chrome ondersteunt het attribuut van Scrollamount niet, dat is gebaseerd op deze methode. Om deze reden knippert de tekst niet, maar om door de pagina te navigeren.

Titel afbeelding Maak tekst knipperen in HTML Stap 2

2. Surround Flashing Text Tag Marquee. Open een HTML-document in een eenvoudige teksteditor. Binnenkomen vóór de tekst die moet knipperen. Invoegen Aan het einde van de tekst.

Vergeet niet eerst Vul HTML-pagina Tegs , en .

Titel afbeelding Maak tekst knipperen in HTML Stap 3

3. Geef de breedte van de tekst op. Voeg toe aan het openingslabel breedte ="300">. Het zal de lettergrootte niet veranderen. Er zijn twee redenen waarom u deze waarde aan een ander moet wijzigen:

Als de tekst verder gaat dan de grens, zal het bewegen en niet knipperen. Verhoog de tekstbreedte om te voorkomen.

In chromen zal tekst naar een afstand worden gedefinieerd die is gedefinieerd door de opgegeven breedte.

Titel afbeelding Maak tekst knipperen in HTML Stap 4

4. Dupliceer de breedtewaarde voor het Scrollamount-attribuut. In dezelfde tag toevoegen scrollamount ="300" (dezelfde betekenis als de breedte). Marquee-tag dwingt de tekst om over de pagina te bewegen. Maar als u de breedtewaarde kopieert naar het Scrollamount-attribuut, gaat de tekst naar uw beginpositie, waardoor het flikkeringseffect wordt veroorzaakt.

Uw tekst moet er zoiets uitzien:
Knipperende tekst..

Titel afbeelding Maak tekst knipperen in HTML Stap 5

vijf. Verander de scroll-vertraging. Open het HTML-bestand in de browser om het resultaat te bekijken. Als de tekst te snel of te langzaam knippert, verandert u de snelheid met behulp van het kenmerk Scrollldelay ="500". Standaard is de vertraging 85 milliseconden.Vergroot dit nummer om de flikkering te vertragen, of verklein het om te versnellen.

Nu moet de reeks er als volgt uitzien:
Knipperende tekst.

Titel afbeelding Maak tekst knipperen in HTML Stap 6

6. Beperk de hoeveelheid verblinding (optioneel). Veel gebruikers zijn irritante knipperende tekst. Als u de aandacht van de gebruiker al hebt aangetrokken, stop dan de flikkering door het kenmerk toe te voegen Lus ="7". Nu knippert de tekst zeven keer en verdwijnt dan. In plaats van zeven kunt u elk ander nummer gebruiken.

Eindcode weergave:
Knipperende tekst.

Methode 2 van 2:

jаvascript gebruiken

een. Plaats het flikkertscript in de HTML-documentkop. Plaats de volgende jаvascript-code tussen tags en HTML-document:

Functie Blinktext () {
Var f = document.GetelementByID (`Aankondiging`)-
SetInterval (functie () {
F.Stijl.Zichtbaarheid = (f.Stijl.Zichtbaarheid == `verborgen` ? ``: `verborgen`)-
}, 1000)-
}

Titel afbeelding Maak tekst knipperen in HTML Stap 8

2. Plaats de opdracht om het script te downloaden. De bovenstaande code bepaalt de functie en noemt het "Blinktext" (knipperende tekst). Als u deze functie in HTML wilt gebruiken, wijzigt u de tag op de .

Toonde afbeelding Maak tekst knipper in HTML Stap 9

3. Bepaal de knipperende tekst als een advertentie. Dan beïnvloedt het script alleen de items met de aankondigingidentificatie (AD). Plaats de knipperende tekst in elk item en wijs deze deze ID toe. Voer bijvoorbeeld in

Knipperende tekst.

Noem hem zoals je wilt. Het belangrijkste is dat het script en de identificatie hetzelfde woord stonden.

Titel afbeelding Maak tekst knipperen in HTML Stap 10

4. Corrigeer het script. Het nummer "1000" in het script is verantwoordelijk voor de vertraging in het knipperen. Aangezien de waarde is aangegeven in Microseconden, maakt "1000" de tekst één keer per seconde. Verlaag dit nummer om te versnellen knipperen of verhoogt het om te vertragen.

De vertraging zelf zal waarschijnlijk niet precies voldoen aan deze waarde. Het is waarschijnlijk dat het een beetje korter zal zijn, maar het kan meer tijd kosten als de browser wordt overbelast door verzoeken.

Tips

Gebruik het stijlattribuut om het uiterlijk van de geselecteerde tekst te wijzigen. Probeer stijl toe te voegen ="Grens: solide".
Naast de breedte tot de Marquee-tag, kunt u ook een hoogte-attribuut toevoegen, maar veel browsers negeren het. Mogelijk merkt u het verschil als u het tekstframe omringt.
Om de tekst te forceren om te knipperen, kunt u CSS-animatie gebruiken. Dit is een nogal gecompliceerd proces en wordt niet aanbevolen voor beginnende programmeurs in CSS. U hebt een aangesloten CSS-document nodig, omdat Firefox CSS-animaties niet ondersteunt met ingebouwde CSS.