Scrollenden Text mit HTML, CSS und JavaScript erstellen

Tutorials

JavaScript

Wenn Sie, wie ich, seit über 25 Jahren Webanwendungen erstellen, ist die Verwendung von HTML, CSS und JavaScript zur zweiten Natur geworden.

In diesem Artikel zeige ich Ihnen einige einfache Möglichkeiten, um scrollenden Text mit diesen Werkzeugen zu erstellen, einschließlich fünf verschiedener Methoden zum Codieren von scrollendem Text mit normalem HTML, HTML und CSS und schließlich HTML + CSS + JS.

1. Normaler HTML-Scrolltext

Fügen Sie einfach ein Tag um den Text hinzu, um einen Scrolleffekt zu erzeugen. Dieses Tag bietet einige interessante Parameter, darunter:

direction — kann links, rechts, oben oder unten sein
scrollamount — die Geschwindigkeit des scrollenden Textes
loop — wie oft sollte das Scrollen wiederholt werden

HINWEIS: Dies ist ein veraltetes HTML-Tag, daher empfehle ich, bei der Verwendung in modernen Webprojekten Zurückhaltung zu üben.

2. Animierter Scrolltext mit CSS

Definieren Sie eine CSS-Animation namens scroll, die die translateX-Eigenschaft animiert.

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 Scrolltext

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. Scrolltext mit 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.

Meiner Meinung nach ist jQuery in dieser Situation etwas übertrieben, und es macht nur Sinn, wenn Sie jQuery bereits in Ihrem Projekt verwendet haben.

Natürlich kann animate() auch verwendet werden, um die Eigenschaften translateX oder translateY zu animieren, wie oben gesehen.

5. Scrollender Text mit Canvas HTML5

Dies ist meine Lieblingsmethode. Besonders weil sie so flexibel ist und so viele Möglichkeiten bietet, wie zum Beispiel das Exportieren des scrollenden Textes als GIF oder sogar Video. Sie können dies in Aktion sehen, indem Sie zum Scrollenden Text Generator auf PSDDude gehen, wo Sie Ihre eigenen angepassten scrollenden Textbilder und -videos erstellen können.

Der HTML-Code ist einfach:

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.

Sie erhalten die Größe des Textes auf dem Bildschirm mithilfe der measureText() Kontextmethode. Dies ermöglicht das Erstellen eines nahtlosen scrollenden Textes, indem die Textposition zurückgesetzt wird, wenn sie die Endposition erreicht.

Bonus: Ein paar Ideen für scrollenden Text

LED scrollender Text GIF

Erfahren Sie mehr darüber in diesem Link.

Star Wars Eröffnungs-Crawl Scrollender Text Generator

Erfahren Sie mehr darüber in diesem Link.

Aktienmarkt Scrollender Text

Erfahren Sie mehr hier.

Wetter-Scrolling-Text

Erfahren Sie mehr darüber hier.

Diese wurden mit dem Scrolling-Text-GIF- und Video-Generator auf PSDDude erstellt.

Zusammenfassung

Jetzt wissen Sie, wie man Scroll-Text mit HTML, CSS und/oder JavaScript erstellt.

Wofür werden Sie dies verwenden? Lassen Sie mich das in einem Kommentar wissen. Auch, falls Sie denken, dass ich eine wichtige Methode zur Erstellung von Scroll-Text übersehen habe, teilen Sie mir Ihre Gedanken dazu mit.

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