Créer une bannière animée en CSS pour son Blog

rédigé par Jean-Baptiste, le novembre 11, 2014

La semaine dernière Olivier Duffez de WebRankInfo m’a fait l’honneur de présenter mon livre à ses lecteurs. A la suite de son article, les commandes se sont littéralement envolées (mon livre s’est retrouvé dans le top 100 Kindle pendant 6 jours) et les sollicitations de professionnels du web aussi ;-) Parmi la dizaine de sollicitations que j’ai reçues, une venant de Matthieu Laroussinie (développeur chez Wifeo) est sortie du lot.

See this Pen on Codepen

Matthieu venait d’acheter mon ouvrage (+ 1 point ;-) ), il n’avait rien à me vendre (+ 1 point), et même des ressources gratuites HTML/CSS à offrir pour aider les petits webmasters et blogueurs du dimanche comme vous et moi (+ 2 points).

Alors j’ai regardé ce que je pouvais faire à partir des différents codes proposés et j’ai adapté le CSS slideshow (voir ci-dessus) pour mes propres besoins en créant une bannière animé 300×250 en CSS (voir ci-dessous) :

Celle-ci m’a permis d’avoir une auto-promotion sympa pour  mon livre (la boucle  était bouclée). Je vous propose de vous expliquer ici comment faire la même bannière animée pour votre blog. L’avantage de faire cela en CSS plutôt qu’en flash est que ce sera lisible même sur mobile (si votre thème est responsive).

Au sommaire :

1. Pré-requis
2. Créer 3 images PNG et 1 jpg avec The Gimp
3. Ajouter les instructions CSS suivantes à votre thème
4. Copie-coller le code HTML suivant dans votre zone de widgets

1- Pré-requis

Pour pouvoir personnaliser ma bannière, vous allez avoir besoin :

• d’un logiciel d’édition graphique gratuit comme The Gimp
• d’un bloc notes comme NotePad++ ou TextWrangler si vous êtes sur Mac
• d’un blog qui permet d’ajouter du code HTML et du CSS (blogger, tumblr, wordpress le permettent)

2- Créer 3 images PNG et jpg avec The Gimp

Le jpg va servir de fond à vos 3 images. Voici le mien :

C’est une photo de la plage de Vieira au Portugal que j’ai prise pendant mes dernières vacances d’été.

Les 3 images seront les slides qui s’animeront dans votre espace 300×250. J’ai fait en sorte de laisser un espace libre transparent de 20 pixels en hauteur et en largeur pour qu’on ait toujours un aperçu du fond (même après l’animation) :

slide 1

 

slide 2

 

slide 3

Pour gérer la transparence sans exploser de trop le poids de vos images, je vous recommande de convertir cela en PNG8 avec l’extension .png. Si vous voulez repartir de mes calques The Gimp, voici mon fichier XCF à modifier : modele-slide-1.xcf

3- Copier-coller les instructions CSS suivantes

Copiez-collez ce texte à la fin de la feuille de style de votre thème de blog.

.contener_slideshow
{
 width:300px;
 height:250px;
 overflow: hidden;
 position: relative;
 background-image: url(<http://votre-url>/fond-plage.jpg);
}
.slid_1, .slid_2, .slid_3
{
 position: absolute;
 width:300px;
 height:211px;
}
.slid_1{left: 0;}
.slid_2{left: 300px;}
.slid_3{left: 600px;}
.contener_slide
{
 width: 600px;
 height: 300px;
 left:0px;
 position: absolute;
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-name: anim_slide;
 -moz-animation-duration: 10s;
 -moz-animation-iteration-count:infinite;
 -moz-animation-name: anim_slide;
 -ms-animation-duration: 10s;
 -ms-animation-iteration-count:infinite;
 -ms-animation-name: anim_slide;
 animation-duration: 10s;
 animation-iteration-count:infinite;
 animation-name: anim_slide;
}
@-webkit-keyframes anim_slide 
{
 0% {left:0px;}
 22% {left:0px;}
 33% {left:-300px;}
 45% {left:-300px;}
 66% {left:-600px;}
 90% {left:-600px;}
}
@-moz-keyframes anim_slide 
{
 0% {left:0px;}
 22% {left:0px;}
 33% {left:-300px;}
 45% {left:-300px;}
 66% {left:-600px;}
 90% {left:-600px;}
}
@-ms-keyframes anim_slide 
{
 0% {left:0px;}
 22% {left:0px;}
 33% {left:-610px;}
 45% {left:-610px;}
 66% {left:-1220px;}
 90% {left:-1220px;}
}
@keyframes anim_slide 
{
 0% {left:0px;}
 22% {left:0px;}
 33% {left:-300px;}
 45% {left:-300px;}
 66% {left:-600px;}
 90% {left:-600px;}
}

Vous penserez bien sûr à mettre à jour l’URL de votre image de fond

4- Copier-coller le code HTML suivant

Copiez-collez ce texte dans un module libre HTML dans votre zone de Widget

<div align= »center »>
<div class= »contener_slideshow »>
<div class= »contener_slide »>
<div class= »slid_1″><a href= »<http://votre-url-cible> »><img src= »<http://votre-url>/slide1.png »></a></div>
<div class= »slid_2″><a href= »<http://votre-url-cible> »><img src= »<http://votre-url>/slide2.png »></a></div>
<div class= »slid_3″><a href= »<http://votre-url-cible> »><img src= »<http://votre-url>/slide3.png »></a></div>
</div>
</div>
</div>

Vous penserez bien sûr à mettre à jour les 2 URLs  (dans href= et dans src=) de vos 3 slides.

Des problèmes ? Des questions ?

Je ne suis pas rentré dans le détail de l’intégration des codes HTML et CSS pour chaque plateforme (WordPress, Blogger, Tumblr) ni sur les manipulations que j’ai faites dans The Gimp. Si vous avez des questions spécifiques ou rencontrer des problèmes sur l’une de ces plateformes ou sur The Gimp, n’hésitez pas à réagir dans les commentaires. Je répondrai à vos question et détaillerai les manipulations si forte demande de votre part.

• À propos
• Articles récents

Suivez-moi

Jean-Baptiste

Responsable marketing digital chez Orange le jour. Blogueur, Auteur, Entrepreneur la nuit,j'ai plus de 10 ans d'expérience sur Internet en gestion de projets, création d'audience, monétisation.

Suivez-moi

Les derniers articles par Jean-Baptiste (tout voir)

• Comment supprimer 20 000 commentaires de spam sur WordPress ? - 7 mars 2024
• Marketing Vidéo : le livre pour faire des vidéos professionnelles - 10 mars 2019
• Un article de blog ancien peut pénaliser le SEO d’un site - 27 décembre 2018