Créez facilement votre bannière animée

Dans cet article, nous allons expliquer comment créer une bannière animée pour votre campagne Qualifio. En quelques instants seulement, vous pouvez donner vie à votre campagne et la rendre plus attractive.

Comment créer une bannière animée ?

Pour commencer, vous allez devoir vous rendre dans l'étape "Apparence". Vous pourrez alors charger une image pour votre bannière. Prévoyez une bannière suffisamment haute (par ex. 500 px) afin que l'on puisse voir le défilement de l'image.

Ensuite, dans l'étape "Apparence" > "Paramètres avancés" > onglet "CSS", nous allons donner une hauteur maximum de 300 px à notre banner et cacher le surplus de l'image :

#bandeau_sup {
	height: 300px;
	overflow: hidden;
}

Il est temps d'animer notre bannière en ajoutant un peu de magie grâce à de la CSS. L'image va défiler en 2 temps avec une transition verticale. (Du centre de l'image vers le haut ensuite du haut vers le bas avec un petit zoom à mi-temps). Évidemment, ces paramètres sont modifiables à votre convenance.

#bandeau_sup img { 
    -webkit-animation: myanim 25s infinite linear;
}

@-webkit-keyframes myanim {
		0% {-webkit-transform:translateY(-50px) scale(1) ;}
		50% {-webkit-transform: translateY(-210px) scale(1.1);}
		100% {-webkit-transform: translateY(-50px) scale(1);}
}

Pour la version mobile, nous allons également faire une transition. Cette fois-ci, elle sera horizontale, ce qui rendra à notre image un effet beaucoup plus large.

@media only screen and (max-width: 650px) {
	#bandeau_sup {
	 height:initial;
	}
						
	@-webkit-keyframes myanim {
		0% {-webkit-transform:translateX(-150px) scale(2) ;}
		50% {-webkit-transform: translateX(50px) scale(2);}	
		100% {-webkit-transform: translateX(-150px) scale(2);}
	}
}

Comment ajouter un texte dans ma bannière ?

Rendez-vous dans les "Paramètres avancés" > onglet "Javascript" et ajoutez le script suivant :

$("<h1>My title</h1>").appendTo( "#bandeau_sup");

Remplacez le texte entre les balises <h1> par celui de votre choix. Ensuite, nous allons positionner notre texte à l'aide de CSS :

#bandeau_sup h1 {
display: block;
width: 100%;
position: absolute;
z-index: 10;
left: 50%;
top: 10%;
margin-left: -50%;
padding-left: 5%;
padding-right:5%;
text-align: center;
} 

Ici, le texte va prendre le même style que tous les h1 prédéfini dans les options de texte. Si vous désirez un style différent, vous avez le possibilité d'ajouter des propriétés CSS supplémentaires en ciblant toujours l'ID suivant :

#bandeau_sup h1

Par exemple :

#bandeau_sup h1 {
	font-size: 38px;
	letter-spacing: 3px;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.54);
}

N'oubliez pas d'adapter votre texte et sa position pour la version mobile ! Par exemple :

@media only screen and (max-width: 650px) {
	#bandeau_sup h1 {
		font-size: 22px;
		top: 5%;
	}
}