ANIMERADE TEXTBAKGRUNDER I RÖRELSE

En animerad textbakgrund förvandlar ett vanligt band till en levande fond. Motion Wall kaklar din egen display-text, eller dina foton, till ett rörligt fält bakom innehållet, med över tjugo rörelser som ställs in från en panel utan kod.

Mer än en bakgrund

De flesta bakgrunder står stilla: en färg, ett foto, en gradient. 

En scrollande rubrik ingen rendering

Scroll-väggen är en marquee: rader med text glider åt sidan och loopar, den klassiska animerade textbakgrunden. De flesta bygger en marquee med en CSS-animation eller en kodsnutt för oändligt scrollande text kopierad från codepen, och underhåller det sedan manuellt. I Instinctor-sidbyggaren är Motion Wall en inställning på vilken sektion som helst, så denna animerade textbakgrund körs live bakom ditt innehåll utan CSS att underhålla och inget att installera.

En rörlig bakgrund ingen kod

Drift förvandlar väggen till en långsam vertikal marquee: texten kryper uppåt och loopar, en lugnare animerad textbakgrund för en sektion som bör andas snarare än skrika. Där du normalt skulle skriva en CSS keyframe-animation eller lägga till en scrollande textwidget, är det här ett hastighetsreglage. Den animerade textbakgrunden sitter bakom din text, inställd från en panel, och fortsätter att fungera efter en uppdatering eftersom det inte finns någon kodsnutt som kan gå sönder.

Ditt arbete alltid i rörelse

Samma vägg kör dina foton istället för text, en animerad bildbakgrund gjord av ditt eget arbete. Det här är vad folk menar med en animerad bakgrund eller en rörlig bakgrund bakom en sektion, vanligtvis byggd med ett bildspelsplugin, en videoloop eller ett CSS-block. I Instinctor-sidbyggaren är det en inställning: peka Motion Wall på dina bilder, och den animerade bildbakgrunden glider bakom din text, ingen videofil och inget plugin krävs.

Djup i lager ingen designer

En textbakgrund i lager där texten staplas och förskjuts in i djup. Effekter som denna är vanligtvis en hög med CSS blend modes och z-index, eller en animerad bakgrund du klistrar från codepen och hoppas överlever nästa redigering. Som en Motion Wall är det ett enda alternativ på sektionen, så den animerade textbakgrunden är en del av sidan snarare än ett skript som skruvats fast, och orden förblir verklig, sökbar text.

Ett ord utan ton

Rörelse som stoppar skrollningen

Lanes är en diagonal marquee: rader lutar och susar förbi i växlande riktningar. Det är den typ av rörlig textbakgrund som folk söker efter som marquee text css eller en infinite scrolling text effect, och sedan bygger om varje gång ett tema uppdateras. I Instinctor är det en rörelse på Motion Wall, inställd på vilken sektion som helst, så den animerade textbakgrunden förblir snabb och läsbar utan JavaScript och utan något plugin för scrollande text att hålla vid liv.

Din portfölj susar förbi

I bildläge susar dina foton förbi i banorna på diagonalen, en rörlig bildbakgrund istället för en rörlig textbakgrund. Att göra detta med en marquee av bilder betyder normalt ett karusellplugin eller en handbyggd CSS-animation. På Motion Wall är det en rörelse riktad mot ditt bildbibliotek, så den animerade bakgrunden är en inställning på sektionen, förblir lätt, och visar ditt riktiga arbete istället för generiska stockbilder.

Som om en studio byggt den

Zoom skapar ett oändligt dyk: väggen skalas upp och övergår i sig själv för en rörlig textbakgrund som känns som att falla framåt. Att bygga detta för hand betyder staplade CSS-transformationer eller en animerad bakgrund från en codepen-demo. Här är det en enda Motion Wall-inställning på sektionen, så den animerade textbakgrunden renderas live i webbläsaren, förblir lätt på sidhastigheten, och behöver ingen kod att underhålla.

Fall in i ditt eget arbete

