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

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

Some cool related posts:

1. 25 Neat CSS3/Javascript Plugins and Coding Techniques That Will Boost Your Productivity
2. Cool Package Design for a Cool Movie – “The Girl With The Dragon Tattoo” Soundtrack Box
3. 20 Gorgeous Mobile Optimized Websites
4. 20 Amazing Examples of Websites Based on CSS3