DES FONDS DE TEXTE ANIMÉ EN MOUVEMENT

Un fond de texte animé transforme une bande ordinaire en décor vivant. Le mur de mouvement dispose votre propre typographie d'affichage, ou vos photos, en mosaïque mouvante derrière le contenu, avec plus de vingt mouvements réglés depuis un panneau et sans code.

Plus qu'un simple fond

La plupart des fonds restent immobiles : une couleur, une photo, un dégradé. 

Le mur de mouvement est fait de texte, et il bouge. 
Il répète un mot de votre choix sur toute la section et le met en mouvement 
derrière tout le reste, assombri juste assez pour rester un décor.
Le mur entier répond à votre curseur, et un téléphone répond à son inclinaison.

Un titre qui défile, sans rendu

Le mur de défilement est un bandeau : les rangées de texte glissent latéralement et forment une boucle, le classique arrière-plan texte mouvant. La plupart des gens créent un bandeau avec une animation CSS ou un extrait de texte à défilement infini copié depuis codepen, puis le maintiennent manuellement. Dans le générateur de pages Instinctor, le Motion Wall est un paramètre sur n'importe quelle section, donc cet arrière-plan texte animé s'exécute en direct derrière votre contenu sans CSS à conserver et rien à installer.

Un arrière-plan mouvant, sans code

Drift transforme le mur en bandeau vertical lent : le texte remonte progressivement et forme une boucle, un arrière-plan texte mouvant plus calme pour une section qui doit respirer plutôt que crier. Là où vous écririez normalement une animation keyframe CSS ou ajouteriez un widget texte défilant, c'est ici un simple contrôle de vitesse. L'arrière-plan texte animé se situe derrière votre texte, défini depuis un panneau, et continue de fonctionner après une mise à jour car il n'y a pas d'extrait à casser.

Votre travail, toujours en mouvement

Le même mur affiche vos photos à la place du texte, un arrière-plan image mouvant créé à partir de vos propres travaux. C'est ce que les gens entendent par arrière-plan animé ou arrière-plan mouvant derrière une section, généralement créé avec un plugin diaporama, une boucle vidéo ou un bloc CSS. Dans le générateur de pages Instinctor, c'est un seul paramètre : pointez le Motion Wall vers vos images, et l'arrière-plan image mouvant dérive derrière votre texte, sans fichier vidéo ni plugin requis.

Profondeur en couches, sans designer

Un arrière-plan texte en couches où le texte s'empile et se décale en profondeur. Les effets de ce type sont généralement un tas de modes de fusion CSS et z-index, ou un arrière-plan animé que vous collez depuis codepen en espérant qu'il survive à la prochaine modification. Comme Motion Wall, c'est une seule option sur la section, donc l'arrière-plan texte animé fait partie de la page plutôt qu'un script ajouté en surplus, et les mots restent du vrai texte, indexable.

Un mot sans tonalité

Dazzle contient la même quantité d'encre à l'intérieur du mot qu'à l'extérieur, donc rien ici n'est plus clair ou plus foncé que le reste. Le mot n'est composé que de l'angle que les lignes tournent, ce qui est l'astuce que ces puzzles rayés utilisent, et la seule chose qu'une trame de demi-teintes ne peut pas faire. Réglez l'angle de base, réglez la différence entre les deux champs, et le mot se résout et se dissout de lui-même.

Mouvement qui arrête le défilement

Lanes est un bandeau défilant en diagonale : les rangées s'inclinent et défilent rapidement dans des directions alternées. C'est le type de fond de texte en mouvement que les gens recherchent comme marquee text css ou un effet de texte défilant infini, puis reconstruisent chaque fois qu'un thème se met à jour. Dans Instinctor, c'est un mouvement sur le Motion Wall, défini sur n'importe quelle section, de sorte que le fond de texte animé reste rapide et lisible sans JavaScript et sans plugin de texte défilant à maintenir.

