SFONDI DI TESTO ANIMATO IN MOVIMENTO

Uno sfondo di testo animato trasforma una fascia qualunque in uno sfondo vivo. Il Motion Wall ripete il tuo carattere display, o le tue foto, in un campo in movimento dietro al contenuto, con più di venti movimenti impostabili da un pannello e senza codice.

Più di uno sfondo

La maggior parte degli sfondi sta ferma: un colore, una foto, un gradiente. 

Un titolo scorrevole, senza rendering

Lo scroll wall è un marquee: righe di testo scorrono lateralmente e si ripetono, il classico sfondo con testo in movimento. La maggior parte delle persone crea un marquee con un'animazione CSS o uno snippet di testo scorrevole infinito copiato da codepen, poi lo mantiene manualmente. Nel page builder Instinctor Motion Wall è un'impostazione su qualsiasi sezione, quindi questo sfondo di testo animato funziona in tempo reale dietro i tuoi contenuti senza CSS da mantenere e senza nulla da installare.

Uno sfondo in movimento, senza codice

Drift trasforma il muro in un marquee verticale lento: il testo sale lentamente e si ripete, uno sfondo di testo in movimento più tranquillo per una sezione che dovrebbe respirare piuttosto che gridare. Dove normalmente scriveresti manualmente un'animazione CSS keyframe o aggiungeresti un widget di testo scorrevole, qui è un semplice controllo di velocità. Lo sfondo di testo animato si trova dietro il tuo testo, impostato da un pannello, e continua a funzionare dopo un aggiornamento perché non c'è uno snippet che possa rompersi.

Il tuo lavoro, sempre in movimento

Lo stesso muro mostra le tue foto al posto del testo, uno sfondo di immagine in movimento creato dal tuo lavoro. Questo è quello che le persone intendono per sfondo animato o sfondo in movimento dietro una sezione, solitamente creato con un plugin slideshow, un video loop o un blocco di CSS. Nel page builder Instinctor è un'unica impostazione: punta Motion Wall alle tue immagini, e lo sfondo di immagine in movimento scorre dietro il tuo testo, nessun file video e nessun plugin richiesto.

Profondità stratificata, senza designer

Uno sfondo di testo stratificato dove il testo si accumula e si sfasa creando profondità. Effetti come questo solitamente sono un mucchio di blend mode CSS e z-index, o uno sfondo animato che incolli da codepen e speri sopravviva alla prossima modifica. Come Motion Wall è un'unica opzione sulla sezione, quindi lo sfondo di testo animato fa parte della pagina piuttosto che uno script aggiunto in seguito, e le parole rimangono testo reale e indicizzabile.

Una parola senza tono

Movimento che ferma lo scorrimento

Lanes è un marquee diagonale: le righe si inclinano e corrono in direzioni alternate. È il tipo di sfondo con testo in movimento che le persone cercano come marquee text css o un effetto di scorrimento testo infinito, e poi ricostruiscono ogni volta che un tema si aggiorna. In Instinctor è un movimento sulla Motion Wall, impostato su qualsiasi sezione, quindi lo sfondo di testo animato rimane veloce e leggibile senza JavaScript e senza plugin di scorrimento testo da mantenere.

Il tuo portfolio, che corre via

In modalità immagine le lane fanno scorrere le tue foto sulla diagonale, uno sfondo immagine in movimento invece di uno sfondo testo in movimento. Fare questo con un marquee di immagini normalmente significa un plugin carousel o un'animazione CSS costruita a mano. Sulla Motion Wall è un movimento puntato sulla tua libreria di immagini, quindi lo sfondo animato è un'impostazione sulla sezione, rimane leggero e mostra il tuo vero lavoro invece di riempitivi stock.

Sembra che un studio l'abbia costruito

Zoom crea un'immersione infinita: la parete si ingrandisce e si dissolve in se stessa per uno sfondo testo in movimento che sembra di cadere in avanti. Costruire questo a mano significa trasformazioni CSS impilate o uno sfondo animato da una demo codepen. Qui è un'unica impostazione Motion Wall sulla sezione, quindi lo sfondo testo animato viene renderizzato dal vivo nel browser, rimane leggero sulla velocità della pagina e non necessita di codice da mantenere.

Cadi nel tuo stesso lavoro

