Notez que cet article a été écrit il y a plus de 5 ans, mais il n'est pas forcément obsolète.
Pour créer un background animé, comme sur la page d’accueil de murviel-info.com, nous utilisons jQuery, une image background jpg fixe et deux images png représentant nos bulles que l’on anime en recalculant la position (absolue) de ces deux images.
La taille de notre header est 1280 × 300. 1280px est la résolution de l’écran, 300px est la hauteur de l’entête.
Je crée un fond rouge: fond.jpg (1280 × 300), et deux images png avec des bulles de différentes tailles: bulles_1.png et bulles_2.png (1280 × 600) afin de les animer avec des vitesses différentes (600px pour dupliquer une bande de 300px et permettre l’animation).
Si vous affichez ces fichiers dans votre navigateur, vous ne pourrez rien voir car les bulles sont blanches sur blanc. La taille des fichiers png est évidemment importantes (150ko et 200ko). Pour cela, nous créeront une image fond_fixe.jpg, plus légère, qui permettra l’affichage pendant le chargement de toutes les images.
Afin d’afficher le header, créez un fichier index.html suivant le modèle:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!doctype html> <html> <head> <title>Murviel-Info</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <header> <div id="anim_bg"> <div id="layer_1"></div> <div id="layer_2"></div> </div> </header> </body> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="index.js" type="text/javascript"></script> </html> |
Dans le fichier index.css, on definit les backgrounds :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/* CSS: background animé */ body { margin: 0; } header { height: 150px; background: url(images/fond_fixe.jpg) no-repeat center top; z-index: 10; } header #anim_bg { height: 150px; background: url(images/fond.jpg) no-repeat center top; overflow: hidden; z-index: 11; position: absolute; left: 0; top: 0; width: 100%; } header #anim_bg #layer_1, header #anim_bg #layer_2 { position: absolute; left: 0; top: 0; width: 100%; height: 600px; } header #anim_bg #layer_1 { background: url(images/bulles_1.png) no-repeat center top; } header #anim_bg #layer_2 { background: url(images/bulles_2.png) no-repeat center top; } |
Le z-index et la position: absolute permettent de charger les images et de recouvrir le fond fixe.
Enfin, l’animation se fait en jQuery dans index.js (chargé à la fin de index.html).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// Load $(window).load( function() { // Attente jusqu'à la fin du chargement des images pour démarrer l'animation setInterval('header_animate()', 40); }); // Positions et vitesses var header_layers = { layer_1: { speed: 1, pos: 0 }, layer_2: { speed: 2, pos: 0 } }; // Fonction d'animation function header_animate() { // Mouvement header_layers.layer_1.pos += header_layers.layer_1.speed; header_layers.layer_2.pos += header_layers.layer_2.speed; // Réinitialisation de la position if (header_layers.layer_1.pos > 300) { header_layers.layer_1.pos -= 300; } if (header_layers.layer_2.pos > 300) { header_layers.layer_2.pos -= 300; } // Position $("#layer_1").css("top", Math.round(header_layers.layer_1.pos)+"px"); $("#layer_2").css("top", Math.round(header_layers.layer_2.pos)+"px"); } |
Voilà, on obtient un joli background animé.
Pour obtenir l’image fond_fixe.jpg, il suffit de désactiver le javascript du navigateur, et de rafraîchir la page. Lancez l’outil de capture, mettez votre navigateur en plein écran, et capturez l’image affichée, cela sera notre image de départ.
Pour mettre un titre dans ce background, on peut créer une div « title ». Cette div doit être positionné en relative (z-index ne fonctionnant que sur des éléments positionnés), avec un margin auto, une largeur et un z-index de 12.
|
1 2 3 4 5 6 7 8 9 |
<header> <div id="title"> <h1 title="jQuery, web, wordPress ..."></h1> </div> <div id="anim_bg"> <div id="layer_1"></div> <div id="layer_2"></div> </div> </header> |
et dans le css:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
header #title { margin: 0 auto; width: 391px; padding-top: 20px; position: relative; z-index: 12; } header #title h1 { height: 64px; background: url("images/murviel-info_logo.png") no-repeat; } |
en fonction de la taille de votre logo.
Sympathique les articles, continuez comme ca