8 extraits CSS et JavaScript pour ajouter des effets de défilement au site …

Voyager est l’une des tâches les plus élémentaires que nous demandons aux utilisateurs. A en juger par le nombre de pages et d’applications déployées aujourd’hui, nous en demandons beaucoup.

L’ajout d’effets basés sur le défilement peut être un excellent moyen d’améliorer votre expérience utilisateur. Cela signifie que tant qu’ils n’interfèrent pas avec la possibilité de parcourir de longues sections de contenu. Les effets devraient simplifier et ajouter une touche d’élégance au mélange.

Voici une collection d’effets de défilement et d’outils qui raviront les visiteurs et (espérons-le) vous éloigneront du chemin.

Section par section

Les sites Web modernes sont généralement divisés en plusieurs sections de contenu, chacune avec des éléments distincts. Cette pièce pratique ajoute un bouton (disponible dans différents styles) en bas de l’écran qui permet aux utilisateurs de cliquer et de faire défiler jusqu’à la section suivante. Utilisez l’ID CSS avec jQuery pour faire fonctionner la navigation.

Voir le stylo de démonstration: bouton de défilement CSS de Naoy

Tous les signes indiquent que vous bougez

Les jauges de défilement sont devenues très populaires sur les sites riches en contenu. Grâce à des méthodes facilement assimilables, il informe de la distance de l’utilisateur par rapport à l’histoire. Un avantage que cette solution n’est que CSS.

Voir le stylo indicateur de défilement CSS uniquement par Mike (@MadeByMike)

Vous pouvez faire défiler si vous le souhaitez

Ce morceau de code n’est pas nécessairement un effet en soi. Mais cela a un but. Les concepteurs utilisent souvent des images d’arrière-plan plein écran et d’autres éléments qui peuvent rendre le défilement ambigu pour l’utilisateur. Grâce à cela, de petits éléments, comme une icône de défilement animée, informent les utilisateurs que oui, il y aura plus de contenu. Il ne convient pas à toutes les situations, mais il y a des moments où cela a du sens.

Découvrez le stylo d’animation Micro CSS sur le site de défilement Ryan Mulligan

Incroyable réduction des titres

Ces rubriques autocollantes sont devenues le fondement au fil du temps. Pourquoi ils peuvent apporter beaucoup de confort à l’utilisateur. Pouvoir se déplacer vers d’autres zones du site sans avoir à faire défiler vers le haut de la page facilite simplement la vie. Comme d’habitude, cet exemple se réduit à un élément plus compact au fur et à mesure que la page défile.

Voir en-tête de défilement Blake Bowen

Glissez vers la droite

Voici une autre version de l’en-tête de l’autocollant. Cette fois, il est configuré pour le site Web d’une page. La navigation supérieure met automatiquement en surbrillance la section de contenu actuelle et permet aux utilisateurs de basculer rapidement entre eux.

Afficher le stylo de navigation coulissant adhésif d’Ettrics (réactif)

Couleurs volantes

Jetons un coup d’œil à un autre élément qui serait idéal pour les sites d’une page ou les longues pages avec plusieurs sections de contenu. Utilisez CSS et certains jQuery pour changer la couleur d’arrière-plan en faisant défiler vers le bas (et oui, cela fonctionne dans l’autre sens). Vous pouvez également envoyer une requête à un script qui fait la même chose, mais avec des dégradés.

Voir le stylo Changer la couleur d’arrière-plan lors du défilement de la version 2 auteur: JP Nothard

Convertir vertical en horizontal

Vous avez toujours voulu que votre page défile horizontalement plutôt que verticalement? Bien sûr, vous pouvez le faire sans scénario de fantaisie. Mais que faire si vous ne voulez pas de barre de défilement horizontale? Dans ce cas, vous avez besoin de quelque chose comme cet exemple. Utilisez un script appelé jInvertScroll qui convertit votre page en défilement latéral, avec des effets de parallaxe.

Afficher le stylo à défilement latéral avec SitePoint jInvertScroll

Animer pendant le défilement

Aujourd’hui, l’une des tendances les plus importantes est l’animation du contenu qui apparaît dans la fenêtre graphique. Lorsque vous le faites avec bon goût, faites attention à chaque section. Mais aller trop loin et plus comme un numéro de cirque en ligne. Si vous décidez de sauter, considérez ce code. Il prend en charge la bibliothèque AOS (défilement animé).

Voir crayon AOS – animations Snik

Défilement, utilisateur du réseau

Dans le passé, l’idée était d’éviter à tout prix les déplacements. Maintenant, les médias sociaux et les smartphones nous permettent de couvrir de longues sections avec nos pouces (et curseurs). Nous pourrions également le rendre amusant et utile.

C’est ce que les fragments précédents entendent faire. Ils couvrent plusieurs cas d’utilisation et, dans la plupart des cas, évitent l’inconfort. Cela crée une expérience utilisateur solide.

Vous cherchez plus d’idées? Consultez notre collection CodePen pour plus d’extraits de défilement!