Voyager est l'une des tâches les plus élémentaires que nous demandons aux utilisateurs. Et à en juger par la quantité de défilement sur les sites Web et les applications de nos jours, nous en demandons beaucoup.
L'ajout d'effets basés sur le défilement peut être un excellent moyen d'améliorer l'expérience utilisateur. Autrement dit, tant qu'ils n'interfèrent pas avec la capacité de naviguer sur de longues portions de contenu. Si quoi que ce soit, les effets devraient faciliter les choses et ajouter un peu de flair au mélange.
Voici une collection d'effets de défilement et d'utilitaires qui épateront vos visiteurs et (espérons-le) resteront à l'écart.
Section par section
Les pages Web modernes sont souvent divisées en plusieurs sections de contenu, chacune avec ses propres éléments distincts. Cet extrait pratique ajoute un bouton (disponible dans une variété de styles) au bas de l'écran qui permet aux utilisateurs de cliquer et de faire défiler vers le bas jusqu'à la section suivante. Utilisez CSS ID avec jQuery pour faire fonctionner la navigation.
Voir le stylo
démo: bouton de défilement CSS par Naoya
Toutes les indications indiquent que vous bougez
Les jauges de défilement sont devenues très populaires sur les sites Web riches en contenu. Ils communiquent à quel point un utilisateur est éloigné d'une histoire dans une méthode facile à digérer. Bonus que cette solution est juste CSS.
Voir le stylo
Indicateur de défilement CSS uniquement par Mike (@MadeByMike)
Vous pouvez faire défiler si vous le souhaitez
Eh bien, cet extrait n'est pas nécessairement un effet en soi. Mais cela sert un but. Très souvent, les concepteurs utilisent des images d'arrière-plan en plein écran et d'autres éléments qui peuvent rendre le défilement ambigu pour l'utilisateur. Avec cela, de petits éléments comme cette icône de défilement animée indiquent aux utilisateurs que oui, il y a plus de contenu à venir. Il ne convient pas à toutes les situations, mais il y a des moments où cela a du sens.
Voir le stylo
Micro animation du défilement du site CSS par Ryan Mulligan
L'incroyable en-tĂŞte de contraction
Des titres adhésifs comme celui-ci sont devenus un incontournable au fil des ans. Parce que? Ils peuvent ajouter une tonne de confort d'utilisation. La possibilité de naviguer vers d'autres zones d'un 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 lorsque vous faites défiler la page.
Voir le stylo
En-tête de défilement par Blake Bowen
Faites glisser vers la droite
Voici une autre version de l'en-tête de l'autocollant. Cette fois, il est configuré pour un site 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.
Voir le stylo
Sticky Slider Navigation (Responsive) par Ettrics
Couleurs volantes
Jetons un coup d'œil à un autre extrait qui serait idéal pour les sites d'une page ou de longue page avec plusieurs sections de contenu. Utilisez CSS et un petit jQuery pour changer la couleur d'arrière-plan lorsque vous faites défiler vers le bas (et oui, cela fonctionne aussi dans l'autre sens). Vous pouvez également souhaiter interroger 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 par JP Nothard
Convertir vertical en horizontal
Avez-vous déjà voulu que votre site Web défile horizontalement plutôt que verticalement? Vous pouvez le faire sans aucun script sophistiqué, bien sûr. Mais que faire si vous ne voulez pas de barre de défilement horizontale? Dans ce cas, vous auriez besoin de quelque chose comme cet exemple. Il utilise un script appelé jInvertScroll, qui transforme votre site en un défilement latéral, avec des effets de parallaxe.
Voir le stylo
Défilement latéral depuis jInvertScroll par SitePoint
Animer sur défilement
L'une des tendances les plus importantes de nos jours est d'animer du contenu lorsqu'il entre dans la fenêtre graphique. Une fois fait avec bon goût, vous pouvez attirer l'attention sur chaque section. Mais aller trop loin et plus comme un numéro de cirque en ligne. Si vous décidez de franchir le pas, considérez cet extrait de code. Il est alimenté par la bibliothèque AOS (Animated Scrolling).
Voir le stylo
AOS – animations Snik
DĂ©filement, utilisateur Web
Dans le passé, la pensée dominante était d'éviter à tout prix les déplacements. Maintenant, les médias sociaux et les smartphones nous ont permis de couvrir de longues périodes avec nos pouces (et curseurs). Nous pourrions donc aussi le rendre amusant et utile.
C'est ce que les fragments précédents entendent faire. Ils couvrent une variété de cas d'utilisation et, pour la plupart, évitent d'être ennuyeux. C'est à cela que consiste la construction d'une UX solide.
Vous cherchez plus d'idées? Jetez un œil à notre collection CodePen pour des extraits de défilement supplémentaires!
