ANIMEREDE TEKSTBAGGRUNDE I BEVÆGELSE

En animeret tekstbaggrund forvandler et almindeligt bånd til et levende bagtæppe. Bevægelsesvæggen lægger din egen display-skrift eller dine fotos som fliser i et felt i bevægelse bag indholdet, med mere end tyve bevægelser sat op fra et panel og uden kode.

Mere end en baggrund

De fleste baggrunde står stille: en farve, et foto, en gradient. 

En scrollende overskrift, ingen rendering

Scroll-væggen er en marquee: rækker af tekst glider sidelæns og gentages, den klassiske bevægende tekstbaggrund. De fleste bygger en marquee med en CSS-animation eller et uendelig-scrollende-tekst-snippet kopieret fra codepen, og vedligeholder det manuelt. I Instinctors sidebygger er Motion Wall en indstilling på ethvert afsnit, så denne animerede tekstbaggrund kører live bag dit indhold uden CSS at vedligeholde og intet at installere.

En bevægende baggrund, ingen kode

Drift gør væggen til en langsom lodret marquee: teksten kryber opad og gentages, en roligere bevægende tekstbaggrund for et afsnit, der skal kunne trække vejret i stedet for at råbe. Hvor du normalt ville skrive en CSS keyframe-animation eller tilføje en scrollende-tekst-widget, er det her en hastighedskontrol. Den animerede tekstbaggrund sidder bag din tekst, indstillet fra et panel, og fortsætter med at fungere efter en opdatering, fordi der ikke er noget snippet, der kan gå i stykker.

Dit arbejde, altid i bevægelse

Den samme væg kører dine fotos i stedet for tekst, en bevægende billedbaggrund lavet af dit eget arbejde. Det er, hvad folk mener med en animeret baggrund eller en bevægende baggrund bag et afsnit, normalt bygget med et slideshow-plugin, en videoloop eller en CSS-blok. I Instinctors sidebygger er det en indstilling: peg Motion Wall på dine billeder, og den bevægende billedbaggrund driver bag din tekst, ingen videofil og intet plugin påkrævet.

Lagdelt dybde, ingen designer

En lagdelt tekstbaggrund, hvor teksten stabler sig og forskyder sig i dybde. Effekter som denne er normalt en bunke CSS blend modes og z-index, eller en animeret baggrund, du indsætter fra codepen og håber overlever den næste redigering. Som Motion Wall er det en enkelt mulighed på afsnittet, så den animerede tekstbaggrund er en del af siden i stedet for et script boltet på, og ordene forbliver rigtig, søgbar tekst.

Et ord uden tone

Bevægelse, der stopper scrollingen

Lanes er en diagonal marquee: rækker hælder og løber forbi i skiftende retninger. Det er den slags bevægende tekstbaggrund, folk søger efter som marquee text css eller en uendelig scrollende teksteffekt, og som de genopbygger hver gang et tema opdateres. I Instinctor er det én bevægelse på Motion Wall, indstillet på ethvert afsnit, så den animerede tekstbaggrund forbliver hurtig og læselig uden JavaScript og uden scrolling-text-plugin at holde i live.

Dit portfolio, løbende forbi

I billedtilstand løber lanes dine fotos forbi på diagonalen, en bevægende billedbaggrund i stedet for en bevægende tekstbaggrund. At gøre dette med en marquee af billeder betyder normalt et carousel-plugin eller en håndbygget CSS-animation. På Motion Wall er det én bevægelse rettet mod dit billedbibliotek, så den animerede baggrund er en indstilling på afsnittet, forbliver let, og viser dit rigtige arbejde i stedet for stock-fyldestof.

Ser ud som om et studie byggede det

Zoom laver et uendeligt dyk: væggen skaleres op og cross-fades ind i sig selv for en bevægende tekstbaggrund, der føles som at falde fremad. At bygge dette i hånden betyder stablede CSS-transformeringer eller en animeret baggrund fra en codepen-demo. Her er det en enkelt Motion Wall-indstilling på afsnittet, så den animerede tekstbaggrund gengives live i browseren, forbliver let på sidens hastighed, og kræver ingen kode at vedligeholde.

Fald ind i dit eget arbejde

