Design Superstars

10 Cool Infinite Scrolling Effects That Can Enhance Your Website’s Navigation

July 27, 2012 Development 4 Comments

26 Flares

26 Flares


×

The infinite scrolling effect is becoming very popular nowadays because it offers a minimalist experience by removing unnecessary buttons or menus. Infinite scrolling works by keeping your users on a single page while offering them new content when they reach the bottom of that page.  The only problem of this scrolling effect comes when you scroll through a ton of content and need to go back to something you past. Finding it could be tricky without some way to mentally bookmark where you saw it. Infinite scrolling works fantastic for scrolling “through” content, but falls flat when you need to go back to something. So, if this problem doesn’t bother you, in this collection of jquery plugins you have 10 cool solution of implementing the infinite scrolling effect.

 

Infinite Scroll – Example 1

This demo uses the jQuery Masonry plugin together with the Infinite Scroll plugin. The Masonry plugin really is good for obtaining fluid layouts definately recommend it for that. The infinite scroll plugin by Paul Irish is good at loading pages which already exist such as page.html, page2.html, page3.html but it can’t handle dynamic generated content such as hitting the same page.php file with appended parameters page.php?data=xxx. Just bear that in mind if you go with this option.

Demo   Source

 

Infinite Scroll – Example 2

Basic infinite scrolling script which can load data in using AJAX and displays a nice little loading image at the bottom (twitter style). The demo never reaches the end of content but if you included either a) logic in your backend script to return nothing when content finishes or; b) a loop for loading to reach the end, then you could achieve this quite easily.

Demo   Source

 

Infinite Scroll – Example 3

This demo loads in images on infinite scroll and never reaches the end. It uses the jquery.endless-scroll plugin which can be customised to trigger load for x number of pixels from the bottom of the screen. The demo clones the same images and inserts them at the end of the list and so on. Obviously the script can be customised to load more images from different sources quite easily.

Demo   Source

 

Infinite Scroll – Example 4

This demo uses some JavaScript to detect the scrolling and trigger a function which shows the loading image and loads in more content using AJAX.

Demo   Source

 

jQuery ScrollPagination

Query ScrollPagination plugin has been developed by Anderson Ferminiano for studying purposes, you may use it for free in any project you want, only preserve the credits.

Demo   Source

 

Load Content While Scrolling With jQuery

Demo   Source

This Ajax auto content loading can very be handy in almost every project. When we are scrolling down a webpage, the code recognizes that you are at the bottom and auto-loads new content. It helps increasing the initial load speeds of pages faster and users will have to load only the content they see.

 

Screw – A jQuery Plugin

Screw (scroll + view) is a jQuery plugin which loads HTML as a user scrolls the webpage. Screw will help you save bandwidth by only loading content as it is scrolled into view. Screw can also be used to create continuously scrolling, bottomless pages where content is appended to the bottom as the user scrolls.

Demo   Source

 

Autobrowse jQuery Plugin

This plugin adds automatic AJAX loading of page content when the user scrolls the page, with built-in browser cache.Simply use autobrowse(options) on a container that you want to fill with content.

Demo   Source

 

Twitter like scrolling

Infinite Ajax Scroll is a plugin that turns you existing pagination into an infinite scrolling one, with ease.

Demo   Source

 

Twitter-style triggered infinite scroll


This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.

Demo   Source


 


About the Author -

Bogdan is the founder of Design Superstars. He is very passionate about design and web development and he's constantly searching for the most interesting things to write about on this site.

  • http://jquery4u.com/ jQuery4u

    Nice collection, thanks Bogdan.

  • Gumby

    Just saw this exact post with another author claiming to have created it. Thanks for the resource regardless of it’s origins.

    • designsuperstars

      Hi Gumby, could you please send me more details about that claim?

  • Nihilist

    i use infinite scrolling on redditt. makes it much better…..

26 Flares Facebook 2 Twitter 20 Google+ 2 StumbleUpon 0 26 Flares ×