Fond d'écran 3D qui bouge : profondeur et mouvement

Comment une animation donne l'impression de 3D

Un écran est plat. Pour qu'une image paraisse profonde, il faut reprendre les indices que l'œil utilise dans la vie réelle : les lignes parallèles qui se rejoignent au loin, les objets proches qui passent devant les objets lointains, le flou de ce qui est hors de la mise au point, et surtout le mouvement. Un objet proche semble se déplacer plus vite qu'un objet éloigné : c'est l'effet de parallaxe, très efficace pour suggérer le relief.

Les cinq scènes de cette sélection s'appuient chacune sur un de ces indices. Aucune ne repose sur un moteur 3D : ce sont des dessins calculés image par image dans votre navigateur, ce qui les garde légères et parfaitement en boucle.

Cinq animations, cinq effets de profondeur

La route synthwave : la perspective

C'est la scène la plus « 3D » de la galerie. Les lignes de la grille partent toutes d'un point situé sur l'horizon, sous un soleil rétro rayé. Les lignes transversales, elles, se resserrent à mesure qu'elles s'éloignent et s'écartent en approchant du bas de l'écran. Quand elles défilent vers vous, on a l'impression de rouler sur un sol infini. La boucle ne dure que 4 secondes : chaque ligne prend exactement la place de la précédente, si bien que le défilement paraît sans fin.

Les vagues : les couches

Cinq bandes de couleur s'empilent, de la plus claire en haut à la plus foncée en bas, comme des plans successifs. Chacune porte une fine ombre sur sa crête, qui la détache de la couche du dessus. Les bandes ondulent dans des sens et à des rythmes différents : ce décalage entre les plans crée un effet de parallaxe discret, proche des paysages en papier découpé.

Le réseau de particules : le volume

Des points lumineux dérivent lentement ; dès que deux points se rapprochent, un trait les relie, d'autant plus net qu'ils sont proches. Les liaisons se font et se défont sans cesse, ce qui dessine une sorte de maillage en mouvement. C'est l'animation la plus calme des cinq, avec sa boucle de 24 secondes : en Graphite, elle convient à un bureau de travail.

Les lumières bokeh : le flou

Le bokeh désigne les taches lumineuses floues qu'un objectif produit en dehors de la zone nette. Ici, des disques de tailles très variées montent doucement en se superposant ; les plus grands semblent tout proches de l'objectif, les plus petits loin derrière. La palette Guirlande évoque des lumières de fête, Ville des enseignes nocturnes, Champagne une ambiance dorée.

Le dégradé fluide : la matière

De grandes taches de couleur glissent et se mélangent sur le fond. Leurs bords très doux donnent l'impression d'une matière épaisse, comme une encre dans l'eau ou une forme abstraite en 3D. Les palettes claires, Pêche et Menthe, laissent les icônes bien lisibles.

Fond d'écran interactif : ce que font nos animations, et ce qu'elles ne font pas

Un fond d'écran interactif réagit à ce que vous faites : il suit le curseur, s'anime au clic ou change selon la musique. Nos animations ne réagissent ni à la souris ni au clavier. Elles tournent en boucle de façon identique, ce qui garantit un bureau prévisible et une vidéo qui recommence sans saut.

Si vous cherchez de l'interactivité, elle passe par le logiciel qui affiche le fond. Selon sa documentation, Lively Wallpaper transmet par défaut la souris aux fonds de type page web, et le clavier peut s'activer dans ses réglages ; les fonds de type application (jeux Unity ou Godot) gèrent eux-mêmes leurs entrées. Lively propose aussi un fond « en profondeur » : à partir d'une image fixe, il estime la distance de chaque zone et en tire un effet de parallaxe. Wallpaper Engine, payant sur Steam, annonce de son côté des animations 2D et 3D dans son catalogue.

Sur Mac, les réglages ne proposent pas de fond interactif. Les vues aériennes de macOS s'animent au verrouillage et au déverrouillage, et les fonds dynamiques suivent la lumière de la journée.

Installer un fond d'écran 3D qui bouge

Ouvrez une animation, choisissez sa palette puis l'une des trois options de l'aperçu.

1. VidéoChoisissez la définition (1080p, 1440p, 4K, Ultra-large ou Vertical) et cliquez sur « Télécharger la vidéo ». L'enregistrement dure une boucle ; pour la route synthwave, la vidéo couvre deux boucles, soit 8 secondes.
2. Lien pour LivelyLe lien copié s'ajoute dans Lively comme adresse web ; la scène est alors dessinée en direct à la taille exacte de votre écran, même sur un double écran.
3. Plein écranPour un écran d'ambiance sans rien installer, y compris sur Mac.

Les étapes détaillées, de l'installation de Lively aux problèmes courants, sont dans le guide mettre un fond d'écran animé sur PC.

Un effet de profondeur rend mieux en grand. Exportez la vidéo à la définition native de votre moniteur : en 4K sur un écran 3840 × 2160, en Ultra-large sur un 21:9.

D'autres fonds pour aller plus loin

Les cinq autres animations du site (aurore boréale, nuit étoilée, neige, pluie sur la ville, lucioles) sont réunies avec celles-ci dans la page des fonds d'écran animés. La neige et la pluie utilisent d'ailleurs aussi la parallaxe : les flocons et les gouttes les plus grands tombent plus vite et sont plus opaques, comme s'ils étaient plus près de vous.

Pour une image fixe aux formes abstraites et aux volumes doux, voyez les fonds d'écran abstraits, qui comprennent des formes fluides en relief et des motifs low poly, ou les néons des fonds d'écran gamer. Et pour composer votre propre scène, le studio de création vous laisse choisir le style, les couleurs et la taille.