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 :

 

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

 

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

fond-plage

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

slide1

slide 1

 

slide2

slide 2

 

slide3

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.

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


Vous voulez gagner de l'argent avec votre blog ?
Lisez tout de suite BlogBuster dispo sur Amazon, Kobo, Fnac, iTunes pour 3,99 €

blogbuster ebook

Nous vous recommandons :


Categories and Tags:  Design, Webmastering

Commentaires (3)

 

  1. Djamal dit :

    Merci Jean Baptiste de partager avec nous ce bout de code css qui permet de se faire la promotion (c’est bon ça !).
    Je n’ai pas encore testé mais je suppose que tout ça doit rentrer sans problème dans la partie widget de WordPress ?!

  2. taira dit :

    le qel de tous ces code gere l’animation de la baniere si je veux ke personalise a mon blog

  3. Fred dit :

    Super tuto ;-)
    Par contre ne pas oublier de changer les » par des  » dans le Html.
    @+

Laisser un commentaire

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



Deviens toi aussi un YouTubeur


Rechercher


Recevoir Blogbuster par email

    Ajoutez votre email :





Ecrivez votre livre



Derniers Commentaires

  • Avatar UtilisateurYannick { Génial l'article ! Ça devrait bien m'aider pour optimiser mon site ! Merci Blogbuster } – Fév 15, 9:04
  • Avatar UtilisateurOdi { avec qoui puis je prendre le son si je fais des tutos sur pc ie des tutos de graphisme. } – Fév 14, 10:28
  • Avatar UtilisateurYann RES { Bonjour, j'imagine qu'aujourd'hui les niches à sucés cité plus haut sont devenue des niches saturées, ou je me trompe ? } – Fév 03, 4:17
  • Avatar UtilisateurYann RES { Au final un like ou un partage sur faceboo ou autre c'est comme un backlink non ? } – Fév 03, 11:45
  • Avatar UtilisateurYann RES { Super sympa cet article, actuellement j'utilise GTmetrix pour tester mes sites. } – Fév 03, 9:50
  • Avatar UtilisateurYann RES { Super article, et merci pour l'info, je ne connaissais pas Uber Suggest. } – Fév 01, 6:24

Catégories


Derniers articles et tutos


Derniers plugins ajoutés


Trouver un plugin


Mentions légales - Contact