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

par | 30 septembre 2017 | Tutoriels Divi | 8 commentaires 

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

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 😉

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

D'autres tutoriels pouvant vous intéresser:

Créez une page contact avec une carte Google Maps ...
Comment corriger l’erreur “Expiration ...
Forcer le footer de Divi à être tout en bas de l&#...

  1. Passicos Loïc
    Passicos Loïc le 11 octobre 2017 à 08h20

    Quel plaisir quand les choses sont expliquées simplement 🙂

  2. Julien
    Julien le 11 octobre 2017 à 08h30

    Merci à toi. C’est le but de ce site alors c’est un plaisir si ça marche 😉

  3. KidKihl
    KidKihl le 9 janvier 2018 à 14h14

    Merci beaucoup pour votre code.

  4. Payet
    Payet le 13 juillet 2018 à 06h54

    bonjour moi ça ne marche pas sur le thème enfold pourquoi?

  5. Julien
    Julien le 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.

  6. nzaoui
    nzaoui le 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

  7. Julien
    Julien le 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.

  8. Théo
    Théo le 18 octobre 2018 à 10h03

    La classe !!!

Envoyer le commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.