Softonic

Generator för rullande text

Steg 1 / 3

Skriv ditt meddelande

En rad, upp till 500 tecken. Emojier fungerar också.

Nästa: formge

Rullande rubriker är hur meddelandefält, börstickers och evenemangsbanners lämnar mycket information till en smal remsa av skärmen. Den här generatorn återskapar den klassiska HTML-effekten <marquee> med en ren CSS-@keyframes- och transform: translateX()-animation, så att tekniken fortsätter fungera i alla moderna webbläsare utan den föråldrade taggen. Välj ett meddelande, fininställ hastigheten i sekunder per varv, ange färger och teckenstorlek, och förhandsgranska tickern live innan du bygger om den med CSS:en som visas nedan.

Så bygger du en rullande banner

  1. 1

    Skriv meddelandet

    Ange rubriken. Korta rader (4-10 ord) läses bäst på en remsa i rörelse.

  2. 2

    Välj hastighet

    Färre sekunder = snabbare rullning. 30-60 s per helt varv fungerar för nyhetsliknande tickers.

  3. 3

    Ange färger och storlek

    Välj en förgrund för texten, en bakgrund för remsan och en teckenstorlek som matchar din rubrikhöjd.

  4. 4

    Förhandsgranska live

    Demon animerar i realtid så att du kan bedöma läsbarheten innan du publicerar.

  5. 5

    Bygg om den i CSS

    Kopiera `@keyframes`- och `transform: translateX()`-mönstret som visas nedan till din egen stilmall för att återskapa tickern på din webbplats.

Varför CSS-animation i stället för <marquee>

Taggen <marquee> blev utfasad i HTML5 och flaggas av WHATWG som föråldrad. Webbläsare renderar den fortfarande för tillfället, men tillgänglighetsverktyg och validatorer klagar, och du förlorar finkontroll över easing och loopning. En transform: translateX()-animation inuti overflow: hidden ger identiskt visuellt beteende med moderna verktyg.

Fininställa hastigheten

Tiden att traversera beror på både längden och den totala bredden. En grov regel för en 1200 px bred vy:

Längd Känsla Typisk användning
10-20 s Snabb, uppmärksam Blixtreor, brådskande varningar
30-45 s Nyhetsticker Liveresultat, rubrikfält
60-90 s Stämningsfull Skyltning på arenor, konferensrum
120 s + Knappt rörlig Dekorativt, lyxvarumärkesbanners

Tillgänglighetschecklista

  • Slå in remsan i role="marquee" eller aria-live="off" så att skärmläsare inte återupprepar meddelandet varje varv.
  • Respektera reducerad rörelse med @media (prefers-reduced-motion: reduce) { animation: none; } och visa texten statiskt.
  • Håll kontrastförhållandet på minst 4.5:1 mellan text och bakgrund; text i rörelse är svårare att läsa än statisk.
  • Lägg aldrig kritisk information (juridiska meddelanden, priser, felmeddelanden) endast inuti en rullande remsa.

Vanliga frågor

Nej. Förhandsvisningen är en <div> med overflow: hidden och en CSS @keyframes-animation som flyttar den inre spanen med translateX. Den validerar som modern HTML5.

Lägg till animation-play-state: paused på hover-väljaren för containern. Vissa användare tycker detta är vänligare än en konstant loop.

Ja. Lägg till animation-direction: reverse på elementet som har animationen (.scrolling-text__track i den genererade koden). De två kopiorna håller loopen sömlös åt båda hållen, vilket passar RTL-språk.

Nej. CSS-transformer körs på GPU:n och texten är vanlig HTML inuti DOM:en, så crawlers läser den normalt och animationen blockerar inte huvudtråden.

Ditt meddelande stannar i din webbläsare. Det skickas inte till våra servrar och läggs inte till i sidans länk. Den här fliken sparar det bara så att nästa steg kan visa det, och ”Börja om från början” eller att stänga fliken rensar det. Visningsinställningarna (hastighet, riktning, typsnitt, storlek, färger och effekter) följer med i sidans länk mellan stegen.

Relaterade verktyg

Gyaru-textomvandlare

Omvandla japanska kana, vanliga kanji och latinska bokstäver till gyaru-moji, eller välj full bredd, cirklar, rutor eller fetstil. Kopiera direkt.

Generator för konstig text

Förvandla vilken text som helst till glitchig, cursed zalgo-Unicode med ett justerbart reglage och kopiera in den i bios, bildtexter och DM.

Hitta ord till Wordle

Ange gissningar på fem bokstäver och återkoppling med gröna, gula och grå rutor för att hitta engelska ord som stämmer. Upprepade bokstäver kontrolleras exakt.

Generator för upphöjd text

Omvandla siffror och bokstäver till upphöjda Unicode-tecken för exponenter (x²), fotnotsmarkörer (¹ ² ³), källhänvisningar och ordningstal.

Generator för osynlig text

Skapa 1 till 500 osynliga Unicode-tecken i webbläsaren. Jämför kodpunkter och antal byte och kopiera den exakta teckenföljden.

Zalgo-textgenerator

Förvandla din text till förbannad, glitchig Zalgo genom att stapla kombinerande diakritiska tecken ovanför och under varje bokstav. Justerbar intensitet.

Verktyget finns på andra språk