Votre portfolio, qui défile rapidement

En mode image, les rangées font défiler vos photos en diagonale, un fond d'image en mouvement au lieu d'un fond de texte en mouvement. Faire cela avec un bandeau d'images signifie normalement un plugin carrousel ou une animation CSS construite à la main. Sur le Motion Wall, c'est un mouvement pointé sur votre bibliothèque d'images, de sorte que le fond animé est un paramètre de la section, reste léger et montre votre vrai travail au lieu d'images de banque.

On dirait que c'est un studio qui l'a créé

Zoom crée une plongée infinie : le mur s'agrandit et se dissout dans lui-même pour un fond de texte en mouvement qui donne l'impression de tomber vers l'avant. Construire cela à la main signifie des transformations CSS empilées ou un fond animé d'une démo codepen. C'est ici un seul paramètre Motion Wall sur la section, de sorte que le fond de texte animé s'affiche en direct dans le navigateur, reste léger en vitesse de page et ne nécessite aucun code à maintenir.

Plongez dans votre propre travail

Zoom en mode image plonge sans fin dans vos photos, un fond d'image animé qui donne l'impression de tomber dans le travail. Les gens construisent un fond en mouvement comme celui-ci avec une vidéo en boucle ou des transformations CSS empilées. C'est ici un seul paramètre Motion Wall : choisissez les images, choisissez le zoom, et le fond d'image en mouvement s'exécute en direct derrière la section sans vidéo à héberger et sans plugin à maintenir.

Texte 3D sans After Effects

Tilt penche tout le mur dans un plan 3D peu profond, un fond de texte en mouvement avec une sensation de profondeur. Normalement, c'est une transformation CSS 3D que vous réglez à la main, ou un widget de fond animé payant. Sur le Motion Wall, c'est une option sur n'importe quelle section, de sorte que le fond de texte animé fait partie du générateur de pages plutôt qu'un extrait de code, et le texte derrière votre contenu reste du texte sélectionnable et indexable.

Vos photos, inclinées en 3D

Une galerie inclinée : vos photos s'inclinent dans un plan 3D peu profond et dérivent, un fond d'image animé avec profondeur. Normalement, cela nécessite une transformation CSS 3D et un script de diaporama, ou un widget de fond animé payant. Sur Motion Wall, c'est une option de la section, donc le fond d'image animé fait partie du générateur de pages, s'affiche en direct et montre votre travail derrière le texte.

Un ticker en direct, intégré

Le tambour fait tourner le texte autour d'un axe horizontal, un fond de texte animé qui tourne comme un ticker. Les gens recherchent un générateur de bandeau défilant, une bannière de texte déroulant ou une animation CSS 3D pour cela. Dans Instinctor, Motion Wall le fait comme un paramètre de la section : tapez les mots, choisissez le tambour, définissez la vitesse, et le fond de texte animé s'exécute en direct sans rien à exporter et sans plugin à mettre à jour.

Votre travail sur une bobine tournante

Le tambour fait tourner vos photos autour d'un axe horizontal, un fond d'image animé qui tourne comme une bobine. Le recréer signifie une animation CSS 3D et un diaporama, ou une exportation vidéo. Sur Motion Wall, c'est un paramètre de la section : choisissez les images, choisissez le tambour, définissez la vitesse, et le fond d'image animé s'exécute en direct sans fichier vidéo et sans plugin à maintenir à jour.

Mouvement bicolore en un clic

Cross fait défiler deux bandeaux l'un sur l'autre en deux encres, un fond de texte animé plus chargé pour une section plus affirmée. Fait à la main, ce sont deux animations CSS superposées et accordées en couleur à la main, ou une bannière de texte défilant que vous achetez et intégrez. En Motion Wall, c'est un seul mouvement avec une deuxième couleur, réglé sur la section, donc le fond de texte animé reste une couche légère et explorable au lieu d'un empilement de widgets.