Zoom i bildläge dyker oändligt genom dina foton, en animerad bildbakgrund som känns som att falla in i arbetet. Människor bygger en rörlig bakgrund som denna med en loopande video eller staplade CSS-transformationer. Här är det en enda Motion Wall-inställning: välj bilder, välj zoom, och den rörliga bildbakgrunden körs live bakom sektionen utan video att lagra och utan plugin att underhålla.

3D-text utan After Effects

Tilt lutar hela väggen in i ett grunt 3D-plan, en rörlig textbakgrund med en känsla av djup. Normalt är det en CSS 3D-transformation du justerar för hand, eller en betald widget för animerad bakgrund. På Motion Wall är det ett alternativ på vilken sektion som helst, så den animerade textbakgrunden är en del av sidbyggaren istället för en kodsnutt, och texten bakom ditt innehåll förblir markerbar, indexerbar text.

Dina foton lutade i 3D

Ett lutande galleri: dina foton lutar in i ett grunt 3D-plan och glider, en rörlig bildbakgrund med djup. Normalt är det en CSS 3D-transform och ett bildspelsscript, eller en betald widget för animerad bakgrund. På Motion Wall är det ett alternativ på avsnittet, så den animerade bildbakgrunden är en del av sidbyggaren, renderas live och visar ditt eget arbete bakom texten.

En live-ticker inbyggd

Trumman rullar typen runt en horisontell axel, en rörlig textbakgrund som snurrar som en ticker. Folk letar efter en marquee-generator, en scrollande textbanner eller en 3D CSS-animation för detta. I Instinctor gör Motion Wall det som en inställning på avsnittet: skriv orden, välj trumman, ställ in hastigheten, och den animerade textbakgrunden körs live utan något att exportera och inget plugin att uppdatera.

Ditt arbete på en snurrande filmrulle

Trumman rullar dina foton runt en horisontell axel, en rörlig bildbakgrund som snurrar som en filmrulle. Att återskapa det betyder en 3D CSS-animation och ett bildspel, eller en videoexport. På Motion Wall är det en inställning på avsnittet: välj bilder, välj trumman, ställ in hastigheten, och den rörliga bildbakgrunden spelas live utan videofil och inget plugin att hålla uppdaterad.

Tvåfärgad rörelse med ett klick

Cross kör två marquees över varandra i två färger, en livligare rörlig textbakgrund för en mer högljudd sektion. Handbyggd är det två CSS-animationer i lager och färgmatchade för hand, eller en scrollande textbanner du köper och bäddar in. Som en Motion Wall är det en rörelse med en andra färg, inställd på avsnittet, så den animerade textbakgrunden förblir ett lättvägt, crawlbart lager istället för en stack av widgets.

Stickers sprider roterade etikettchips som driver över ramen, en lekfull rörlig textbakgrund. Detta är den sortens sak folk monterar från absolut positionerad CSS eller en canva-banner exporterad som en bild. På Motion Wall är det ett enda alternativ på avsnittet och förblir live-text, så den animerade textbakgrunden är verkliga, indexerbara ord snarare än en tillplattad grafik som sökmotorer inte kan läsa.

Ditt arbete spritt och levande

Stickers sprider dina foton som drivande, roterade chips, en lekfull rörlig bildbakgrund. Detta är vanligtvis ett absolut positionerat CSS-collage eller en canva-export sparad som en platt bild. På Motion Wall förblir det ett live-lager av separata bilder, så den animerade bakgrunden uppdateras när du byter foto, utan plattad grafik och utan plugin, inställt från sektionspanelen.

Ditt arbete ramar in sidan

En djärv vägg noll kod

Bricks packar typen i ett tätt murverk av chips, varannan inverterad, och panorerar fältet över. Det är den djärvaste rörliga textbakgrunden i uppsättningen, den typ av animerad bakgrund som folk söker efter på codepen. I Instinctor-sidbyggaren är det en rörelse med en krockande andra färg, inställd på avsnittet, så den animerade textbakgrunden levereras med sidan och behöver aldrig en plugin-uppdatering.

Hypnotisk rörelse med ett klick

Vortex snurrar fältet inåt, en rörlig textbakgrund som drar ögat mot en mittpunkt. Att återskapa det betyder anpassad CSS eller JavaScript och mycket justering, eller ett animerat bakgrundsfragment som du ärver och inte enkelt kan ändra. Som en Motion Wall är det ett alternativ på vilket avsnitt som helst, så den animerade textbakgrunden är en inställning du justerar i en panel, och orden förblir live, läsbar text.