Zoom i billedtilstand dykker endeløst gennem dine fotos, en animeret billedbaggrund, der føles som at falde ind i værket. Folk bygger en bevægende baggrund som denne med en looping-video eller stablede CSS-transformeringer. Her er det en enkelt Motion Wall-indstilling: vælg billeder, vælg zoom, og den bevægende billedbaggrund kører live bag afsnittet uden video at hoste og uden plugin at vedligeholde.

3D-tekst uden After Effects

Tilt hælder hele væggen ind i et lavt 3D-plan, en bevægende tekstbaggrund med en følelse af dybde. Normalt er det en CSS 3D-transformation, du tuner i hånden, eller en betalt widget til animerede baggrunde. På Motion Wall er det én mulighed på ethvert afsnit, så den animerede tekstbaggrund er en del af sidebyggeren i stedet for et snippet, og typen bag dit indhold forbliver valgbar, indeksérbar tekst.

Dine fotos, læner sig ind i 3D

Et skrånende galleri: dine fotos læner sig ind i et lavt 3D-plan og driver, en bevægende billedbaggrund med dybde. Normalt ville det være en CSS 3D-transformation og et slideshow-script, eller en betalt animeret baggrund-widget. På Motion Wall er det én indstilling på sektionen, så den animerede billedbaggrund er en del af sidebyggeren, gengives live, og viser dit eget arbejde bag teksten.

En live ticker, bygget ind

Trommelen roterer teksten omkring en vandret akse, en bevægende tekstbaggrund, der drejer som en ticker. Folk søger efter en marquee-generator, et scrollende tekstbanner eller en 3D CSS-animation til dette. I Instinctor gør Motion Wall det som en indstilling på sektionen: skriv ordene, vælg trommelen, indstil hastigheden, og den animerede tekstbaggrund kører live uden noget at eksportere og intet plugin at opdatere.

Dit arbejde på en rullende rulle

Trommelen roterer dine fotos omkring en vandret akse, en bevægende billedbaggrund, der drejer som en rulle. At genskabe det betyder en 3D CSS-animation og et slideshow, eller en videoeksport. På Motion Wall er det én indstilling på sektionen: vælg billeder, vælg trommelen, indstil hastigheden, og den bevægende billedbaggrund afspilles live uden videofil og intet plugin at holde opdateret.

Tofarvet bevægelse med ét klik

Cross kører to marquees på tværs af hinanden i to farver, en travlere bevægende tekstbaggrund til en højere sektion. Håndbygget betyder det to CSS-animationer lagdelt og farvematchet manuelt, eller et scrollende tekstbanner, som du køber og indlejrer. Som Motion Wall er det én bevægelse med en anden farve, indstillet på sektionen, så den animerede tekstbaggrund forbliver ét let, søgbart lag i stedet for en stak widgets.

Stickers spreder roterede etiketbrikker, der driver over billedet, en legende bevægende tekstbaggrund. Dette er den slags ting, folk samler fra absolut positioneret CSS eller et canva-banner eksporteret som et billede. På Motion Wall er det en enkelt indstilling på sektionen og forbliver live-tekst, så den animerede tekstbaggrund er rigtige, indeksérbare ord i stedet for en fladtrykt grafik, som søgemaskiner ikke kan læse.

Dit arbejde, spredt og levende

Stickers spreder dine fotos som drivende, roterede chips, en legende bevægende billedbaggrund. Dette er normalt en absolut positioneret CSS-collage eller en Canva-eksport gemt som ét fladt billede. På Motion Wall forbliver det et live lag af separate billeder, så den animerede baggrund opdateres, når du bytter et foto, uden flad grafik og uden plugin, indstillet fra sektionspanelet.

Dit arbejde rammer siden ind

En modig væg, nul kode

Bricks pakker teksten i et tæt murværk af brikker, hver anden inverteret, og panorerer feltet hen over. Det er den mest dristige bevægende tekstbaggrund i sættet, den slags animeret baggrund folk søger efter på codepen. I Instinctors sidebygger er det én bevægelse med en skærende anden farve, indstillet på sektionen, så den animerede tekstbaggrund leveres med siden og behøver aldrig en pluginopdatering.

Hypnotisk bevægelse med ét klik

Vortex hvirvler feltet indad, en bevægende tekstbaggrund, der trækker øjet mod et centralt punkt. At genskabe det betyder custom CSS eller JavaScript og meget tuning, eller et animeret baggrundssnippet, du arver og ikke nemt kan ændre. Som Motion Wall er det ét valg på enhver sektion, så den animerede tekstbaggrund er en indstilling, du justerer i et panel, og ordene forbliver live, læsbar tekst.