Zoom in modalità immagine si tuffa infinitamente attraverso le tue foto, uno sfondo immagine animato che sembra di cadere nel lavoro. Le persone costruiscono uno sfondo in movimento come questo con un video in loop o trasformazioni CSS impilate. Qui è un'unica impostazione Motion Wall: scegli le immagini, scegli lo zoom, e lo sfondo immagine in movimento viene eseguito dal vivo dietro la sezione senza video da ospitare e senza plugin da mantenere.

Testo 3D senza After Effects

Tilt inclina l'intera parete in un piano 3D superficiale, uno sfondo testo in movimento con un senso di profondità. Normalmente è una trasformazione CSS 3D che regoli a mano, o un widget sfondo animato a pagamento. Sulla Motion Wall è un'opzione su qualsiasi sezione, quindi lo sfondo testo animato fa parte del page builder piuttosto che uno snippet, e il testo dietro il tuo contenuto rimane testo selezionabile e indicizzabile.

Le tue foto, piegate in 3D

Una galleria inclinata: le tue foto si piegano in un piano 3D poco profondo e fluttuano, uno sfondo immagine in movimento con profondità. Normalmente questo richiederebbe una trasformazione CSS 3D e uno script di presentazione, o un widget di sfondo animato a pagamento. Su Motion Wall è un'opzione sulla sezione, quindi lo sfondo immagine animato fa parte del page builder, si renderizza in tempo reale e mostra il tuo lavoro dietro il testo.

Un ticker dal vivo, integrato

Il tamburo fa ruotare il testo attorno a un asse orizzontale, uno sfondo di testo in movimento che gira come un ticker. Le persone cercano un generatore di marquee, un banner di testo scorrevole, o un'animazione CSS 3D per questo. In Instinctor Motion Wall lo fa come impostazione sulla sezione: digita le parole, scegli il tamburo, imposta la velocità, e lo sfondo di testo animato funziona in tempo reale senza nulla da esportare e nessun plugin da aggiornare.

Il tuo lavoro su un rullo che gira

Il tamburo fa ruotare le tue foto attorno a un asse orizzontale, uno sfondo immagine in movimento che gira come un rullo. Ricrearlo significa un'animazione CSS 3D e una presentazione, o un'esportazione video. Su Motion Wall è un'impostazione sulla sezione: scegli le immagini, scegli il tamburo, imposta la velocità, e lo sfondo immagine in movimento si riproduce in tempo reale senza file video e nessun plugin da mantenere aggiornato.

Movimento a due colori in un clic

Cross esegue due marquee che si incrociano in due colori, uno sfondo di testo in movimento più movimentato per una sezione più forte. Costruito a mano, sono due animazioni CSS stratificate e abbinate per colore manualmente, o un banner di testo scorrevole che acquisti e incorpori. Come Motion Wall è un movimento con un secondo colore, impostato sulla sezione, quindi lo sfondo di testo animato rimane un unico livello leggero e scansionabile invece di una pila di widget.

Gli sticker disperdono chip di etichette ruotate che fluttuano attraverso il fotogramma, uno sfondo di testo in movimento giocoso. Questo è il tipo di cosa che le persone assemblano da CSS posizionato in assoluto o un banner Canva esportato come immagine. Su Motion Wall è un'opzione singola sulla sezione e rimane testo dal vivo, quindi lo sfondo di testo animato è parole reali e indicizzabili piuttosto che un grafico appiattito che i motori di ricerca non possono leggere.

Il tuo lavoro, disperso e vivo

Stickers disperde le tue foto come chip alla deriva, ruotati, uno sfondo immagine in movimento giocoso. Di solito è un collage CSS posizionato in assoluto o un'esportazione Canva salvata come un'unica immagine piatta. Su Motion Wall rimane un livello live di immagini separate, quindi lo sfondo animato si aggiorna quando scambi una foto, senza grafica appiattita e senza plugin, impostato dal pannello sezione.

Il tuo lavoro fa da cornice alla pagina

Un muro audace, zero codice

Bricks compatta il testo in una densa muratura di chip, uno sì e uno no invertiti, e fa scorrere il campo. È lo sfondo testo in movimento più audace della serie, il tipo di sfondo animato che la gente cerca su codepen. Nel page builder Instinctor è un movimento con un secondo colore contrastante, impostato sulla sezione, quindi lo sfondo testo animato viene fornito con la pagina e non ha mai bisogno di un aggiornamento plugin.

Movimento ipnotico in un clic