Stickers disperse des étiquettes pivotées qui dérivent dans le cadre, un fond de texte animé ludique. C'est le genre de chose qu'on assemble en CSS à positionnement absolu ou avec une bannière Canva exportée en image. Sur le Motion Wall, c'est une simple option de la section et le texte reste du vrai texte, donc le fond de texte animé est fait de vrais mots indexables plutôt que d'un visuel aplati que les moteurs de recherche ne peuvent pas lire.

Votre travail, dispersé et vivant

Stickers disperse vos photos en vignettes flottantes et pivotées, un fond d'images animé ludique. C'est généralement un collage CSS en positionnement absolu ou un export Canva enregistré comme une seule image aplatie. Sur le Motion Wall, cela reste une couche vivante d'images séparées, donc le fond animé se met à jour quand vous changez une photo, sans visuel aplati et sans plugin, réglé depuis le panneau de la section.

Votre travail encadre la page

Frame attend que l'écran soit en place, puis fait arriver vos images de l'extérieur, chacune à son tour, et les pose à moitié dans le cadre pour border le texte sans jamais le toucher. Choisissez une bordure complète, un groupe dans chaque coin ou une paire en diagonale, puis réglez leur nombre et leur espacement.

Un mur audacieux, zéro code

Bricks tasse le texte en un appareillage dense de pavés, un sur deux inversé, et fait défiler l'ensemble. C'est le fond de texte animé le plus audacieux de la série, le genre de fond animé qu'on cherche sur CodePen. Dans le page builder Instinctor, c'est un seul mouvement avec une deuxième couleur contrastante, réglé sur la section, donc le fond de texte animé est livré avec la page et n'a jamais besoin d'une mise à jour de plugin.

Mouvement hypnotique en un clic

Vortex fait tournoyer le champ vers l'intérieur, un fond de texte animé qui attire l'œil vers un point central. Le recréer demande du CSS ou du JavaScript personnalisé et beaucoup de réglages, ou un extrait de fond animé dont vous héritez et que vous ne pouvez pas facilement modifier. En Motion Wall, c'est une option sur n'importe quelle section, donc le fond de texte animé est un réglage que vous ajustez dans un panneau, et les mots restent du vrai texte lisible.

Votre travail, qui attire le regard

Vortex fait tournoyer vos photos vers l'intérieur, un fond d'images animé qui attire l'œil vers un point central. Le recréer demande WebGL ou beaucoup de JavaScript personnalisé. En Motion Wall, c'est une option sur la section, donc le fond d'images animé est un réglage que vous ajustez dans un panneau, s'affiche en direct dans le navigateur et montre votre vrai travail plutôt qu'une boucle d'images de banque.

La texture, sans le rendu

Static maintient le mur immobile : le texte en mosaïque sans le mouvement, pour quand vous voulez la texture d'un arrière-plan de texte animé mais une section calme. C'est un motif que vous construiriez autrement avec un arrière-plan CSS répétitif ou une image en mosaïque. Ici, c'est le même Motion Wall avec le mouvement défini sur aucun, donc l'arrière-plan de texte reste des mots réels sur la page et vous pouvez réactiver le mouvement avec un seul contrôle.

Votre travail, épinglé derrière tout le reste

Static en mode image épingle vos photos dans une grille figée, un arrière-plan photo avec la texture d'un arrière-plan d'image en mouvement mais une section calme. C'est ce que vous construiriez autrement avec une grille CSS d'images de fond. Ici c'est le même Motion Wall avec le mouvement désactivé, donc vous gardez vos propres images derrière le texte et pouvez réactiver le mouvement avec un seul contrôle.

Perspective, sans logiciel 3D

Funnel fait converger les rangées vers un point de fuite, un fond de texte animé en perspective. C'est normalement un ensemble de transformations CSS ou une maquette WebGL trouvée sur CodePen. Sur le Motion Wall, c'est une simple option de la section, donc le fond de texte animé fait partie du page builder, s'affiche en direct et garde le texte derrière votre contenu sous forme de texte explorable et indexable plutôt que d'un visuel figé.

