Scrollende Tekst Maken Met HTML, CSS en JavaScript

JavaScript

Wanneer je al meer dan 25 jaar webapplicaties bouwt, zoals ik heb gedaan, is het gebruik van HTML, CSS en JavaScript een tweede natuur geworden.

In dit artikel laat ik je enkele eenvoudige manieren zien om scrollende tekst te maken met deze tools, inclusief vijf verschillende methoden voor het coderen van scrollende tekst met gewone HTML, HTML en CSS, en tenslotte, HTML + CSS + JS.

1. Gewone HTML Scrollende Tekst

Voeg eenvoudig een tag rond de tekst toe om een scroll-effect te creëren. Deze tag biedt een paar interessante parameters, waaronder:

direction — kan links, rechts, omhoog of omlaag zijn
scrollamount — de snelheid van de scrollende tekst
loop — hoe vaak moet de scroll herhaald worden

OPMERKING: Dit is een verouderde HTML-tag, dus ik raad aan om voorzichtig te zijn met het gebruik ervan voor moderne webprojecten.

2. Geanimeerde Scrollende Tekst Met CSS

Definieer een CSS-animatie genaamd scroll die de translateX eigenschap animeert.

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. HTML + CSS + JavaScript Scrollende Tekst

HTML-code:

HTML

<div class="scrolling-text">

Scrolling Text Scrolling Text Scrolling Text

</div>

CSS-code:

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. Scrollende Tekst Met 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.

In mijn ogen is jQuery in deze situatie een beetje overkill, en het heeft alleen zin als je jQuery al in je project hebt gebruikt.

Natuurlijk kan animate() ook worden gebruikt voor het animeren van de eigenschappen translateX of translateY zoals hierboven gezien.

5. Tekst scrollen met Canvas HTML5

Dit is mijn favoriete methode. Vooral omdat het zo flexibel is en zoveel mogelijkheden biedt, zoals bijvoorbeeld het exporteren van de scrollende tekst als GIF of zelfs video. Je kunt dit in actie zien door naar de Scrollende Tekst generator op PSDDude te gaan, waar je je eigen aangepaste scrollende tekstafbeeldingen en video’s kunt maken.

De HTML-code is eenvoudig:

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.

Je krijgt de grootte op het scherm van de tekst met behulp van de measureText() context methode. Dit maakt het mogelijk om een naadloos scrollende tekst te creëren door de tekstpositie te resetten wanneer deze de eindpositie bereikt.

Bonus: Een Paar Ideeën voor Scrollende Tekst

LED Scrollende Tekst GIF

Lees er meer over in deze link.

Star Wars Opening Crawl Scrollende Tekst Generator

Lees er meer over in deze link.

Scrollende Tekst voor de Beurs

Lees hier meer.

Weer Scrolende Tekst

Leer er meer over hier.

Deze zijn gemaakt met de scrollende tekst gif en video generator op PSDDude.

Conclusie

Nu weet je hoe je scrollende tekst kunt maken met behulp van HTML, CSS en/of JavaScript.

Waar ga jij dit voor gebruiken? Laat me een reactie achter om me dat te laten weten. Ook, als je vindt dat ik een belangrijke methode voor het maken van scrollende tekst heb gemist, geef me dan je gedachten daarover.

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