Vortex fa turbinare il campo verso l'interno, uno sfondo testo in movimento che attira lo sguardo verso un punto centrale. Ricrearlo significa CSS personalizzato o JavaScript e molto tuning, oppure uno snippet di sfondo animato che erediti e non puoi facilmente modificare. Come Motion Wall è un'opzione su qualsiasi sezione, quindi lo sfondo testo animato è un'impostazione che regoli in un pannello, e le parole rimangono testo live e leggibile.

Il tuo lavoro, che li attira

Vortex fa turbinare le tue foto verso l'interno, uno sfondo immagine in movimento che attira lo sguardo verso un punto centrale. Ricrearlo significa WebGL o molto JavaScript personalizzato. Come Motion Wall è un'opzione sulla sezione, quindi lo sfondo immagine animato è un'impostazione che regoli in un pannello, si renderizza live nel browser, e mostra il tuo vero lavoro invece di un loop stock.

La texture, senza il render

Static mantiene il muro fermo: il testo affiancato senza il movimento, per quando vuoi la texture di uno sfondo testo animato ma una sezione calma. È un pattern che altrimenti costruiresti con uno sfondo CSS ripetuto o un'immagine affiancata. Qui è lo stesso Motion Wall con il movimento impostato su nessuno, quindi lo sfondo testo rimane parole vere sulla pagina e puoi riattivare il movimento con un controllo.

Il tuo lavoro, fissato dietro a tutto

Static in modalità immagine fissa le tue foto in una griglia statica, uno sfondo fotografico con la texture di uno sfondo immagine in movimento ma una sezione tranquilla. È quello che altrimenti costruiresti con una CSS grid di immagini di sfondo. Qui è lo stesso Motion Wall con movimento disattivato, quindi mantieni le tue immagini dietro il testo e puoi riattivare il movimento con un controllo.

Prospettiva, senza software 3D

Funnel fa convergere le righe verso un punto di fuga, uno sfondo di testo in movimento con prospettiva. Normalmente è un insieme di CSS transform o uno sketch WebGL da codepen. Su Motion Wall è una singola opzione sulla sezione, quindi lo sfondo di testo animato fa parte del page builder, si renderizza in tempo reale e mantiene il testo dietro i tuoi contenuti come testo scansionabile e indicizzabile invece di un grafico incorporato.

Un banner che non si ferma mai

Banner taglia una striscia diagonale di testo in movimento attraverso la sezione, il cugino diagonale di un banner di testo scorrevole. Le persone acquistano un generatore di banner di testo scorrevole o un widget Elementor per questo. In Instinctor il Motion Wall lo fa come impostazione su qualsiasi sezione, quindi lo sfondo di testo animato è integrato, rimane veloce e non dipende mai da un plugin banner di terze parti che potrebbe rompersi al prossimo aggiornamento.

Un look da stampa, vivo sulla pagina

Overprint sovrappone due colori dello stesso testo leggermente sfalsati, uno sfondo di testo in movimento con un'estetica risograph stampata. Se costruito a mano è CSS stratificato con blend mode; scaricato, è uno sfondo animato che non puoi facilmente ricolorare. Come Motion Wall è un movimento con un secondo inchiostro, impostato sulla sezione, quindi lo sfondo di testo animato puoi ritoccarlo tu in un pannello e rimane testo reale, indicizzabile.

Profondità WebGL, senza WebGL

Coils ruota il testo verso l'alto in colonne di eliche verticali, uno sfondo di testo in movimento elaborato. Questo è il tipo di sfondo animato che vive in un codepen WebGL o in un'esportazione After Effects. Nel page builder Instinctor è una singola opzione sulla sezione, renderizzata in tempo reale nel browser, quindi lo sfondo di testo animato rimane leggero sulla velocità della pagina e non necessita di libreria, plugin o codice da mantenere.

Testo su una curva, senza JavaScript

Snake fa scorrere il testo lungo un percorso sinuoso, uno sfondo di testo in movimento che si legge come un marquee che segue una curva. Farlo a mano significa percorsi SVG e JavaScript, o un effetto testo scorrevole da codepen. Su Motion Wall è un movimento sulla sezione, quindi lo sfondo di testo animato è un'impostazione piuttosto che uno script, e le parole rimangono testo selezionabile e indicizzabile sulla pagina live.

Testo circolare, senza lavoro SVG

Rings dispone il testo in cerchi concentrici che contro-ruotano, un approccio circolare a uno sfondo di testo in movimento. Ricrearlo significa SVG textPath e animazione personalizzata, o uno sfondo animato che copi e non puoi modificare. Come Motion Wall è un'opzione singola su qualsiasi sezione, quindi questo sfondo di testo animato fa parte del page builder, si renderizza live, e mantiene il testo come parole reali e scansionabili.

