Lorsque vous utilisez l’entête plein écran sur votre site, vous pouvez y ajouter une flèche de défilement vers le bas de page de manière à montrer à vos visiteurs qu’il reste du contenu à parcourir.

Malheureusement vos visiteurs ne voient pas forcément tous cette flèche et peuvent rater des informations intéressantes.

Je vous propose aujourd’hui de faire bouger cette flèche de mani§re à attirer l’oeil de vos visiteurs et faire en sorte qu’ils cliquent dessus.

Pour cela, cliquer sur Apparence->Personnaliser->CSS additionnel, ou copiez-collez le code suivant dans le fichier style.css de votre thème enfant :

/* Fleche de defilement vers le bas bouge */

@-webkit-keyframes bounce {
0%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@keyframes bounce {
0%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
span.scroll-down.et-pb-icon { 
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

 

Voici le résultat obtenu avec ce petit bout de code:

Bien sur en vrai le mouvement est plus fluide que sur mon GIF.

Vous pouvez voir une Démo ici : http://playground.divi-community.fr/

A vous de jouer maintenant 😉

D'autres tutoriels pouvant vous intéresser: