Continuous, looping, scrollable content in all directions

Question

I've seen a very nice effect I'd like to try and reproduce for my own project but I'm struggling to see the best way to achieve it both in terms of performance and to operate absolutely seamlessly.

The effect is continous/looping content that can be scrolled and panned in any direction endlessly and appears to be completely seamless. It can be seen on Android's award-winning Leap:Second website here: http://leapsecond2015.com/.

I can think of a couple of ways to achieve this; one is by cloning the content body and repeat it once in all directions on page load and, when scrolled/panned, add more cloned content in the direction the user is moving in.

The thing I don't understand with this method is the performance, as I've yet to use .clone() in any of my projects. Let's say the user scrolled down continuously for 5-minutes, just for fun, and cloned 10,000 times - what are the cons of cloning so much content?

Another method I saw was to reset the scrollbar back to the beginning when the user reached the end of the content. A little bit like this demo:

var bgHeight = 1600; // pixel height of background image

$(document).ready(function() {   
    $('body').height( bgHeight + $(window).height() );
    $(window).scroll(function() {
        if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
            $(window).scrollTop(1);
        }
        else if ( $(window).scrollTop() == 0 ) {
            $(window).scrollTop($('body').height() - $(window).height() -1);
        }    
    });
});
$(window).r

body {
    height: 1600px;
    background-image: url("");
    background-p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Again, I struggle to see how this would work seamlessly when I added horizontal scrolling functionality to it as well but looks great vertically.

I'd like to know which one of these methods would perform better or, if none of them are suitable, please advice on how Android have achieved it on their Leap:Second website or suggest a new method.

I've had a decent Google on the subject but get flooded with 'inifinte scrolling' articles instead and have a hit a brick wall. I had a look at element inspection on Firefox and I think I came to the conclusion that they weren't cloning and appending but maybe I was wrong.

Answer 1

It looks like http://leapsecond2015.com/ uses http://www.pixijs.com/ which handles the performance of loading an "infinite" amount of images/items