Ditt arbete som drar in dem

Vortex snurrar dina foton inåt, en rörlig bildbakgrund som drar ögat till en mittpunkt. Att återskapa det betyder WebGL eller mycket anpassad JavaScript. Som en Motion Wall är det ett alternativ på avsnittet, så den animerade bildbakgrunden är en inställning du justerar i en panel, renderas live i webbläsaren och visar ditt verkliga arbete istället för en stock-loop.

Strukturen utan renderingen

Static håller väggen stilla: den kaklade typen utan rörelsen, för när du vill ha strukturen från en animerad textbakgrund men ett lugnt avsnitt. Det är ett mönster du annars skulle bygga med en upprepad CSS-bakgrund eller en kakelbild. Här är det samma Motion Wall med rörelse inställd på ingen, så textbakgrunden förblir verkliga ord på sidan och du kan slå på rörelsen igen med en kontroll.

Ditt arbete, fäst bakom det hela

Statisk i bildläge fäster dina foton i ett stillastående rutnät, en fotobakgrund med texturen från en rörlig bildbakgrund men ett lugnt avsnitt. Det är vad du annars skulle bygga med ett CSS-rutnät av bakgrundsbilder. Här är det samma Motion Wall med rörelse av, så du behåller dina egna bilder bakom texten och kan slå på rörelsen igen med en kontroll.

Perspektiv utan 3D-programvara

Funnel konvergerar raderna mot en flyktpunkt, en rörlig textbakgrund med perspektiv. Detta är normalt en uppsättning CSS-transformeringar eller en WebGL-skiss från codepen. På Motion Wall är det ett enda alternativ på avsnittet, så den animerade textbakgrunden är en del av sidbyggaren, renderas live och håller typen bakom din text som sökbar, indexerbar text istället för en inbakad grafik.

En banner som aldrig stannar

Banner skär en vinklad remsa av rörlig typ över avsnittet, den diagonala kusinen till en rullande textbanner. Folk köper en generator för rullande textbanners eller en Elementor-widget för detta. I Instinctor gör Motion Wall det som en inställning på vilket avsnitt som helst, så den animerade textbakgrunden är inbyggd, förblir snabb och beror aldrig på ett banner-plugin från tredje part som kan sluta fungera vid nästa uppdatering.

Ett tryckutseende live på sidan

Overprint lägger två färger av samma typ något förskjutna, en rörlig textbakgrund med en tryckt risografkänsla. Handbyggt är det lager-CSS med blandningslägen; nedladdat är det en animerad bakgrund du inte enkelt kan färga om. Som en Motion Wall är det en rörelse med ett andra bläck, inställd på avsnittet, så den animerade textbakgrunden är din att finjustera i en panel och förblir verklig, indexerbar text.

WebGL-djup utan WebGL

Coils snurrar typen upp vertikala spiralkolumner, en avancerad rörlig textbakgrund. Detta är den sortens animerad bakgrund som finns i en WebGL codepen eller en After Effects-export. I Instinctor-sidbyggaren är det ett enda alternativ på avsnittet, renderat live i webbläsaren, så den animerade textbakgrunden förblir lätt på sidladdningshastigheten och behöver inget bibliotek, inget insticksprogram och ingen kod att underhålla.

Text på en kurva utan JavaScript

Snake trär raden längs en slingrande väg, en rörlig textbakgrund som läses som en marquee längs en kurva. Att göra detta för hand innebär SVG-banor och JavaScript, eller en scrollande texteffekt från codepen. På Motion Wall är det en rörelse på avsnittet, så den animerade textbakgrunden är en inställning snarare än ett skript, och orden förblir markerbar, indexerbar text på den publicerade sidan.

Cirkulär text inget SVG-arbete

Rings sätter typen i koncentriska cirklar som motroterar, ett cirkulärt sätt att presentera en rörlig textbakgrund. Att återskapa det innebär SVG textPath och anpassad animation, eller en animerad bakgrund som du kopierar och inte kan redigera. Som Motion Wall är det ett enda alternativ på vilket avsnitt som helst, så denna animerade textbakgrund är en del av sidbyggaren, återges live och håller typen som verklig, crawlbar text.

