4 Beautiful Uses of Infinite Scroll & How to Implement it on your Website

Posted on

Infinite scroll is appearing on an increasing number of websites all the time. Whether used on individual blogs or major websites, this technique continuously refreshes a page of content, allowing users to access more content without the need to click through various pages. It therefore improves the user experience, and because it is also instinctive to use it does not require any instruction.

As more websites take advantage of the technique, it is interesting to see how they all employ it differently. Here are some of the best examples of infinite scroll in action.

1. Pinterest.com

Pinterest-infinite-scroll

The popular social image website uses infinite scroll to great effect. The technique works particularly well with the huge amount of images populating the home page. You can scroll down through the latest images that have been pinned to the page until you find something of interest, making it a great way to explore a huge amount of content.

2. Cutestpaw.com

Cutest-Paw-infinite-scroll

This one is especially for animal lovers. You can search the website for different types of animals, or just visit the homepage, and you will be presented with a seemingly endless number of images of unbelievably cute pets and animals. The result is a website that will easily distract you away from work at any time of the day.

3. Mashable.com

Mashable-infinite-scroll

Mashable is a vast compilation of news, resources and information. To present all of the content in the most convenient and accessible manner possible, the website takes advantage of infinite scroll. Whether you are searching for the latest news stories on digital innovation, technology, entertainment or lifestyle, you will find it incredibly easy to scan through the images and stories here and find what you are looking for.

4. Lookbook.nu

lookbooknu-infinite-scroll

Described as a “truly editorless fashion magazine”, this stylish fashion blog involves sharing and discovering style tips and personal style choices. Members upload their own pics and document their styles over a period of time, and they are all instantly discoverable through the infinite scroll feature.

Implementing Infinite Scroll

Whether using infinite scroll for e-commerce, blogging or social purposes, you will have to implement it using the correct plugins. There are currently two principal ways to go about this: jQuery plugins and the WordPress plugin.

jQuery Plugins

There are numerous jQuery plugins that you can use to implement infinite scroll (two of the most popular being ‘infinite scroll’ and jscroll for example). They all perform the same function, but there is a minimum configuration required to get each plugin to work, and you will find details of this when you download each plugin.

WordPress Plugin

If your site runs on WordPress then there is a dedicated WordPress plugin that you can use to implement infinite scroll. Simply install the plugin to your ‘/wp-content/plugins/’ directory and activate it. You should find that it works immediately for most themes, and you can also customise it, although you will need to know something about CSS selectors.

It is also one of the features that is available in the Jetpack plugin. This is one of WordPress’s own plugins and adds a range of features to WordPress.org sites that used to be exclusively available on WordPress.com sites.

Experiment with Infinite Scroll

Infinite scroll is already widely used, but this relatively new and innovative way to share large amounts of content is certain to pop up on more websites over 2013 and beyond. Experiment with your own website by installing one of the plugins. Whether you are listing images, products to buy, blog posts or anything else, see if you can take advantage of infinite scroll to improve the user experience of your website.

Amy Sawyer is a freelance writer from the UK, she enjoys all things web, geeky and fashionable, ideally at the same time! Follow her on twitter and Google+.