Dit arbejde, trækker dem ind

Vortex hvirvler dine fotos indad, en bevægende billedbaggrund, der trækker øjet til et centralt punkt. At genskabe det betyder WebGL eller meget custom JavaScript. Som Motion Wall er det ét valg på sektionen, så den animerede billedbaggrund er en indstilling, du justerer i et panel, gengives live i browseren, og viser dit rigtige arbejde i stedet for en stock loop.

Teksturen, uden rendringen

Static holder væggen stille: den flislagte type uden bevægelsen, til når du vil have teksturen af en animeret tekstbaggrund, men en rolig sektion. Det er et mønster, du ellers ville bygge med en gentaget CSS-baggrund eller et flislagt billede. Her er det den samme Motion Wall med bevægelse indstillet til ingen, så tekstbaggrunden forbliver rigtige ord på siden og du kan skifte bevægelsen tilbage til med én kontrol.

Dit arbejde, fastgjort bagved det hele

Statisk i billedtilstand fastgør dine fotos i et stille gitter, en fotobaggrund med teksturen af en bevægelig billedebaggrund, men en rolig sektion. Det er, hvad du ellers ville bygge med et CSS-gitter af baggrundsfotos. Her er det den samme Motion Wall med bevægelse slået fra, så du holder dine egne billeder bag teksten og kan skifte bevægelsen tilbage til på med én kontrol.

Perspektiv, ingen 3D-software

Funnel konvergerer rækkerne mod et forsvindingspunkt, en bevægelig tekstbaggrund med perspektiv. Dette er normalt et sæt CSS-transformationer eller en WebGL-skitse fra codepen. På Motion Wall er det en enkelt indstilling på sektionen, så den animerede tekstbaggrund er en del af sidebyggeren, gengives live, og holder typen bag din tekst som søgbar, indeksérbar tekst i stedet for en indbrændt grafik.

Et banner, der aldrig stopper

Banner skærer en vinklet strimmel af bevægelig type på tværs af sektionen, den diagonale fætter til et scrollende tekstbanner. Folk køber en scrollende-tekst-banner-generator eller et Elementor-widget til dette. I Instinctor gør Motion Wall det som en indstilling på enhver sektion, så den animerede tekstbaggrund er indbygget, forbliver hurtig, og afhænger aldrig af et tredjepartsbannerplugin, der kan gå i stykker ved næste opdatering.

Et trykudseende, live på siden

Overprint lægger to farver af den samme type let forskudt, en bevægelig tekstbaggrund med en trykt risografi-følelse. Håndbygget er det lagdelt CSS med blandingstilstande; downloadet er det en animeret baggrund, du ikke let kan ændre farven på. Som en Motion Wall er det én bevægelse med en anden farve, indstillet på sektionen, så den animerede tekstbaggrund er din at finjustere i et panel og forbliver rigtig, indeksérbar tekst.

WebGL-dybde, intet WebGL

Coils snurrer typen op vertikale spiralkolonner, en udførlig bevægelig tekstbaggrund. Dette er den slags animeret baggrund, der lever i en WebGL codepen eller en After Effects-eksport. I Instinctors sidebygger er det en enkelt indstilling på sektionen, gengivet live i browseren, så den animerede tekstbaggrund forbliver let på sidens hastighed og kræver intet bibliotek, intet plugin og ingen kode at vedligeholde.

Tekst på en kurve, intet JavaScript

Snake trækker linjen langs en snoet sti, en bevægelig tekstbaggrund, der læses som et marquee, der følger en kurve. At gøre dette manuelt betyder SVG-stier og JavaScript, eller en scrolling-text-effekt fra codepen. På Motion Wall er det en bevægelse på sektionen, så den animerede tekstbaggrund er en indstilling snarere end et script, og ordene forbliver vælgbar, indeksérbar tekst på den live side.

Cirkulær type, intet SVG-arbejde

Rings sætter typen i koncentriske cirkler, der modroterer, en cirkulær tilgang til en bevægelig tekstbaggrund. At genskabe det betyder SVG textPath og brugerdefineret animation, eller en animeret baggrund, du kopierer og ikke kan redigere. Som en Motion Wall er det en enkelt mulighed på enhver sektion, så denne animerede tekstbaggrund er en del af sidebyggeren, gengives live, og holder typen som rigtige, crawlbare ord.

