Faites bouger la flèche de défilement vers le bas de l’entête plein écran

par Julien Guiard | 30 septembre 2017 | Tutoriels Divi | 15 commentaires

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 : https://playground.divi-community.fr/

A vous de jouer maintenant 😉

Ces tutoriels pourraient vous intéresser

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie

20% sur la licence annuelle

15 Commentaires

Passicos Loïc sur 11 octobre 2017 à 08h20

Quel plaisir quand les choses sont expliquées simplement 🙂
Julien sur 11 octobre 2017 à 08h30

Merci à toi. C’est le but de ce site alors c’est un plaisir si ça marche 😉
KidKihl sur 9 janvier 2018 à 14h14

Merci beaucoup pour votre code.
Payet sur 13 juillet 2018 à 06h54

bonjour moi ça ne marche pas sur le thème enfold pourquoi?
Julien sur 13 juillet 2018 à 09h21

Bonjour, ce sont des tutoriels pour le thème Divi, donc il ne fonctionne pas sur d’autres thèmes WordPress.
nzaoui sur 17 septembre 2018 à 11h06

Salut Julien, tout d’abord merci bcp pour tous ces tutoriels et infos…. J’ai d’ailleurs acheté le visual footer, plutôt satisfait de son effet plein écran.

J’ai une petite question concernant cette flèche qui bouge légèrement vers le bas, je cherche à faire la meme chose, un petit effet de respiration ou de mouvement léger comme cette flèche mais avec du texte.

Si jamais ca fait l’objet d’un prochain tutoriel ….

Bonne continuation Nico
Julien sur 18 septembre 2018 à 11h29

Bonjour et merci 😉
Pour ce que tu veux faire, tu peux essayer de reprendre le code CSS en l’appliquant au paragraphe ou titre que tu veux faire bouger plutôt qu’à la flèche de Divi.
Théo sur 18 octobre 2018 à 10h03

La classe !!!
Fabien sur 23 décembre 2019 à 16h00

Bonjour, merci pour le tuto mais je ne comprends pas comment l’appliquer à mon image une fois le code entré dans l’emplacement indiqué sur l’interface admin. Merci pour votre aide.
Julien Guiard sur 24 décembre 2019 à 17h35

Bonjour, si tu utilises le module indiqué alors l’animation est automatique et tu n’as rien à faire à part copier/coller le code.
MickA sur 9 janvier 2020 à 14h39

Bonjour,

J’ai fait un copier/coller du code dans le .css (en bas de la page du code) de mon Divi-child et malheureusement, ça ne fonctionne pas pour moi,ma flèche reste fixe…

HELP please

Merci
MickA sur 9 janvier 2020 à 14h58

Finalement j’ai réussi.
J’ai appliqué le code directement dans la personnalisation du CSS de la page. Et là du coup ça marche.
On peut également changer la vitesse du “sautillement” de la flèche, la hauteur aussi. C’est cool.
Merci
manu sur 23 mars 2020 à 11h32

Excellent tuto ! Merci beaucoup Julien.
Ca marche impec !
Continuez comme ça 🙂
Valentin sur 5 avril 2021 à 12h54

Bonjour, le code ne marche plus
Pierre Bichet sur 21 avril 2021 à 12h36

Je te suggère de vérifier si tu n’as pas fait une erreur en plaçant ton code car tu peux constater que notre démo est parfaitement fonctionnelle.