Elementor Tuto 1: Elements qui apparaissent au scroll

Bonjour à tous !

Aujourd’hui on s’attaque à la création d’une fonctionnalité bien pratique pour tout site responsive: Les éléments qui apparaissent et disparaissent en fonction du scroll de la page. Une image (ou plutôt une vidéo) valant mieux qu’un discours, voilà ce que l’on va obtenir:

Comme vous le voyez sur la vidéo ci-dessus, les boutons de partage sociaux du bas de l’écran disparaissent ​lorsque l’on scroll vers le bas et apparaissent lorsque l’on scroll vers le haut.

Pour ce tuto vous aurez besoin de:

  • WordPress (:-)
  • Ocean WP, mon thème de prédilection
  • Elementor
  • Elementor Pro (pour pouvoir associer du CSS personnalisé aux widgets)
  • Quelques feuilles de CSS personnalisé
  • Une dose de Jquery

Méthodologie

Le principe que l’on va utiliser est le suivant:

Un script va scruter les évènements de scrolling de la page et en fonction du sens de scrolling va permuter des une classe CSS aux boutons. Deux classes seront nécessaires pour cela. La première aura pour fonction de rendre les boutons visibles et la seconde de  la masquer. Pour ce faire nous allons changer la position des éléments de manière à soit les afficher en dehors de la zone de l’écran, soit à leur position sur l’écran. Ainsi nous pourrons les afficher et les masquer à l’envie.

1 - Création de la barre de boutons

Pour la barre de boutons des réseaux sociaux, je crée une section dans le footer de mon site. 5 colonnes et dans chacune des colonnes j’insère une icône. Bouton What’sApp, facebook, Instagram, twitter et partage social (que nous verrons dans un autre tuto). Sous l’onglet Responsive, je masque les icônes sur Ordinateur et Tablette. Je ne veux avoir ce comportement que sur Smartphone.

2 - Classe CSS personnalisée

Je vais maintenant préparer chaque bouton. La première opération est d’affecter une classe CSS à  chacun des boutons. Cette classe doit être identique. Je l’appelle site-nav

Dans la section CSS personnalisé de chaque icône, j’affecte alors trois classes.

1 – site-nav pour avoir un index-z élevé pour que l’icône soit en avant plan de tout.

2 – site-nav.is -hidden qui permettra de cacher l’icône au scroll vers le haut. Pour ce faire nous déplacerons l’icône sur l’axe des Y de 500%. Elle s’affichera alors en dehors de l’écran vers le bas et sera donc ainsi masquée.

3 – site-nav.is-visible qui rendra l’icône visible lorsque l’on scrollera vers le bas. translateY(0) remettra l’icône à sa position initiale. La propriété transition ajoute un effet de décalage à ces changements de positions.

3 - JQuery

Maintenant que l’on a préparé les icônes, qu’on leur a affecté une classe identique (site_nav) avec deux états différents (is-hidden et is-visible), il ne reste plus qu’à créer le code JQuery qui servira à activer notre mécanisme.

L’objet de ce code est de calculer le décalage de la position du scroll de tous les éléments possédant la classe site-nav. En l’occurence nos icônes.

let scrollPos = 0;
const nav = document.querySelectorAll('.site-nav');

 

La fonction checkPosition a pour but de récupérer le scroll courant et de le comparer au scroll précédent (qui a été préalablement sauvegardé dans la variable windowY pour déterminer le sens du scroll. Si l’on scroll vers le haut (windowY < scrollPos) alors on attache la classe CSS is-visible aux icônes et on leur enlève la classe is-hidden, ce qui a pour objet de les rendre visibles.

Si l’on scroll vers le bas, il faut les masquer, ce qui est fait par le bloc suivant SCROLL-DOWN. L’opération est inversée, on leur ajoute la classe is-hidden et on leur enlève la classe is-visible. L’icone se retrouve alors masquée car sa position se situe maintenant 500%plus bas sur l’écran. Elle est masquée.

function checkPosition() {

let windowY = window.scrollY;
if (windowY < scrollPos) {
// Scrolling UP
nav.forEach(function(navItem) {
navItem.classList.add('is-visible');
navItem.classList.remove('is-hidden');
});

} else {
// Scrolling DOWN
nav.forEach(function(navItem) {
navItem.classList.add('is-hidden');
navItem.classList.remove('is-visible');
});
}
scrollPos = windowY;
}

La dernière ligne permet de mémoriser la position courante pour qu’elle serve de référence aux tests suivants de scroll.

Ce code est suffisant pour que notre système fonctionne. Il faut cependant le perfectionner un peu de manière à éviter d’avoir trop de calculs inutiles. C’est le but de la fonction debounce. Elle ne va tester la position du Scroll de la fenêtre qu’après avoir attendu 10 millisecondes à partir de la détection d’un mouvement de scroll. Cela suffit à limiter les apparitions / Disparitions intempestives des icônes.

function debounce(func, wait = 10, immediate = true) {
let timeout;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};

Enfin la function est implémentée. Elle sera appelée à chaque évènement scroll de la fenêtre d’affichage.

window.addEventListener('scroll', debounce(checkPosition));

Le code JQUERY COMPLET

let scrollPos = 0;
const nav = document.querySelectorAll('.site-nav');

function checkPosition() {
let windowY = window.scrollY;
if (windowY < scrollPos) {
// Scrolling UP
nav.forEach(function(navItem) {
navItem.classList.add('is-visible');
navItem.classList.remove('is-hidden');
});

} else {
// Scrolling DOWN
nav.forEach(function(navItem) {
navItem.classList.add('is-hidden');
navItem.classList.remove('is-visible');
});
}
scrollPos = windowY;
}

function debounce(func, wait = 10, immediate = true) {
let timeout;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
window.addEventListener('scroll', debounce(checkPosition));

Pour conclure

Développer son Site internet avec Elementor permet d’aller bien plus loin avec WordPress. Combiner le Jquery, les classes CSS personnalisées avec les puissantes fonctions du Site Builder ouvrent de nouvelles perspectives aux créateurs, aux Webmaster et aux WebDesigner.

Découvrez le résultat ici : https://www.carbonnel-media.com

N’hésitez pas à commenter cet article.

 

A bientôt.

Pierre Carbonnel

CARBONNEL MEDIA CONSULTANT

Pierre Carbonnel

Pierre Carbonnel est le créateur de la société CARBONNEL MEDIA CONSULTANT.Web Designer depuis 2010 et Consultant en Communication depuis plus de 20 ans, il crée, conçoit et réalise des Sites Internet et des boutiques en ligne personnalisés pour le compte de ses clients.

Laisser un commentaire

Partager sur facebook
Partager sur twitter
Partager sur linkedin