Mjuk rörelse ingenting att koda

Wave lanes låter raderna flyta längs mjuka sinuskurvor, en mjukare rörlig textbakgrund än en rak marquee. Byggt för hand är det keyframed CSS eller en canvas-skiss. På Motion Wall är det en rörelse på avsnittet, så den animerade textbakgrunden är en kontroll du ställer in i en panel, förblir snabb på sidan, och behöver ingen scrollande textplugin eller handskriven animation för att hålla den igång.

En våg du aldrig kodade

Wave stack skickar en vandrande våg genom fullbreddiga rader av text, en krusande rörlig textbakgrund. Det här är den typ av animerad bakgrund som människor söker upp som en CSS-vågtext eller en codepen-effekt. I Instinctor är det ett enda Motion Wall-alternativ på avsnittet, så den animerade textbakgrunden återges live, förblir lätt, och typen bakom ditt innehåll förblir verklig, indexerbar text snarare än en tillplattad bild.

Text som andas på egen hand

Weight walk animerar strecktjockleken över bokstäverna, tunn till tjock och tillbaka, en subtil rörlig textbakgrund byggd på en variabel font. Handkodat är det font-variation-settings och keyframes; köpt är det en widget du inte kan finjustera. Som Motion Wall är det en rörelse på avsnittet, så den animerade textbakgrunden är en inställning i en panel och håller typen som live, crawlbar text.

En bakgrund som muspekaren avslöjar

Spotlight-effekten döljer väggen nästan helt och låter sedan den rörliga textbakgrunden glöda fram endast där markören rör sig. Handbyggd är detta en mask driven av JavaScript och mushändelser. På Motion Wall är det en enda växlare på sektionen, så den animerade textbakgrunden är en interaktiv effekt du slår på i en panel, utan kod och utan plugin, och typen under förblir läsbar.

Varje reglage i panelen

Du bestämmer texten, storleken, vikten och hastigheten. En färg läses som en viskning; lägg till en andra så ställer tvåfärgslägena dem mot varandra med flit. Parallax låter väggen driva mot markören för djup, och alltihop kan döljas på mobiler där det bara skulle trängas på skärmen.

Energi, inte dekoration

En statisk sektion ber läsaren att själv bidra med intresset. En rörlig vägg bidrar med det åt dem: ögat fångar driften, sektionen känns genomtänkt, och texten i förgrunden lånar den energin utan att skrika. Använd en gång, över en rubrik som kan bära den, är det det billigaste sättet att få en sida att kännas producerad snarare än upplagd.

Vad är en animerad textbakgrund?

En animerad textbakgrund är precis vad det låter som: en bakgrund gjord av rörlig text. I stället för en platt färg eller ett stillastående foto kaklas ett ord eller en kort fras över hela sektionen och sätts i rörelse bakom ditt innehåll, nedtonat precis lagom för att förbli en fond. Det ger ett vanligt band en känsla av energi innan ett enda ord av texten är läst.

Designers bygger vanligtvis det här för hand med CSS eller en videoexport. Instinctor gör det till en inställning: slå på Motion Wall för valfri sektion, välj texten eller dina egna bilder, välj en rörelse och färger, och den renderas live på sidan. Den rörliga bakgrunden är riktig, lättviktig HTML, så sidan förblir snabb och texten framför den förblir läsbar och sökvänlig.

Vanliga frågor om animerad textbakgrund

Se vad mer den kan

Motion Wall är ett av fyrtio sätt som Impulse rör sig på. Varje block är byggt på samma sätt.

Ditt arbete som rullar förbi

Scroll-väggen i bildläge rullar dina foton förbi i en marquee, en animerad bildbakgrund gjord av verkligt arbete. Det här är den animerade bakgrunden som folk bygger med en bildmarquee, ett bildspelsplugin eller en loopande video. På Motion Wall är det en inställning på sektionen: peka på dina bilder, välj scroll, och den animerade bildbakgrunden körs live bakom ditt innehåll utan något att lagra och inget plugin att installera.