Fond animé (bulles qui remontent)

Notez que cet article a été écrit pour la première fois il y a plus de 3 ans, mais n'est pas nécessairement 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:

Dans le fichier index.css, on definit les backgrounds :

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).

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.

et dans le css:

en fonction de la taille de votre logo.

 

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *