Le défilement infini incarne l'un des attributs idéaux de tout bon design: les gens peuvent l'utiliser sans y penser.

Une fois que vous l'avez rencontré plusieurs fois, vous l'oubliez. Je dirais que la plupart d’entre nous s’attendent à ce que certaines applications, ou peut-être certains types d’applications, chargent simplement plus de contenu lorsque nous atteignons le bas d’une page. Et pourquoi pas? C'est efficace et souvent pratique.

Dans certains contextes, cliquer constamment pour voir les pages successives peut rapidement devenir un frein. Dans ces cas, la pagination n'est pas un outil de navigation utile, mais une interruption de l'expérience de navigation. Le défilement infini, même s'il présente des problèmes, contribue grandement à créer des expériences plus fluides.

Cela est particulièrement vrai lorsque vous devez parcourir de grandes quantités d'informations divisées en petits morceaux. Les exemples courants incluent: Twitter, les sites d'actualités, les blogues, les galeries d'images, etc.

Bien sûr, ce n'est pas pour tout le monde ou pour tous les projets. Pour ceux d'entre vous qui ont décidé d'ajouter un amour infini à vos sites, il existe plusieurs moyens efficaces de l'appliquer facilement à votre site:

Défilement infini pour les sites statiques

Dans la plupart des cas, vous ajouterez probablement ce type de comportement à des sites / applications dont le contenu dynamique est stocké dans une base de données. J'ai décidé d'inclure un lien qui tourne autour de sites statiques pour deux raisons:

  1. Vous devrez peut-être savoir comment faire cela spécifiquement. On ne sait jamais.
  2. Une fois que vous savez comment ajouter un défilement infini à un site statique, vous pourrez probablement adapter les mêmes techniques à n'importe quel thème de CMS ou de CMS que vous connaissez déjà.

Ce tutoriel de Hongkiat.com propose deux plugins jQuery différents pour votre considération, y compris DEFILEMENT infini par Paul Irish.

Défilement infini pour les sites WordPress

Je ne suis pas sûr qu'il existe une fonctionnalité ou une fonctionnalité sous le soleil qui ne soit pas disponible pour WordPress sous la forme d'un plugin. Le défilement infini ne fait évidemment pas exception.

Tout d'abord, nous avons encore une fois DEFILEMENT infini . Ouaip. Ce plugin jQuery est livré avec une implémentation officielle de WordPress également réalisée par Paul Irish. Le lien est juste sur le site principal du plugin, visible et visible, tout en haut. La page contient également un didacticiel pour vous aider à configurer le plug-in pour qu'il fonctionne avec votre thème WordPress spécifique. Assurez-vous donc de consulter la documentation.

Ensuite, nous avons la preuve qu'Automattic, la société derrière WordPress, nous aime et veut que nous soyons heureux. Ils ont créé un Module Jetpack cela ajoutera également un défilement infini à votre thème. Encore une fois, vous devrez peut-être personnaliser le plug-in pour travailler avec votre thème spécifique.

Mais que faire si vous voulez plonger dans le code et apprendre à le faire à partir de zéro? WPTuts + vous a couvert de cela plutôt tutoriel approfondi . Recommandé pour les personnes ayant une compréhension intermédiaire du code frontal, le didacticiel est fourni avec tout ce dont vous avez besoin pour coder en dur le défilement infini dans votre thème. Certains diront même que c'est la "bonne façon" de le faire.

Défilement infini pour les thèmes Tumblr

Beaucoup de designers et de développeurs utilisent tumblr pour partager leurs réflexions et / ou leurs travaux. Êtes-vous un d'entre eux? Voulez-vous que votre thème Tumblr défile à l'infini, tout comme votre tableau de bord? Ne cherchez pas plus loin que Le tutoriel de Cody Sherman . Comme il a été écrit pour l'utilisateur moyen non-codant de Tumblr, ce tutoriel est très simple. Cela a un coût, cependant, car il peut ne pas fonctionner avec tous les thèmes Tumblr.

Mélanger le défilement infini avec d'autres plugins

jQuery Masonry est le plugin classique pour créer des mises en page de style maçonnerie sur le Web. (Personnellement, je pense que le nom l’abandonne.) Étant donné que la mise en page de maçonnerie consiste à afficher les petites informations souvent bien servies par le défilement infini, il n’est pas surprenant que de nombreux sites Web combinent les deux comportements. (Voir: Pinterest ) Pour les sites statiques, vous devriez consulter la documentation officielle ici.

La fonction d'isotope est similaire à celle de maçonnerie, en ce sens qu'elle a été créée pour aider les gens à mettre en œuvre des dispositions de maçonnerie. Je l'inclus ici parce que, à mon avis, c'est vraiment mieux. Cela est principalement dû au fait que, grâce aux essais et erreurs, j'ai pu créer une mise en page de maçonnerie vraiment réactive avec ce plug-in jQuery. J'ai eu moins de chance avec les autres. Vos expériences peuvent varier. Consultez la documentation ici.

Image / vignette en vedette, image de défilement infinie via Shutterstock.