Comment faire clignoter du texte en HTML : 10 étapes (avec des images)

Teneur

Pas
- Méthode 1 sur 2 : Utilisation de la balise de sélection
- Méthode 2 sur 2: Utilisation de JavaScript
Des astuces
Mises en garde

Le texte clignotant n`a jamais fait partie des fonctionnalités standard de HTML et il n`y a pas d`approche qui fonctionne pour chaque navigateur. L`option la plus similaire qui n`utilise que du HTML est la balise marquee, mais même elle ne fonctionne pas avec Google Chrome. Javascript est une méthode plus fiable et vous pouvez couper et coller le code directement dans votre document html.

Pas

Méthode 1 sur 2 : Utilisation de la balise de sélection

Image intitulée Faire clignoter le texte en HTML Étape 1

1. Utilisez la balise de sélection uniquement pour les projets personnels. La balise marquee est obsolète et les développeurs recommandent fortement de l`éviter. Différents navigateurs l`afficheront différemment et les futures mises à jour pourraient empêcher le texte de clignoter complètement. si vous allez créer un site web professionnel.

Google Chrome ne prend pas en charge l`attribut `scrollamount`, sur lequel repose cette méthode. Dans ce navigateur, votre texte défile sur la page au lieu de clignoter.

Image intitulée Faire clignoter le texte dans HTML Step 2

2. Insérez les balises de sélection autour du texte clignotant. Ouvrez votre document html dans un simple traitement de texte. taper

Comme toujours configurez d`abord votre page html de

Image intitulée Faire clignoter le texte dans HTML Step 3

3. Définir la largeur du texte. Remplacez la balise d`ouverture par

Si votre texte ne rentre pas, il roulera au lieu de clignoter. Augmenter la largeur pour éviter cela.

Dans Chrome, le texte roulera sur une distance déterminée par sa largeur.

Image intitulée Faire clignoter le texte dans HTML Step 4

4. Réglez le scrollamount à la même valeur que la largeur. Dans la même balise que vous écrivez quantité de défilement=`300` (ou le même nombre que la largeur). Par défaut, le texte de sélection défile sur l`écran. En définissant le scrollamount sur le même nombre que la largeur, le texte « défilera » dans la même position qu`avant. Cela donne un effet de clignotement.

Votre texte devrait maintenant ressembler à ceci :

Image intitulée Faire clignoter le texte dans HTML Step 5

5. Modifier le délai de défilement. Ouvrez le fichier html dans un navigateur Web pour voir l`effet. Si le texte clignote trop vite ou trop lentement, modifiez la vitesse avec l`attribut scrolldelay=`500`. Le délai par défaut est défini sur 85. Utilisez un nombre plus élevé pour un clignotement plus lent ou un nombre inférieur pour un clignotement plus rapide.

Vous devriez maintenant avoir :

Image intitulée Faire clignoter le texte dans HTML Step 6

6. Limiter le nombre de flashs (facultatif). De nombreux internautes trouvent le texte clignotant ennuyeux. Pour arrêter l`animation une fois que vous avez l`attention du lecteur, entrez boucle=`7`. Maintenant, le texte clignotera sept fois puis disparaîtra. (Vous pouvez utiliser n`importe quel nombre au lieu de sept.)

Le code complété :

Méthode 2 sur 2: Utilisation de JavaScript

Image intitulée Faire clignoter le texte dans HTML Step 7

1. Insérez un script clignotant en en-tête de votre document html. Entre le

function blinktext() {
var f=document.getElementById(`annonce`);
setInterval(fonction() {
F.style.visibilité=(f.style.visibilité==`caché` ? `` : `caché`);
}, 1000);
}

Image intitulée Faire clignoter le texte dans HTML Step 8

2. Insérez la commande pour charger votre script. Le code ci-dessus a défini une fonction et l`a appelée « blinktext ». Pour utiliser cette fonction dans votre html, modifiez le

Image intitulée Faire clignoter le texte dans HTML Step 9

3. Définissez votre texte clignotant comme une annonce. Ce script n`affecte que les éléments avec l`id `annonce`. Placez votre texte clignotant à l`intérieur de chaque élément et donnez-lui cet identifiant. Par exemple, tapez

Vous pouvez renommer ce que vous voulez. Assurez-vous simplement d`utiliser le même mot dans le script et l`identifiant de l`élément.

Image intitulée Faire clignoter le texte dans HTML Step 10

4. Personnaliser le script. Le nombre `1000` dans le script définit le délai entre les clignotements. C`est en microsecondes, donc une valeur de 1000 fera clignoter le texte une fois par seconde. Changez-le pour un nombre inférieur pour accélérer le clignotement ou un nombre supérieur pour le ralentir.

Le délai réel ne sera probablement pas exactement égal à cette valeur. Il est généralement un peu plus court, mais peut prendre plus de temps si votre navigateur est occupé par d`autres requêtes.

Des astuces

Vous pouvez personnaliser l`apparence du texte de sélection avec l`attribut style. Essayez d`ajouter style=`border:solid`.
Vous pouvez également inclure un attribut de hauteur dans la balise de sélection en plus de la largeur, mais de nombreux navigateurs l`ignoreront. Vous pouvez voir une différence si vous ajoutez une bordure au rectangle de sélection.
Vous pouvez également utiliser des animations CSS pour faire clignoter le texte. C`est assez difficile et déconseillé aux débutants en CSS. Notez que vous devez avoir un document CSS lié, car Firefox ne prend pas en charge les animations CSS avec CSS en ligne.