Voyager est l'une des t\u00e2ches les plus \u00e9l\u00e9mentaires que nous demandons aux utilisateurs. Et \u00e0 en juger par la quantit\u00e9 de d\u00e9filement sur les sites Web et les applications de nos jours, nous en demandons beaucoup.<\/p>\n
L'ajout d'effets bas\u00e9s sur le d\u00e9filement peut \u00eatre un excellent moyen d'am\u00e9liorer l'exp\u00e9rience utilisateur. Autrement dit, tant qu'ils n'interf\u00e8rent pas avec la capacit\u00e9 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\u00e9lange.<\/p>\n
Voici une collection d'effets de d\u00e9filement et d'utilitaires qui \u00e9pateront vos visiteurs et (esp\u00e9rons-le) resteront \u00e0 l'\u00e9cart.<\/p>\n
Les pages Web modernes sont souvent divis\u00e9es en plusieurs sections de contenu, chacune avec ses propres \u00e9l\u00e9ments distincts. Cet extrait pratique ajoute un bouton (disponible dans une vari\u00e9t\u00e9 de styles) au bas de l'\u00e9cran qui permet aux utilisateurs de cliquer et de faire d\u00e9filer vers le bas jusqu'\u00e0 la section suivante. Utilisez CSS ID avec jQuery pour faire fonctionner la navigation.<\/p>\n
Voir le stylo
d\u00e9mo: bouton de d\u00e9filement CSS par Naoya<\/p>\n
Les jauges de d\u00e9filement sont devenues tr\u00e8s populaires sur les sites Web riches en contenu. Ils communiquent \u00e0 quel point un utilisateur est \u00e9loign\u00e9 d'une histoire dans une m\u00e9thode facile \u00e0 dig\u00e9rer. Bonus que cette solution est juste CSS.<\/p>\n
Voir le stylo
Indicateur de d\u00e9filement CSS uniquement par Mike (@MadeByMike)<\/p>\n
Eh bien, cet extrait n'est pas n\u00e9cessairement un effet en soi. Mais cela sert un but. Tr\u00e8s souvent, les concepteurs utilisent des images d'arri\u00e8re-plan en plein \u00e9cran et d'autres \u00e9l\u00e9ments qui peuvent rendre le d\u00e9filement ambigu pour l'utilisateur. Avec cela, de petits \u00e9l\u00e9ments comme cette ic\u00f4ne de d\u00e9filement anim\u00e9e indiquent aux utilisateurs que oui, il y a plus de contenu \u00e0 venir. Il ne convient pas \u00e0 toutes les situations, mais il y a des moments o\u00f9 cela a du sens.<\/p>\n
Voir le stylo
Micro animation du d\u00e9filement du site CSS par Ryan Mulligan<\/p>\n
Des titres adh\u00e9sifs comme celui-ci sont devenus un incontournable au fil des ans. Parce que? Ils peuvent ajouter une tonne de confort d'utilisation. La possibilit\u00e9 de naviguer vers d'autres zones d'un site sans avoir \u00e0 faire d\u00e9filer vers le haut de la page facilite simplement la vie. Comme d'habitude, cet exemple se r\u00e9duit \u00e0 un \u00e9l\u00e9ment plus compact lorsque vous faites d\u00e9filer la page.<\/p>\n
Voir le stylo
En-t\u00eate de d\u00e9filement par Blake Bowen<\/p>\n
Voici une autre version de l'en-t\u00eate de l'autocollant. Cette fois, il est configur\u00e9 pour un site d'une page. La navigation sup\u00e9rieure met automatiquement en surbrillance la section de contenu actuelle et permet aux utilisateurs de basculer rapidement entre eux.<\/p>\n
Voir le stylo
Sticky Slider Navigation (Responsive) par Ettrics<\/p>\n
Jetons un coup d'\u0153il \u00e0 un autre extrait qui serait id\u00e9al 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\u00e8re-plan lorsque vous faites d\u00e9filer vers le bas (et oui, cela fonctionne aussi dans l'autre sens). Vous pouvez \u00e9galement souhaiter interroger un script qui fait la m\u00eame chose, mais avec des d\u00e9grad\u00e9s.<\/p>\n
Voir le stylo
Changer la couleur d'arri\u00e8re-plan lors du d\u00e9filement de la version 2 par JP Nothard<\/p>\n
Avez-vous d\u00e9j\u00e0 voulu que votre site Web d\u00e9file horizontalement plut\u00f4t que verticalement? Vous pouvez le faire sans aucun script sophistiqu\u00e9, bien s\u00fbr. Mais que faire si vous ne voulez pas de barre de d\u00e9filement horizontale? Dans ce cas, vous auriez besoin de quelque chose comme cet exemple. Il utilise un script appel\u00e9 jInvertScroll, qui transforme votre site en un d\u00e9filement lat\u00e9ral, avec des effets de parallaxe.<\/p>\n
Voir le stylo
D\u00e9filement lat\u00e9ral depuis jInvertScroll par SitePoint<\/p>\n
L'une des tendances les plus importantes de nos jours est d'animer du contenu lorsqu'il entre dans la fen\u00eatre graphique. Une fois fait avec bon go\u00fbt, vous pouvez attirer l'attention sur chaque section. Mais aller trop loin et plus comme un num\u00e9ro de cirque en ligne. Si vous d\u00e9cidez de franchir le pas, consid\u00e9rez cet extrait de code. Il est aliment\u00e9 par la biblioth\u00e8que AOS (Animated Scrolling).<\/p>\n
Voir le stylo
AOS – animations Snik<\/p>\n
Dans le pass\u00e9, la pens\u00e9e dominante \u00e9tait d'\u00e9viter \u00e0 tout prix les d\u00e9placements. Maintenant, les m\u00e9dias sociaux et les smartphones nous ont permis de couvrir de longues p\u00e9riodes avec nos pouces (et curseurs). Nous pourrions donc aussi le rendre amusant et utile.<\/p>\n
C'est ce que les fragments pr\u00e9c\u00e9dents entendent faire. Ils couvrent une vari\u00e9t\u00e9 de cas d'utilisation et, pour la plupart, \u00e9vitent d'\u00eatre ennuyeux. C'est \u00e0 cela que consiste la construction d'une UX solide.<\/p>\n
Vous cherchez plus d'id\u00e9es? Jetez un \u0153il \u00e0 notre collection CodePen pour des extraits de d\u00e9filement suppl\u00e9mentaires!<\/p>\n