Rolagem infinita incorpora um dos atributos ideais de qualquer bom design: as pessoas podem usá-lo sem pensar nisso.

Depois de encontrá-lo algumas vezes, você se esquece disso. Eu diria que a maioria de nós espera que certos aplicativos, ou talvez certos tipos de aplicativos, simplesmente carreguem mais conteúdo quando chegamos ao final de uma página. E porque não? É eficaz e muitas vezes conveniente.

Em alguns contextos, clicar constantemente para ver as páginas sucessivas pode rapidamente se tornar um empecilho. Nesses casos, a paginação não é uma ferramenta de navegação útil, mas uma interrupção na experiência de navegação. Rolagem infinita - enquanto vem com problemas próprios - vai um longo caminho no sentido de criar experiências mais suaves.

Isso é especialmente verdadeiro quando você precisa procurar grandes quantidades de informações divididas em pequenas partes. Exemplos comuns incluem: Twitter, sites de notícias, tumblogs, galerias de imagens e assim por diante.

Claro, não é para todos ou para todos os projetos. Para aqueles de vocês que decidiram adicionar um pouco de amor infinito aos seus sites, há várias maneiras eficazes de aplicá-lo facilmente ao seu site:

Rolagem infinita para sites estáticos

Na maioria dos casos, você provavelmente estará adicionando esse tipo de comportamento a sites / aplicativos que tenham conteúdo dinâmico armazenado em um banco de dados. Decidi incluir um link que gira em torno de sites estáticos por dois motivos:

  1. Você pode precisar saber como fazer isso especificamente. Nunca se sabe.
  2. Depois que você souber como adicionar rolagem infinita a um site estático, provavelmente será capaz de adaptar as mesmas técnicas a qualquer tema do CMS ou do CMS com o qual esteja familiarizado.

Este tutorial de Hongkiat.com apresenta dois plugins jQuery diferentes para sua consideração, incluindo Rolagem infinita por Paul Irish.

Rolagem infinita para sites do WordPress

Não tenho certeza se existe algum recurso ou funcionalidade sob o sol que não tenha sido disponibilizado para o WordPress na forma de um plugin. A rolagem infinita, obviamente, não é exceção.

Primeiro, nós temos mais uma vez Rolagem infinita . Sim. Este plugin jQuery vem com uma implementação oficial do WordPress também feita por Paul Irish. O link está bem ali no site principal do plugin, visível e visível, bem no topo. Também incluído na página é um tutorial para ajudá-lo a configurar o plugin para trabalhar com o seu tema específico do WordPress, por isso não deixe de conferir a documentação.

Em seguida, temos a prova de que a Automattic, a empresa por trás do WordPress, nos ama e quer que sejamos felizes. Eles criaram um Módulo Jetpack que também adicionará rolagem infinita ao seu tema. Novamente, você pode precisar personalizar o plug-in para trabalhar com seu tema específico.

Mas e se você quiser mergulhar fundo no código e aprender como fazê-lo do zero? WPTuts + você tem coberto com isso em vez tutorial detalhado . Recomendado para pessoas com um entendimento intermediário de código front-end, o tutorial vem com tudo que você precisa para codificar infinitamente a rolagem em seu tema. Alguns até argumentam que esse é o “caminho certo” para fazê-lo.

Rolagem infinita para temas do Tumblr

Muitos designers e alguns desenvolvedores usam o tumblr para compartilhar seus pensamentos e / ou trabalhos. És um deles? Você quer que o seu tema Tumblr rola infinitamente, assim como o seu painel? Não procure mais do que O tutorial de Cody Sherman . Desde que foi escrito para o usuário médio e não-codificador do Tumblr, este tutorial é muito simples. Isso tem um custo, embora possa não funcionar com todos os temas do Tumblr.

Misturando rolagem infinita com outros plugins

O jQuery Masonry é o plugin clássico para criar layouts de estilo de alvenaria na web. (Pessoalmente, eu acho que o nome dá isso.) Desde layouts de alvenaria são todos sobre exibir os pequenos pedaços de informação que muitas vezes são bem servidos por rolagem infinita, não é surpresa que muitos sites combinam os dois comportamentos. (Vejo: Pinterest Para sites estáticos, você deve verificar a documentação oficial Aqui.

O isótopo é semelhante em função da Maçonaria, na medida em que foi criado para ajudar as pessoas a implementar os layouts de alvenaria. Eu incluo aqui porque, na minha opinião, é realmente melhor. Isto é principalmente porque, através de tentativa e erro, eu era capaz de fazer um layout de alvenaria verdadeiramente responsivo com este plugin jQuery. Eu tive menos sorte com os outros. Suas experiências podem variar. Confira a documentação Aqui.

Imagem em destaque / miniatura, imagem de rolagem infinita via Shutterstock.