Une bannière qui ne s'arrête jamais

Banner fait passer une bande inclinée de texte en mouvement à travers la section, le cousin diagonal de la bannière de texte défilant. Pour cela, on achète un générateur de bannière défilante ou un widget Elementor. Dans Instinctor, le Motion Wall le fait comme un réglage sur n'importe quelle section, donc le fond de texte animé est intégré, reste rapide et ne dépend jamais d'un plugin de bannière tiers qui peut casser à la prochaine mise à jour.

Un look d'imprimé, en direct sur la page

Overprint superpose deux couleurs du même texte légèrement décalées, un fond de texte animé au rendu imprimé façon risographie. Fait à la main, c'est du CSS en couches avec des modes de fusion ; téléchargé, c'est un fond animé que vous ne pouvez pas facilement recolorer. En Motion Wall, c'est un seul mouvement avec une deuxième encre, réglé sur la section, donc le fond de texte animé se règle à votre guise dans un panneau et reste du vrai texte indexable.

Profondeur WebGL, sans WebGL

Coils fait monter le texte en spirale le long de colonnes hélicoïdales verticales, un fond de texte animé élaboré. C'est le genre de fond animé qu'on trouve dans un CodePen WebGL ou un export After Effects. Dans le page builder Instinctor, c'est une simple option de la section, rendue en direct dans le navigateur, donc le fond de texte animé pèse peu sur la vitesse de la page et ne demande aucune bibliothèque, aucun plugin et aucun code à maintenir.

Texte sur une courbe, sans JavaScript

Snake enroule le texte le long d'un chemin sinueux, un fond de texte en mouvement qui se lit comme un défilement suivant une courbe. Le faire à la main signifie des chemins SVG et du JavaScript, ou un effet de texte défilant depuis codepen. Sur le Motion Wall, c'est un mouvement sur la section, donc le fond de texte animé est un paramètre plutôt qu'un script, et les mots restent du texte sélectionnable et indexable sur la page en direct.

Texte circulaire, sans travail SVG

Rings dispose le texte en cercles concentriques qui tournent en sens inverse, une version circulaire du fond de texte animé. Le recréer demande SVG textPath et une animation personnalisée, ou un fond animé que vous copiez sans pouvoir le modifier. En Motion Wall, c'est une simple option sur n'importe quelle section, donc ce fond de texte animé fait partie du page builder, s'affiche en direct et garde le texte sous forme de vrais mots explorables.

Mouvement doux, rien à coder

Wave lanes fait circuler les rangées le long de chemins sinusoïdaux doux, un fond de texte en mouvement plus doux qu'un défilement droit. Construit à la main, c'est du CSS avec images clés ou une esquisse canvas. Sur le Motion Wall, c'est un mouvement sur la section, donc le fond de texte animé est un contrôle que vous définissez dans un panneau, reste rapide sur la page, et n'a besoin d'aucun plugin de texte défilant ou d'animation écrite à la main pour continuer à fonctionner.

Une vague que vous n'avez jamais codée

Wave stack envoie une onde voyageuse à travers des rangées de texte pleine largeur, un fond de texte en mouvement ondulant. C'est le genre de fond animé que les gens recherchent comme une onde CSS de texte ou un effet codepen. Dans Instinctor, c'est une seule option Motion Wall sur la section, donc le fond de texte animé s'affiche en direct, reste léger, et le texte derrière votre contenu reste des mots réels et indexables plutôt qu'une image aplatie.

Un texte qui respire de lui-même

Weight walk anime la graisse des lettres, du fin à l'épais et retour, un fond de texte animé subtil construit sur une police variable. Codé à la main, ce sont des font-variation-settings et des keyframes ; acheté, c'est un widget que vous ne pouvez pas régler. En Motion Wall, c'est un seul mouvement sur la section, donc le fond de texte animé est un réglage dans un panneau et le texte reste du vrai texte explorable.

