Repost from Infinite Scrolling using Custom Code:
– So it took me some time, but I’ve finally managed to make a working demo, of an Webflow infinite scrolling website. I’ve been a little bussy lately, my exams are on and so… Now, it’s not all perfect as I metion also as well on the demo site, but the basic functionality is there! It works using the Infinite Scroll plugin (www.infinite-scroll.com).
How to do it!:
Making the basic page
On the first page, where you have the container for the content that you want to be loaded (using Infinite Scroll), you add a “next link” at the bottom of the page, linking to a new page.
This page that your link, is linking to, must be a new page on your site, containing only the next section of content that you wish to be loaded into your first page. On this page, there is then another “next link”, linking to the next page, with the next section of content, that you wish to be loaded onto your page, using infinite scroll. On that page there will then be another “next link” linking to the next section of content tha you wish to be loaded in to your first page, using infintie scroll. And so on…
So you basicly just add seperate pages, containing only the next section/piece of content that you want loaded onto your site (the first page). And then links connecting these different pages. Including a link on the first page, of course.
The plugin will then, so to speak, take care of the rest, and load the content of the pages, into your first page, one after one, and that, with a loading-spinner appearing before every load (this can of course be modified in the settings of the plugin). So you thereby get the Infinte Scroll effect that you want.
It might just be 'little easier to understand, seeing the demo in design mode, so you can see the construction and the pages:
https://preview.webflow.com/preview/grid-style-infinite-scrolling-example?preview=fdd039e7139a456a6ee7f0c9f5056daf
(And please forgive me about it, but the logic of classes on this site aren’t all neat. Could be a little better… never mind )
Adding the plugin
In the Custom Code tab, under settings (Adding custom code to your webflow sites header, see how to do it here) add this to your header-code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/infinite-scroll/infinite-scroll/master/jquery.infinitescroll.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$('.scroll').infinitescroll({
navSelector : '.next', // selector for the paged navigation
nextSelector : '.next a', // selector for the NEXT link (to page 2)
itemSelector : '.product-row', // selector for all items you'll retrieve
animate : true,
loadingText : "",
maxPage:undefined,
loading: {
finishedMsg: 'No more content to load!',
img: 'http://i.imgur.com/4zOIFXZ.gif',
msgText: " "
}
});
});
</script>
– On the demo, and here on this github page: GitHub - metafizzy/infinite-scroll: 📜 Automatically add next page and on www.infinite-scroll.com there are more documentation on how to use the plugin. Some tutorials can also be found as well, online.
Oh, and here is the actual demo! :
Go rockets, and rabbits!
http://grid-style-infinite-scrolling-example.webflow.io
There might possibly, be some, smarter methods, to do this. But this is what I’ve managed to do. And it’s a start.
- Would love to see some of the code-gurus here on the forum making an better and improved version
Best to you all! Love n’ hugs from Denmark!
Jonatan.
[/quote]