Softonic

Generator för rullande text

Steg 1 / 2
Nästa

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. Ändra @keyframes-slutvärdet från translateX(-100%) till translateX(100%) och starta från -100% för att vända riktningen. Användbart för 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.

Allt stannar i din webbläsare medan du förhandsgranskar. Inget laddas upp eller loggas.

Relaterade verktyg

Piltecken att kopiera

Kopiera vanliga Unicode-pilar med ett klick: raka, dubbla, diagonala, krokade, cirkulära och triangelformade för dokument, chatt och design.

Mindre än eller lika med-symbolen

Kopiera tecknet ≤ och relaterade matematiska jämförelsesymboler. Inkluderar Unicode, HTML-entiteter och LaTeX-markup för kalkylark, uppsatser och webbsidor.

Dyslexivänlig textkonverterare

Formatera om inklistrad text till korta stycken och rader på cirka 72 tecken för enklare läsning. Kopiera resultatet till valfritt dokument, e-postmeddelande eller redigeringsprogram.

HTML-entitetskodare

Omvandla fem HTML-känsliga tecken till fasta entiteter eller läs HTML-entiteter som text lokalt i webbläsaren.

Kvadratsymbol kopiera och klistra in

Kopiera kvadratsymbolen ², plus upphöjda och nedsänkta siffror, vanliga bråk och kvadrat- och kubikenheter som m², cm² och km². Klicka för att kopiera.

Generator för cirklad text

Omvandla vanlig text till cirklade Unicode-tecken. Konturerade, fyllda och cirklade siffervarianter för sociala bios, chatt och dokument.

Verktyget finns på andra språk