Coding an Infinitely Scrollable Site

When I redesigned my portfolio, I had 3 goals in mind:

• Update the design to be more content-focused.
• Make it easy to update by using simple HTML5 codes.
• Make it infinitely scrollable, adaptable and mobile-friendly.

Here are some techniques I’ve picked up along the way.

Load images as you scroll

When you have a lot of images on your site, you might not want to load everything at once since it can be bandwidth intensive and the order can be unwanted, i.e. the top images load last.In that scenario, you want to build a script that load only what you see and load more as you scroll. I found a neat script that did exactly that. http://jsfiddle.net/tcloninger/e5qaD/

I hacked it a little by adding a load condition on the image so that it only starts animating when the image is loaded. Alternatively, you can have a pre-loader, which is what most sites use, but the problem with that is that the site loads every single image before running it. Also, that wouldn’t work for infinite content, which is what I’m going for.

Here’s the short piece of code I added inside the scroll function:

$('img').load(function() {
    $(this).addClass('active');
});

Loading Spinner

But now the problem is that when the user reaches the content, as the images load nothing seems to show up, so we need some sort of loading animation to indicate that an image is loading. I found this script and tweaked it so that the loader appears at every article’s scroll point, then hide it when image loads. http://heartcode.robertpataki.com/canvasloader/

if($('#canvasloader-container').length == 0) {
    $(this).append(CANVASLOADER);
    loader();
}

Transitions

Transitions are a beautiful thing in CSS3. It takes minimal effort to pull delightful results. So I started adding .transition(1s) everywhere using LESS Elements http://lesselements.com for hover and normal states so that it has this simple, yet soothing effect even when the user mouse out. Simple codes. Works across browsers.

.button {
    background-color: blue;
    .transition(1s); 
}
.button:hover { 
    background-color: white;
    .transition(1s); 
}