Continuous, cyclic, scrollable content in all directions

Question

I saw a very good effect that I would like to try to reproduce for my own project, but I try my best to find the best way to achieve it both in terms of performance and without problems.

The effect is a continuous / cyclic content that can be scrolled and panned in any direction infinitely and appears to be completely seamless. This can be seen on the award-winning Android Leap: Second website here: http://leapsecond2015.com/ .

I can come up with a couple of ways to achieve this; one of them clones the body of the content and repeats it once in all directions when loading the page, and when scrolling / tinting adds the cloned content in the direction in which the user is moving.

What I do not understand with this method is a performance that I have not yet used. clone() in any of my projects. Let's say a user scrolls continuously for 5 minutes, just for fun, and clones 10,000 times - what are the disadvantages of cloning a lot of content?

Another method I've seen is to reset the scroll bar back to the beginning when the user has reached the end of the content. I like this demo a bit:

 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'm struggling to figure out how this will work without problems when I add a horizontal scroll function to it, but it looks great vertically.

I would like to know which of these methods will work better or, if none of them works, consult how Android achieved this on its Leap: Second website or suggest a new method.

I had a decent Google on the subject, but I flooded the "inifinte scrolling" articles and hit a brick wall. I looked at checking elements in Firefox, and I think I came to the conclusion that they do not clone or add, but maybe I was wrong.

Answer 1

To get started, you can create an infinitely scrollable background with very little CPU overhead, using a frequently repeated CSS background and a very small amount of javascript:

 window.scroll(1800,1800); function resetWindow() { if (window.pageXOffset < 900) { window.scrollBy(900,0); } if (window.pageXOffset > 2700) { window.scrollBy(-900,0); } if (window.pageYOffset < 900) { window.scrollBy(0,900); } if (window.pageYOffset > 2700) { window.scrollBy(0,-900); } } window.addEventListener('scroll',resetWindow,false); 

 body { width: 3600px; height: 3600px; background-image: url('http://1-background.com/images/stars-1/star-space-tile.jpg'); background-size: 300px 300px; background-repeat: repeat; } 

As you can see, the window does not scroll endlessly. Instead, the window (only 3600px x 3600px) continues to adjust its own position, so it only looks as if it scrolls endlessly.

Adding content is a bit more complicated, but as long as the element pattern repeats (predictably) in two dimensions, you can use the same principle: using scrollBy() to move the scroll bars back to an earlier position in the viewport looks the same as the one that the user just about to enter.

For more complex scenarios involving a more random distribution of elements, rather than cloning elements, I will be tempted to replace existing elements using insertBefore(); so that an element that is (say) 300px below the viewport and 900px right of the viewport moves so that it is now 600px above the viewport and 300px left of the viewport.

This will allow a seemingly infinite movement in all four directions (and a random distribution of elements through this seemingly infinite field) without increasing the number of elements in the document.

Answer 2

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

Answer 3

It took some time, but I think I finally discovered most of the Android methods used for this cool effect.

As @Kootsj kindly noted, the Leap: Second website uses PIXI-js - webGL / canvas, a 2-D rendering library, mainly used for games. By exploring alternative libraries, any of the game / rendering engines can be used to achieve the same result.

They use a rendering library to draw individual images on their canvas in a smart, grid-like layout. Then they use PIXI to animate / transform the canvas onto the scroll, mouse, touch and drag events - for maximum smoothness, I think.

Looking into PIXI for more, "canvas caching" and "scene buffering" are possible. Knowing this, I would suggest that they cache / clone the graphics card and somehow insert it in the directions that the user clicks / panes, but since it is "cached" or "buffered", it works very well. I'm still not 100% how they achieve the inaction creation function, but it looks like it might be close.

Their script consists of 20,500+ lines of Javscript and largely resembles the architecture of the game. He will make some serious efforts to achieve a similar effect in comparing performance, but will try.

If I learn more about this function or come up with a working example, I will update this answer with my findings.