Movimento morbido, niente da programmare

Wave lanes fa scorrere le righe lungo dolci percorsi sinusoidali, uno sfondo di testo in movimento più morbido di un marquee dritto. Costruito a mano è CSS keyframed o uno sketch canvas. Su Motion Wall è un movimento sulla sezione, quindi lo sfondo di testo animato è un controllo che imposti in un pannello, rimane veloce sulla pagina, e non ha bisogno di plugin testo scorrevole o animazione scritta a mano per mantenerlo in esecuzione.

Un'onda che non hai mai programmato

Wave stack fa passare un'onda attraverso righe di testo a larghezza intera, uno sfondo di testo in movimento ondulato. Questo è il tipo di sfondo animato che le persone cercano come testo onda CSS o un effetto codepen. In Instinctor è un'opzione Motion Wall singola sulla sezione, quindi lo sfondo di testo animato si renderizza live, rimane leggero, e il testo dietro il tuo contenuto rimane parole reali e indicizzabili piuttosto che un'immagine appiattita.

Testo che respira da solo

Weight walk anima lo spessore del tratto attraverso le lettere, da sottile a spesso e ritorno, uno sfondo di testo in movimento sottile costruito su un font variabile. Codificato a mano, è font-variation-settings e keyframes; acquistato, è un widget che non puoi ritoccare. Come Motion Wall è un movimento sulla sezione, quindi lo sfondo di testo animato è un'impostazione in un pannello e mantiene il testo reale e scansionabile.

Uno sfondo che il cursore rivela

La rivelazione spotlight nasconde quasi completamente la parete, quindi lascia che lo sfondo di testo in movimento appaia luminoso solo dove il cursore si muove. Costruito a mano, è una maschera guidata da JavaScript e eventi del mouse. Su Motion Wall è un singolo toggle sulla sezione, quindi lo sfondo di testo animato è un effetto interattivo che attivi in un pannello, senza codice e senza plugin, e il testo sottostante rimane leggibile.

Ogni regolazione nel pannello

Imposti il testo, la dimensione, il peso e la velocità. Un colore solo si legge come un sussurro; aggiungine un secondo e le modalità a due inchiostri li fanno scontrare di proposito. Il parallasse fa scorrere il muro contro il cursore per dare profondità, e il tutto può nascondersi sui telefoni, dove non farebbe che affollare lo schermo.

Energia, non decorazione

Una sezione statica chiede al lettore di metterci lui l'interesse. Un muro in movimento glielo fornisce: l'occhio coglie lo scorrimento, la sezione sembra pensata, e il testo in primo piano prende in prestito quell'energia senza alzare la voce. Usato una volta sola, su un titolo che può reggerlo, è il modo più economico per far sembrare una pagina prodotta invece che buttata lì.

Che cos'è uno sfondo di testo animato?

Uno sfondo di testo animato è esattamente quello che sembra: uno sfondo fatto di testo in movimento. Invece di un colore piatto o di una foto ferma, una parola o una breve frase viene ripetuta su tutta la sezione e messa in movimento dietro al tuo contenuto, attenuata quel tanto che basta per restare uno sfondo. Dà a una fascia qualunque un senso di energia prima ancora che si legga una parola di testo.

Di solito i designer costruiscono questa cosa a mano con il CSS o con un video esportato. Instinctor la rende un'impostazione: attivi il Motion Wall per una sezione qualsiasi, scegli il testo o le tue immagini, scegli un movimento e i colori, e viene renderizzato dal vivo sulla pagina. Lo sfondo in movimento è HTML vero e leggero, così la pagina resta veloce e il testo davanti resta leggibile e adatto ai motori di ricerca.

FAQ sugli sfondi di testo animato

Scopri cos'altro sa fare

Il Motion Wall è uno dei quaranta modi in cui Impulse si muove. Ogni blocco è costruito allo stesso modo.

Il tuo lavoro, che scorre via

Lo scroll wall in modalità immagine fa scorrere le tue foto in un marquee, uno sfondo di immagine in movimento fatto dei tuoi veri lavori. Questo è lo sfondo animato che le persone creano con un marquee di immagini, un plugin slideshow o un video in loop. Su Motion Wall è un'unica impostazione sulla sezione: puntala alle tue immagini, scegli scroll, e lo sfondo di immagine in movimento funziona in tempo reale dietro i tuoi contenuti senza nulla da ospitare e nessun plugin da installare.