Lorsque nous avons des données chiffrées à afficher, nous présentons souvent ces dernières de façon fade et sans animation. Et pourtant : créer une animation qui affiche progressivement le nombre final est très simple à réaliser et vous permettra d'égayer vos nombres ! Voyons comment faire dans cet article.
1ère étape
Commençons avec l'insertion des librairies dans le code HTML.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
</head>
Nous allons utiliser les librairie jQuery, Waypoints et Counter-up pour créer cette animation.
2ème étape
Le code HTML.
<div class="counter">
<div class="box">
<i class="fas fa-user-graduate"></i>
<div class="num">25,578</div>
Étudiants formés
</div>
</div>Nous allons placer dans la classe .num le nombre que l'on souhaite afficher progressivement.
Attention : Nous ne pouvons pas mettre d'espace sinon l'animation ne fonctionnera plus.
3ème étape
Styliser la classe counter et num.
.counter-sec{
padding: 80px 0;
width: 100%;
background: #131416;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
.num{
font-size: 40px;
margin: 20px 0;
}
4ème étape
Styliser la classe box et l'image.
.box{
flex: 1;
text-align: center;
padding: 20px;
color: #fff;
text-transform: uppercase;
}
.box i{
font-size: 40px;
color: #333;
}
5ème étape
Gestion de l'animation en JavaScript.
$(document).ready(function(){
$('.num').counterUp({
time: 1200
});
});Nous allons utiliser jQuery pour attendre que la page soit chargée, puis nous allons utiliser Counter-up pour créer l’animation. Time sera le temps que l’animation va mettre pour afficher le nombre fini.
