El desplazamiento infinito representa uno de los atributos ideales de cualquier buen diseño: las personas pueden usarlo sin pensarlo.

Una vez que lo has encontrado un par de veces, te olvidas de él. Diría que la mayoría de nosotros espera que ciertas aplicaciones, o tal vez ciertos tipos de aplicaciones, simplemente carguen más contenido cuando llegamos al final de una página. ¿Y por qué no? Es efectivo, y a menudo conveniente.

En algunos contextos, hacer clic constantemente para ver páginas sucesivas puede convertirse rápidamente en un arrastre. En estos casos, la paginación no es una herramienta de navegación útil, sino una interrupción de la experiencia de navegación. El desplazamiento infinito, aunque tiene sus propios problemas, contribuye en gran medida a crear experiencias más fluidas.

Esto es especialmente cierto cuando tiene que buscar grandes cantidades de información que se divide en pequeños fragmentos. Ejemplos comunes incluyen: Twitter, sitios de noticias, tumblogs, galerías de imágenes, etc.

Por supuesto, no es para todos, ni para todos los proyectos. Para aquellos de ustedes que han decidido agregar un amor infinito a sus sitios, hay varias maneras efectivas de aplicarlo fácilmente a su sitio:

Desplazamiento infinito para sitios estáticos

En la mayoría de los casos, probablemente agregará este tipo de comportamiento a sitios / aplicaciones que tienen contenido dinámico almacenado en una base de datos. He decidido incluir un enlace que gira en torno a sitios estáticos por dos motivos:

  1. Es posible que necesite saber cómo hacer esto específicamente. Nunca sabes.
  2. Una vez que sepa cómo agregar el desplazamiento infinito a un sitio estático, probablemente podrá adaptar las mismas técnicas a cualquier tema de CMS o CMS con el que esté familiarizado.

Este tutorial de Hongkiat.com presenta dos plugins jQuery diferentes para su consideración, que incluyen Scroll infinito por Paul Irish.

Desplazamiento infinito para sitios de WordPress

No estoy seguro de que exista algún tipo de función o funcionalidad bajo el sol que no esté disponible para WordPress en forma de un complemento. El desplazamiento infinito es, por supuesto, no una excepción.

Primero, una vez más tenemos Scroll infinito . Sip. Este plugin jQuery viene con una implementación oficial de WordPress también hecha por Paul Irish. El enlace está ahí en el sitio principal del complemento, prominente y visible, en la parte superior. También se incluye en la página un tutorial para ayudarlo a configurar el complemento para que funcione con su tema específico de WordPress, así que asegúrese de revisar la documentación.

A continuación, tenemos pruebas de que Automattic, la compañía detrás de WordPress, nos ama y quiere que seamos felices. Crearon un Módulo de Jetpack eso también agregará desplazamiento infinito a su tema. De nuevo, puede necesitar personalizar el complemento para que funcione con su tema específico.

Pero, ¿y si quieres profundizar en el código y aprender a hacerlo desde cero? WPTuts + tiene cubierto con esto en vez tutorial en profundidad . Recomendado para personas con una comprensión intermedia del código de la interfaz de usuario, el tutorial incluye todo lo que necesita para codificar el desplazamiento infinito en su tema. Algunos incluso argumentarían que esta es la "manera correcta" de hacerlo.

Desplazamiento infinito para los temas de Tumblr

Muchos diseñadores y algunos desarrolladores utilizan Tumblr para compartir sus pensamientos y / o trabajo. ¿Eres uno de ellos? ¿Desea que su tema de Tumblr se desplace infinitamente, al igual que su tablero? No busques más El tutorial de Cody Sherman . Dado que fue escrito para el usuario promedio de Tumblr no codificado, este tutorial es muy simple. Esto tiene un costo, sin embargo, ya que puede no funcionar con cada tema de Tumblr.

Mezcla de desplazamiento infinito con otros complementos

jQuery Masonry es el plugin clásico para crear diseños de mampostería en la web. (Personalmente, creo que el nombre lo delata). Dado que los diseños de mampostería tienen que ver con mostrar los pequeños bits de información que a menudo son bien servidos por el desplazamiento infinito, no sorprende que muchos sitios web combinen los dos comportamientos. (Ver: Pinterest ) Para sitios estáticos, debe consultar la documentación oficial aquí.

Isotopo es similar en función a la Albañilería, ya que fue creado para ayudar a las personas a implementar diseños de mampostería. Lo incluyo aquí porque, en mi opinión, en realidad es mejor. Esto se debe principalmente a que, a través de prueba y error, pude hacer un diseño de mampostería verdaderamente receptivo con este plugin jQuery. He tenido menos suerte con otros. Tus experiencias pueden variar Mira la documentación aquí.

Imagen / miniatura destacada, imagen de desplazamiento infinito a través de Shutterstock.