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.
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 web
Nous avons là beaucoup de balises div
, oui, mais elles nous permettent de ne pas alourdir le code avec des classes à toutes les lignes.
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;
}
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.
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;
}
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.