Softonic

Generator voor scrollend tekst

Stap 1 / 2
Volgende

Scrolbare koppen zijn een manier waarop mededelingenbalken, aandelentickers en evenementbanners veel informatie weergeven op een smalle schermstrook. Deze generator maakt het klassieke HTML-effect <marquee> opnieuw met een pure CSS-@keyframes- en transform: translateX()-animatie, waardoor de techniek in alle moderne browsers blijft werken zonder de verouderde tag. Kies een bericht, stel de snelheid in seconden per loop in, bepaal de kleuren en lettergrootte, en bekijk de ticker live voordat u die met de onderstaande CSS nabouwt.

Hoe je een scrollbare banner bouwt

  1. 1

    Typ de berichting in

    Voer de kop op. Korte regels (4–10 woorden) passen het beste bij een bewegende strip.

  2. 2

    Kies de snelheid

    Lage scroltijden = snellere scrolling. Een volledige loop van 30 tot 60 seconden is geschikt voor nieuwsgerichte tikkers.

  3. 3

    Kleur en grootte instellen

    Kies een voorgrond voor de tekst, een achtergrond voor de streep en een lettergrootte die past bij de hoogte van uw kop.

  4. 4

    Voorbeeldweergave

    De demo wordt in real time geanimeerd, zodat u de leesbaarheid kunt beoordelen voordat u het product uitbrengt.

  5. 5

    Bouw het na in CSS

    Kopieer het onderstaande `@keyframes`- en `transform: translateX()`-patroon naar uw eigen stylesheet om de ticker op uw site na te maken.

Waarom CSS-animatie in plaats van <marquee>

De tag <marquee> is in HTML5 verouderd en wordt door WHATWG als obsoleet gemarkeerd. Browsers geven deze tag nog steeds weer, maar toegankelijkheidstools en validators reageren hier negatief op; bovendien verliest u nauwkeurige controle over easing en het gebruik van lussen. Een transform: translateX()-animatie binnen een overflow: hidden vertoont met moderne tools identiek visueel gedrag.

Afstelling van de snelheid

De tijd die nodig is om het venster te doorlopen, hangt af van zowel de duur als de totale breedte. Een schatting voor een viewport van 1200 px:

Duur Gevoel Typische gebruiksomstandigheden
10–20 seconden Snelle reactie, hoog niveau van aandacht Flashverkopen, dringende waarschuwingen
30–45 seconden Nieuwsbalk Live-scores en koppenbalken
60–90 seconden Atmosfeer Plaatsborden, conferentiezalen
120 s + Bijna niet bewegen Decoratieve banieren van luxe merken

Controlelijst voor bereikbaarheid

  • Wikkel de strook in role="marquee" of aria-live="off", zodat schermlezers het bericht niet bij elke herhaling opnieuw voorlezen.
  • Beperk de beweging met @media (prefers-reduced-motion: reduce) { animation: none; } en toon de tekst statisch.
  • Houd de contrastverhouding tussen tekst en achtergrond op ten minste 4,5:1; bewegende tekst is moeilijker te lezen dan statische tekst.
  • Plaats nooit cruciale informatie (juridische kennisgevingen, prijzen, foutmeldingen) uitsluitend in een scrollbalk.

Veelgestelde vragen

Nee. Het voorbeeld is een <div> met overflow: hidden en een CSS-animatie @keyframes die het interne gedeelte verplaatst met behulp van translateX. Dit valideert als moderne HTML5.

Voeg animation-play-state: paused toe aan de hovering-selecteur van het container. Sommige gebruikers vinden dit gebruiksvriendelijker dan een constante lus.

Ja. Verander de eindwaarde van @keyframes van translateX(-100%) naar translateX(100%) en begin bij -100% om de richting om te keren. Handig voor RTL-talen.

Nee, de CSS-transformaties worden uitgevoerd op de GPU en de tekst bestaat uit gewone HTML binnen het DOM; crawlers lezen deze dus normaal, en de animatie verstoort de hoofdverwerking niet.

Alles blijft in uw browser tijdens het voorverzien. Er wordt niets geüpload of geregistreerd.

Gerelateerde tools

Kleiner dan of gelijk aan-symbool

Kopieer het teken ≤ en de bijbehorende wiskundige vergelijkingstekens. Inclusief Unicode, HTML-entiteiten en LaTeX-opmaak voor spreadsheets, artikelen en webpagina's.

Dyslexievriendelijke tekstconverter

Herschik geplakte tekst in korte alinea's en regels van ongeveer 72 tekens voor makkelijker lezen. Kopieer het resultaat naar elk document, bericht of elke editor.

Domeinnaamgenerator

Genereer domeinnaamideeën uit één trefwoord: voorvoegsels, achtervoegsels, verdubbelde letters en cijferuitgangen in zes gangbare TLD's.

Pijlsymbolen om te kopiëren

Kopieer veelgebruikte Unicode-pijlen met één klik: recht, dubbel, diagonaal, gehaakt, rond en driehoekig voor documenten, chat en ontwerp.

Gamertag-generator

Maak pakkende gamertags door bijvoeglijke naamwoorden, zelfstandige naamwoorden en cijferachtervoegsels te combineren. Controleer de lengtelimieten voor Xbox (12), PSN (16) en Steam voordat je kopieert.

Getallen extraheren uit tekst

Haal elk getal uit een tekstblok, inclusief gehele getallen, decimalen, waarden met teken en bedragen, ontdubbeld en klaar om te plakken.

Tool beschikbaar in andere talen