Blød bevægelse, intet at kode

Wave lanes flyder rækkerne langs blide sinusbaner, en blødere bevægelig tekstbaggrund end et lige marquee. Bygget manuelt er det keyframed CSS eller en canvas-skitse. På Motion Wall er det en bevægelse på sektionen, så den animerede tekstbaggrund er en kontrol, du indstiller i et panel, forbliver hurtig på siden, og behøver intet scrolling-text-plugin eller håndskrevet animation for at holde det kørende.

En bølge, du aldrig kodede

Wave stack sender en rejsebølge gennem fuldbredde-rækker af type, en krusende bevægelig tekstbaggrund. Det er den slags animeret baggrund, folk søger efter som CSS wave-tekst eller en codepen-effekt. I Instinctor er det en enkelt Motion Wall-mulighed på sektionen, så den animerede tekstbaggrund gengives live, forbliver let, og typen bag dit indhold forbliver rigtige, indeksérbare ord snarere end et fladt billede.

Skrift, der ånder af sig selv

Weight walk animerer stregvægten på tværs af bogstaverne, tynd til tyk og tilbage, en subtil bevægelig tekstbaggrund bygget på en variabel font. Håndkodet er det font-variation-settings og keyframes; købt er det en widget, du ikke kan finjustere. Som en Motion Wall er det en bevægelse på sektionen, så den animerede tekstbaggrund er en indstilling i et panel og holder typen som live, crawlbar tekst.

En baggrund, som markøren afslører

Spotlight-afsløringen skjuler væggen næsten helt, og lader derefter den bevægende tekstbaggrund gløde til syne kun hvor markøren bevæger sig. Bygget i hånden er dette en maske drevet af JavaScript og musebegivenheder. På Motion Wall er det en enkelt toggle på sektionen, så den animerede tekstbaggrund er en interaktiv effekt, du aktiverer i et panel uden kode og uden plugin, og typen under forbliver læsbar.

Hver eneste knap i panelet

Du bestemmer teksten, størrelsen, vægten og hastigheden. Én farve læses som en hvisken; tilføj en til, og totryks-tilstandene får dem til at støde sammen med vilje. Parallakse lader væggen drive mod markøren for dybde, og det hele kan skjules på telefoner, hvor det kun ville fylde skærmen op.

Energi, ikke dekoration

En statisk sektion beder læseren om selv at levere interessen. En væg i bevægelse leverer den for dem: øjet fanger driften, sektionen føles gennemtænkt, og teksten i forgrunden låner den energi uden at råbe. Brugt én gang, over en overskrift der kan bære det, er det den billigste måde at få en side til at føles produceret frem for bare lagt op.

Hvad er en animeret tekstbaggrund?

En animeret tekstbaggrund er præcis, hvad det lyder som: en baggrund lavet af skrift i bevægelse. I stedet for en flad farve eller et stillestående foto lægges et ord eller en kort sætning som fliser hen over hele sektionen og sættes i bevægelse bag dit indhold, dæmpet lige nok til at forblive et bagtæppe. Det giver et almindeligt bånd en følelse af energi, før et eneste ord tekst er læst.

Designere bygger normalt det her i hånden med CSS eller en videoeksport. Instinctor gør det til en indstilling: slå Bevægelsesvæggen til på en hvilken som helst sektion, vælg teksten eller dine egne billeder, vælg en bevægelse og farver, og den gengives live på siden. Baggrunden i bevægelse er ægte, letvægts-HTML, så siden bliver ved med at være hurtig, og teksten foran den bliver ved med at være læsbar og søgevenlig.

FAQ om animerede tekstbaggrunde

Se hvad den ellers kan

Bevægelsesvæggen er en af fyrre måder, Impulse bevæger sig på. Hver blok er bygget på samme måde.

Dit arbejde, rullende forbi

Scroll-væggen i billedtilstand ruller dine fotos forbi i en marquee, en bevægende billedbaggrund lavet af rigtigt arbejde. Dette er den animerede baggrund, som folk bygger med en billedmarquee, et slideshow-plugin eller en loopende video. På Motion Wall er det en indstilling på afsnittet: peg på dine billeder, vælg scroll, og den bevægende billedbaggrund kører live bag dit indhold uden noget at hoste og intet plugin at installere.