Creating an animated banner

Stefano Rossi -

In this article, we will explain how to create an animated banner for your Qualifio campaign. In just a few minutes, you can bring your campaign to life and make it more attractive.

Screen-Recording-2020-06-18-at-1.gif

How do I create an animated banner?

First, go to the 'Look & feel' step. You will be able to upload an image for your banner. Make sure the banner is high enough (e.g. 500 px) so that one can see the image moving.

Then, in the 'Look & feel' step > 'Advanced settings' > 'CSS' tab, give a maximum height of 300 px to our banner and hide the rest of the image :

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

It's time to liven up the banner by adding a little CSS magic. The image will move in 2 steps with a vertical transition. (From the centre of the image to the top then from the top to the bottom with a small zoom). Of course, these parameters can be changed at your convenience.

#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);}
}

For the mobile version, we will also make a transition. This time it will be horizontal, which will make our image look much wider.

@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);}
	}
}

How do I add text to my banner?

Go to 'Advanced Settings' > 'Javascript' tab and add the following script :

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

Replace the text between the <h1> tags with the text of your choice. Next, we will position our text using 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;
}

Here, the text will take the same style as all the H1 titles of your campaign. If you want a different style, you have the possibility to add additional CSS properties by always targeting the following ID :

#bandeau_sup h1

For instance:

#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);
}

Don't forget to adapt your text and its position for the mobile version! For example:

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