Animer des images de fond de manière programmatique
Il existe deux principales façons d'animer des images de fond:
- Utilisez des sprites CSS pour mettre à jour un
background-position
en JS . - Hacks avec
.toDataURL()
.
La première option fonctionne très bien si vous disposez de l'image à l'avance, mais que se passe-t-il si votre source doit être générée par programmation, par exemple par un <canvas>
? La solution au problème 1 consiste à utiliser .toDataURL()
sur le canevas et à définir l'arrière-plan sur l'URL générée:
while(1) {
var url = canvas.toDataURL('image/jpeg');
el.style.background = 'url(' + url + ')';
}
Cette approche pose deux problèmes:
- Les URL
data:
ajoutent environ 33% de surcharge à la taille de l'image obtenue. - Un grand nombre de modifications du DOM (
el.style
).
Ces deux méthodes sont inefficaces et non acceptables pour une application Web fluide à 60 FPS.
Utiliser un canevas 2D comme arrière-plan

Il s'avère qu'une API non standard, que WebKit possède depuis des années, peut utiliser un canevas comme source d'arrière-plan. Malheureusement, aucune spécification n'est publiée pour cette fonctionnalité.
Tout d'abord, au lieu de spécifier une URL pour la navigation arrière:
.bg {
background: url(bg.png) no-repeat 50% 50%;
}
Utilisez -webkit-canvas()
, en référençant un identifiant de chaîne à un contexte de canevas:
.canvas-bg {
background: -webkit-canvas(animation) no-repeat 50% 50%;
}
Ensuite, nous devons créer le contexte 2D avec une version spéciale de .getContext()
:
var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);
Informations supplémentaires de Dave Hyatt:
Animations
Comme indiqué dans la démonstration, nous pouvons réutiliser requestAnimationFrame()
pour piloter une animation. C'est très pratique, car une fois les éléments connectés, l'association entre le CSS et l'élément de canevas est conservée. Il n'est pas nécessaire de jouer avec le DOM.
La démonstration n'est pas animée dans Chrome ?
Le canal stable actuel de Chrome (version 23) contient crbug.com/161699, ce qui empêche une animation requestAnimationFrame()
de mettre à jour l'arrière-plan correctement. Ce problème a été résolu dans Chrome 25 (actuellement Canary). La démo devrait également fonctionner correctement dans Safari actuel.
Avantages en termes de performances
Nous parlons ici de canevas. Les animations accélérées par matériel sont désormais pleinement disponibles (au moins pour les navigateurs dans lesquels cette fonctionnalité fonctionne). Pour rappel, il n'est pas nécessaire de toucher au DOM à partir de JS.
Utiliser WebGL comme arrière-plan
Attendez une seconde. Cela signifie-t-il que nous pouvons alimenter un arrière-plan CSS à l'aide de WebGL ? Bien sûr ! WebGL n'est qu'un contexte 3D pour le canevas. Il vous suffit de remplacer "experimental-webgl" par "2d".
var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);
Voici une preuve de concept qui contient un élément div dont l'arrière-plan est dessiné à l'aide de nuanceurs de sommets et de fragments: DÉMO
Autres approches
Notez que Mozilla utilise -moz-element()
(MDN) depuis un certain temps. Il fait partie de la spécification CSS Image Values and Replaced Content Module Level 4 (Valeurs d'image CSS et module de contenu remplacé de niveau 4) et vous permet de créer une image générée à partir d'un code HTML arbitraire: vidéos, canevas, contenu DOM, etc. Toutefois, l'accès complet aux images instantanées du DOM pose des problèmes de sécurité. C'est principalement pour cette raison que les autres navigateurs n'ont pas adopté cette fonctionnalité.