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.

Jean-Baptiste
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.
Jean-Baptiste
Suivez-moi


Tu veux gagner de l'argent avec ton blog ?
Lis tout de suite BlogBuster dispo sur Amazon, Kobo, Fnac, iTunes pour 3,99 €

blogbuster ebook

Nous te 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 :





BlogBuster, le livre


blogbuster ebook

Derniers Commentaires

  • Sylvain { Bonjour J'espère que vous allez voir mon message J'ai acheter votre livre pour apprendre le monde du blogging, d’ailleurs je l'ai trouver génial :) Je... } – Nov 20, 4:52
  • Seekat { Bonjour, Petit conseil supplémentaire : n'hésitez pas à faire un peu de teasing auprès de votre communauté avant la sortie de votre vidéo. Cela vous... } – Nov 09, 4:33
  • sg { Bonjour Actuellement en auto-entreprise, je voudrais mettre en place un système de cagnotte type cagnotte en ligne afin que les contributeurs puissent m'aider à payer... } – Nov 08, 6:14
  • fred { merci bcp sa fait longtemps que je cherchais quelqu'un qui pouvais m'explique sa merci bcp } – Nov 08, 8:16
  • Habib { Bonsoir Merci pour l'article, très bien structuré. C'est quoi le titre de livre de Guy Kawasaki que vous avez recommandé dans l'article. très cordialement } – Nov 07, 2:05
  • Jean-Baptiste { Salut @myrakiel je mets déjà régulièrement à jour cet article ;-) Salut @patrice il faut déclarer à Prodouane toute recette venant de l’UE (hors France).... } – Oct 29, 6:46

Catégories


Derniers articles et tutos


Derniers plugins ajoutés


Trouver un plugin


Mentions légales - Contact