Un arrière-plan que le curseur révèle

La révélation spotlight masque le mur presque complètement, puis laisse le fond de texte en mouvement briller dans le champ de vision uniquement là où le curseur se déplace. Construit manuellement, c'est un masque piloté par JavaScript et les événements de souris. Sur le Motion Wall, c'est un simple interrupteur sur la section, donc le fond de texte animé est un effet interactif que vous activez dans un panneau, sans code et sans plugin, et le texte dessous reste lisible.

Tous les réglages dans le panneau

Vous réglez le texte, la taille, la graisse et la vitesse. Une seule couleur se lit comme un murmure ; ajoutez-en une deuxième et les modes bicolores les font s'entrechoquer volontairement. Le parallaxe fait dériver le mur contre le curseur pour créer la profondeur, et l'ensemble peut se masquer sur téléphone, là où il ne ferait qu'encombrer l'écran.

De l'énergie, pas de la décoration

Une section statique demande au lecteur de fournir l'intérêt. Un mur en mouvement le fournit à sa place : l'œil accroche la dérive, la section paraît pensée, et le texte au premier plan emprunte cette énergie sans hausser le ton. Utilisé une fois, au-dessus d'un titre capable de le porter, c'est le moyen le moins cher de faire qu'une page semble produite plutôt que publiée à la va-vite.

Qu'est-ce qu'un fond de texte animé ?

Un fond de texte animé est exactement ce que son nom indique : un fond fait de texte en mouvement. Au lieu d'une couleur unie ou d'une photo figée, un mot ou une courte phrase est répété en mosaïque sur toute la section et mis en mouvement derrière votre contenu, assombri juste assez pour rester un décor. Cela donne à une bande ordinaire une impression d'énergie avant même qu'un seul mot ne soit lu.

Les designers construisent d'ordinaire cela à la main en CSS ou avec une vidéo exportée. Instinctor en fait un réglage : activez le mur de mouvement sur n'importe quelle section, choisissez le texte ou vos propres images, choisissez un mouvement et des couleurs, et cela s'affiche en direct sur la page. Le fond en mouvement est du vrai HTML léger : la page reste rapide et le texte devant reste lisible et compatible avec la recherche.

FAQ sur les fonds de texte animé

Qu'est-ce qu'un fond de texte animé ?01
Un fond de texte animé est un fond de section fait de texte en mouvement : un mot ou une phrase répété en mosaïque sur la section et mis en mouvement derrière votre contenu, assombri pour rester un décor.
Comment ajouter un fond de texte en mouvement sans code ?02
Le fond peut-il utiliser des images plutôt que du texte ?03
Un fond animé nuit-il à la vitesse de la page ou au SEO ?04
Cela fonctionne-t-il sur mobile ?05

One line, every trade

The board keeps its first words still and turns the rest over, letter by letter, the way a departures board changes a destination. It is the one motion that says more than one thing, so a page can name every trade it serves in a single line instead of a list.

Voir tout ce qu'il fait

Le mur de mouvement est l'une des quarante façons dont Impulse s'anime. Chaque bloc est bâti de la même manière.

Votre travail, défilant

Le mur de défilement en mode image fait défiler vos photos en bandeau, un arrière-plan image mouvant composé de vrais travaux. C'est l'arrière-plan animé que les gens créent avec un bandeau image, un plugin diaporama ou une vidéo en boucle. Sur le Motion Wall, c'est un seul paramètre sur la section : pointez vers vos images, choisissez le défilement, et l'arrière-plan image mouvant s'exécute en direct derrière votre contenu sans rien à héberger et aucun plugin à installer.

Français
EnglishNederlandsDeutschFrançaisEspañolItalianoPortuguêsPolskiSvenskaDanskעברית