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.
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.
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.
Infinite Scroll – Example 4
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.
Load Content While Scrolling With jQuery
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.
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.
Twitter like scrolling
Infinite Ajax Scroll is a plugin that turns you existing pagination into an infinite scrolling one, with ease.
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.
About the Author - Bogdan
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.
- 30 Gorgeous Examples of Using The Flat Design Concept In Creating Websites
- 50 Amazing Photoshop Tutorials Which Will Make You A Graphic Guru
- 10 Cool Infinite Scrolling Effects That Can Enhance Your Website’s Navigation
- Photoshop Resources
- 50 Gorgeous iPhone 5 Wallpapers
- Give A Glamourous Spark To Your Vintage Design With These Superb Retro Fonts
- Websites That Rock! 30 Extremely Interesting Examples Based On The Power of CSS3
- 23 Fabulous Photos With The Old New York City
- 20 Hilarious Computer Interfaces Used in Various Movies
- The Ten Principles For Good Design