Pour un slogan ou pour une animation sur une page très importante de votre projet, cet effet très moderne est en plus de ça très simple à réaliser. Analysons ensemble comment faire dans cet article.
1ère étape
Le code HTML.
Rendre
<div id=”flip”>
<div><div>passionnant</div></div>
<div><div>facile</div></div>
<div><div>accessible</div></div>
</div>
le dev webNous avons là beaucoup de balises div, oui, mais elles nous permettent de ne pas alourdir le code avec des classes à toutes les lignes.
2ème étape
Stylisons la page.
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-family: arial, sans-serif;
background: #131416;
display: flex; align-items: center;
justify-content: center;
height: 100vh; color: #fff;
flex-direction: column;
font-size: 36px; font-weight: bold;
text-transform: uppercase;
}
3ème étape
Continuons avec les divs et l'id flip.
#flip {
height: 50px;
overflow: hidden;
text-align: center;
}
#flip > div > div {
padding: 4px 12px;
height: 50px;
margin-bottom: 45px;
display: inline-block;
}Dans cette étape nous définissons la hauteur de la zone qui affichera tour à tour chacun des mots écrits.
Nous utlisons overflow: hidden pour cacher les autres mots afin de n’en montrer qu’un seul.
Puis nous stylisons les div qui englobent les mots en leur ajoutant un padding et une hauteur de 50px également.
4ème étape
Stylisons chaque div pour lui donner un fond différent.
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background: #42c58a;
}
#flip div:first-child div {
background: #4ec7f3;
}
#flip div:last-child div {
background: #DC143C;
}
5ème étape
Créons pour terminer l'animation show.
@keyframes show {
0% {margin-top: -270px;}
5% {margin-top: -180px;}
33% {margin-top: -180px;}
38% {margin-top: -90px;}
66% {margin-top: -90px;}
71% {margin-top: 0px;}
99.99% {margin-top: 0px;}
100% {margin-top: -270px;}
}Pendant 5 secondes, nous allons jouer avec margin-top et la hauteur de la classe flip pour afficher chaque mot.
