Créer du texte défilant avec HTML, CSS et JavaScript

Tutoriels

JavaScript

Lorsque vous avez construit des applications web depuis plus de 25 ans, comme je l’ai fait, l’utilisation de HTML, CSS et JavaScript est devenue une seconde nature.

Dans cet article, je vais vous montrer quelques façons simples de créer du texte défilant en utilisant ces outils, y compris cinq méthodes différentes pour coder du texte défilant avec du HTML simple, du HTML et du CSS, et enfin, du HTML + CSS + JS.

1. Texte défilant en HTML simple

Il suffit d’ajouter une balise autour du texte pour créer un effet de défilement. Cette balise propose quelques paramètres intéressants, parmi lesquels :

direction — peut être à gauche, à droite, vers le haut ou vers le bas
scrollamount — la vitesse du défilement du texte
loop — combien de fois le défilement doit se répéter

REMARQUE : Il s’agit d’une balise HTML obsolète, je recommanderais donc de la restreindre lors de son utilisation pour des projets web modernes.

2. Texte défilant animé avec CSS

Définissez une animation CSS appelée scroll qui anime la propriété translateX.

CSS

@keyframes scroll {

 0% { transform: translateX(100%); }

 100% { transform: translateX(-100%); }

}

Then apply that animation to your text element:

HTML

<div class="scrolling-text">Scrolling Text</div>

By adding this CSS:

Plain Text

.scrolling-text {

width: 100%;

overflow: hidden;

white-space: nowrap;

box-sizing: border-box;

animation: scroll 10s linear infinite;

}

Changing from translateX to translateY will give you a vertical scrolling text. Switching 0% and 100% around will give you the reverse scrolling text direction. And in the .scrolling-text CSS class, if you change the 10s duration of the animation, you change the speed of the scrolling text.

3. Texte défilant en HTML + CSS + JavaScript

Code HTML :

HTML

<div class="scrolling-text">

Scrolling Text Scrolling Text Scrolling Text

</div>

Code CSS :

CSS

.scrolling-text {

width: 30vw;

white-space: nowrap;

overflow: hidden;

box-sizing: border-box;

font-size:clamp(16px,50dvh,220px);

white-space:nowrap;

margin: 0 auto;

}

JavaScript code:

JavaScript

const container = document.querySelector('.scrolling-text');

let scrollAmount = 0;

​

setInterval(() => {

 scrollAmount += 10;

 container.scrollLeft = scrollAmount;

 if (scrollAmount >= container.scrollWidth) {

  scrollAmount = 0;

 }

}, 20);

This is my most “unelegant” solution for making scrolling text. Basically, it’s cramming text in a container with a scroll and changing the scrolling of the container programmatically. When the scroll amount goes over the container amount, it resets.

4. Défilement du texte avec jQuery

CSS

$(document).ready(

 function loop() {

  $('.scrolling-text').css({scrollLeft:0});

  $('.scrolling-text').animate({ scrollLeft: "+=1000" }, 10000, 'linear', loop);

 }

);

Use the animate() jQuery function to animate the scrollLeft property, and this will create a scrolling text effect.

À mon avis, jQuery est un peu excessif dans cette situation, et cela n’a de sens que si vous avez déjà utilisé jQuery dans votre projet.

Bien sûr, animate() peut également être utilisé pour animer les propriétés translateX ou translateY comme indiqué ci-dessus.

5. Faire défiler du texte avec Canvas HTML5

C’est ma méthode préférée. Surtout parce qu’elle est si flexible et offre tant de possibilités, comme par exemple exporter le texte qui défile en tant que GIF ou même vidéo. Vous pouvez voir cela en action en allant sur le Générateur de texte défilant sur PSDDude, où vous pouvez créer vos propres images et vidéos personnalisées de texte défilant.

Le code HTML est simple :

HTML

<canvas id="scrollingCanvas" width="300" height="50"></canvas>

And the JS is where the magic happens:

JavaScript

const canvas = document.getElementById('scrollingCanvas');

const ctx = canvas.getContext('2d');

const text = "Scrolling Text Example";

let x = canvas.width;

​

function draw() {

 ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

 ctx.font = '20px Arial';

 ctx.fillStyle = 'black';

 ctx.fillText(text, x, 30);

 x -= 2; // Adjust speed of scrolling here

 if (x < -ctx.measureText(text).width) {

  x = canvas.width; // Reset position when text is out of view

 }

 requestAnimationFrame(draw);

}

​
draw();

Using a loop with requestAnimationFrame() calling the function draw() is actually the way HTML5 games implement their graphics drawing. This is a cool way to create smooth-scrolling text.

Vous obtenez la taille du texte à l’écran en utilisant la méthode de contexte measureText(). Cela permet de créer un texte défilant fluide en réinitialisant la position du texte lorsqu’il atteint la position finale.

Bonus : Quelques idées de texte défilant

GIF de texte défilant LED

En savoir plus à ce sujet dans ce lien.

Générateur de texte défilant de l’ouverture de Star Wars

En savoir plus à ce sujet dans ce lien.

Texte défilant du marché boursier

En savoir plus ici.

Texte déroulant météo

En savoir plus à ce sujet ici.

Ceux-ci ont été créés avec le générateur de gif et vidéo de texte défilant sur PSDDude.

Conclusion

Maintenant, vous savez comment créer du texte défilant en utilisant HTML, CSS et/ou JavaScript.

À quoi allez-vous l’utiliser ? Laissez-moi un commentaire pour me le faire savoir. De plus, si vous pensez que j’ai manqué une méthode importante pour créer du texte défilant, partagez vos réflexions à ce sujet.

Source:
https://dzone.com/articles/scrolling-text-html-css-javascript