Un menu vertical à défilement infini

Online Coding Courses for Kids

Menu de défilement infini

De notre sponsor: Divi vous donne le pouvoir de créer facilement des designs spectaculaires.

Remarque: à partir de maintenant, je prévois de publier des “composants” simples et d’expliquer leur principe de fonctionnement de base dans de petits articles. Dans cette première, je vais regarder l’illusion de défilement en boucle infinie.

Il y a quelque temps, un menu est vraiment sympa sur l’incroyable de Madeleine Dalla site Internet c’était infiniment défilable. Je me suis demandé comment cela avait été réalisé et après avoir cherché des solutions existantes, j’ai trouvé grande démo de Vincent Orback sur Codepen. Il montre comment retirer cet effet avec des sections sur une page. Je voulais utiliser son script pour le faire fonctionner pour un menu.

Le principe de fonctionnement n’est pas trop compliqué: il y a un tas d’éléments de menu que nous devons cloner afin de nous assurer que nous avons suffisamment d’éléments pour créer une illusion de défilement. L’illusion fonctionne comme ceci: une fois que nous faisons défiler et atteignons les éléments clonés, nous remettons la position de défilement à 0. Ainsi, dès que le même point (visuel) est atteint, nous revenons au début.

De combien de clones avons-nous besoin? Nous avons besoin d’autant de clones que d’éléments dans la zone visible. Par exemple, si 8 éléments tiennent dans la hauteur de la fenêtre, nous devons créer 8 clones.

La quantité d’éléments de menu est importante lorsque l’on considère la quantité d’espace qu’ils occuperont sur l’écran (ou la zone de défilement). Si vos articles ne remplissent pas complètement l’écran, l’illusion se brisera. Vous devez donc vous assurer d’en avoir suffisamment et de définir une taille de police raisonnable pour que les éléments occupent suffisamment d’espace.

Nous laissons le menu défiler mais nous masquons la barre de défilement. Le menu couvre toute la fenêtre et c’est l’élément que nous faisons défiler.

Astuce: si vous souhaitez visualiser l’illusion, assurez-vous simplement que la barre de défilement n’est pas masquée. Vous le verrez remonter au sommet, une fois la zone «clonée» atteinte. Supprimez simplement:

::-webkit-scrollbar {
  display: none;
}

… Et la ligne scrollbar-width: none; pour Firefox.

Notez que j’utilise un repli pour mobile où je veux simplement afficher le menu complet.

J’espère que vous trouverez ce petit composant utile!

Résumé des sites Web inspirants # 15

Close Menu