Voyager est l’une des t\u00e2ches les plus \u00e9l\u00e9mentaires que nous demandons aux utilisateurs. A en juger par le nombre de pages et d’applications d\u00e9ploy\u00e9es aujourd’hui, nous en demandons beaucoup.<\/p>\n
L’ajout d’effets bas\u00e9s sur le d\u00e9filement peut \u00eatre un excellent moyen d’am\u00e9liorer votre exp\u00e9rience utilisateur. Cela signifie que tant qu’ils n’interf\u00e8rent pas avec la possibilit\u00e9 de parcourir de longues sections de contenu. Les effets devraient simplifier et ajouter une touche d’\u00e9l\u00e9gance au m\u00e9lange.<\/p>\n
Voici une collection d’effets de d\u00e9filement et d’outils qui raviront les visiteurs et (esp\u00e9rons-le) vous \u00e9loigneront du chemin.<\/p>\n
Les sites Web modernes sont g\u00e9n\u00e9ralement divis\u00e9s en plusieurs sections de contenu, chacune avec des \u00e9l\u00e9ments distincts. Cette pi\u00e8ce pratique ajoute un bouton (disponible dans diff\u00e9rents styles) en bas de l’\u00e9cran qui permet aux utilisateurs de cliquer et de faire d\u00e9filer jusqu’\u00e0 la section suivante. Utilisez l’ID CSS avec jQuery pour faire fonctionner la navigation.<\/p>\n
Voir le stylo de d\u00e9monstration: bouton de d\u00e9filement CSS de Naoy<\/p>\n
Les jauges de d\u00e9filement sont devenues tr\u00e8s populaires sur les sites riches en contenu. Gr\u00e2ce \u00e0 des m\u00e9thodes facilement assimilables, il informe de la distance de l’utilisateur par rapport \u00e0 l’histoire. Un avantage que cette solution n’est que CSS.<\/p>\n
Voir le stylo indicateur de d\u00e9filement CSS uniquement par Mike (@MadeByMike)<\/p>\n
Ce morceau de code n’est pas n\u00e9cessairement un effet en soi. Mais cela a un but. Les concepteurs utilisent souvent des images d’arri\u00e8re-plan plein \u00e9cran et d’autres \u00e9l\u00e9ments qui peuvent rendre le d\u00e9filement ambigu pour l’utilisateur. Gr\u00e2ce \u00e0 cela, de petits \u00e9l\u00e9ments, comme une ic\u00f4ne de d\u00e9filement anim\u00e9e, informent les utilisateurs que oui, il y aura plus de contenu. Il ne convient pas \u00e0 toutes les situations, mais il y a des moments o\u00f9 cela a du sens.<\/p>\n
D\u00e9couvrez le stylo d’animation Micro CSS sur le site de d\u00e9filement Ryan Mulligan<\/p>\n
Ces rubriques autocollantes sont devenues le fondement au fil du temps. Pourquoi ils peuvent apporter beaucoup de confort \u00e0 l’utilisateur. Pouvoir se d\u00e9placer vers d’autres zones du 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 au fur et \u00e0 mesure que la page d\u00e9file.<\/p>\n
Voir en-t\u00eate de d\u00e9filement Blake Bowen<\/p>\n
Voici une autre version de l’en-t\u00eate de l’autocollant. Cette fois, il est configur\u00e9 pour le site Web 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
Afficher le stylo de navigation coulissant adh\u00e9sif d’Ettrics (r\u00e9actif)<\/p>\n
Jetons un coup d’\u0153il \u00e0 un autre \u00e9l\u00e9ment qui serait id\u00e9al 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\u00e8re-plan en faisant d\u00e9filer vers le bas (et oui, cela fonctionne dans l’autre sens). Vous pouvez \u00e9galement envoyer une requ\u00eate \u00e0 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 auteur: JP Nothard<\/p>\n
Vous avez toujours voulu que votre page d\u00e9file horizontalement plut\u00f4t que verticalement? Bien s\u00fbr, vous pouvez le faire sans sc\u00e9nario de fantaisie. Mais que faire si vous ne voulez pas de barre de d\u00e9filement horizontale? Dans ce cas, vous avez besoin de quelque chose comme cet exemple. Utilisez un script appel\u00e9 jInvertScroll qui convertit votre page en d\u00e9filement lat\u00e9ral, avec des effets de parallaxe.<\/p>\n
Afficher le stylo \u00e0 d\u00e9filement lat\u00e9ral avec SitePoint jInvertScroll<\/p>\n
Aujourd’hui, l’une des tendances les plus importantes est l’animation du contenu qui appara\u00eet dans la fen\u00eatre graphique. Lorsque vous le faites avec bon go\u00fbt, faites attention \u00e0 chaque section. Mais aller trop loin et plus comme un num\u00e9ro de cirque en ligne. Si vous d\u00e9cidez de sauter, consid\u00e9rez ce code. Il prend en charge la biblioth\u00e8que AOS (d\u00e9filement anim\u00e9).<\/p>\n
Voir crayon AOS – animations Snik<\/p>\n
Dans le pass\u00e9, l’id\u00e9e \u00e9tait d’\u00e9viter \u00e0 tout prix les d\u00e9placements. Maintenant, les m\u00e9dias sociaux et les smartphones nous permettent de couvrir de longues sections avec nos pouces (et curseurs). Nous pourrions \u00e9galement le rendre amusant et utile.<\/p>\n
C’est ce que les fragments pr\u00e9c\u00e9dents entendent faire. Ils couvrent plusieurs cas d’utilisation et, dans la plupart des cas, \u00e9vitent l’inconfort. Cela cr\u00e9e une exp\u00e9rience utilisateur solide.<\/p>\n
Vous cherchez plus d’id\u00e9es? Consultez notre collection CodePen pour plus d’extraits de d\u00e9filement!<\/p>\n