Infinite looping columns in both directions

Question

I have been working on two column website, whereby when you scroll: column A goes up and column B goes down. I implemented an infinite scroll but what I am wondering is: is it possible to clone/append one column onto the other e.g. at a certain length of scrolling:

Once scrolled out of view:

• Column A boxes will move onto the end of column B
• Column B boxes will move onto the end of column A

Technically still infinite but looping the boxes from column to column - spilling one into the other and back again.

Is this approach bad, or, is it better to just use endless scroll on each column? What is tripping me up, as I am new to JS and jQuery, is the logic, and what is the best approach to achieve this.

*Image just for example, the amount of boxes could be a lot higher e.g. 10 in each column.

My code so far: http://jsfiddle.net/djsbaker/vqUq7/1/

My current attempt at clone/append:

var ele = document.getElementById("box");
var arr = jQuery.makeArray(ele);
var data = (ele)[0];

$(window).scroll(function() {  
  if ( $(window).scrollTop() >= 1000) {
    $(data).clone().appendTo('body');
  } else {
    ..
  }
});

Tangled

I at least removed that messy jquery from your code.... jsfiddle.net/oceog/KPHgv – Kroo

not really understand what you trying to do, If I scroll to the top of page, you want to append collumn A to the to of collumn B ? and if i scroll to the bottom ? – Kroo

@eicto Sorry about that, I was having a nightmare getting the jQuery to work with Prototype :( – Tangled

The top of Left column moving over onto the bottom of the right column, and the top of the right column moving onto the bottom of the left column. So I guess the opposite, or it might be fine with one direction. I am unsure, the logic hurts my head. Also, the columns are reversed :S – Tangled

top of the right collumn ? – Kroo

Ya, both at the same time I think, the logic hurts my head. So, the top of left and bottom of right swap over onto the next column, on a certain amount of scroll, then same again with the new top and bottom. – Tangled

jsfiddle.net/oceog/KPHgv/9 want this when scrolling to bottom ? – Kroo

I think so, it definitely moves across onto the next column, it seems to be repeating the div that moves across multiple times before it moves back into the first column: jsfiddle.net/xkcbu – Tangled

I not understand you, that correct or not ? – Kroo

Definitely the right path, both are swapping to the other, but they seem to repeat the div in each column several times, if you change the first div in the first column to a different background color and watch the path it takes it seems to appear 3 times once swapped across. – Tangled

Ahh, I think the scrollTop each time one is removed/appended/cloned makes it jump to the top, so it will look like each box is repeated several times but in reality the page is jumping up each time :S – Tangled

let us continue this discussion in chat – Kroo

The pater noster of scrolling! – Stepper

This is a very cool idea. I guess you just need to keep moving the columns once you hit either end of the scroll. It would be a bad idea to continuously append and extend the length, and unnecessary. – Crinkle

Ya, definitely don't want to extend the length / create duplicate content. The ideal would be that while the user scrolls the columns spill into each other out of view. – Tangled

Why not a scrolling Orobus? A grid, if you will, where the content moves around like a chain; all parts changing places on scrolling. – Motif

That sounds cool, probs a question in its own right. – Tangled

Answer 1

Infinite scrolling. Done : the Fiddle http://jsfiddle.net/PgMUP/14/

You had set everything up.

The code (neatened up a little) :

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);
var ul = '#up-left'; 
var dr = '#down-right'; 
function crisscross() {
    $(ul).css('bottom', '-' + window.scrollY + 'px');
    $(dr).css('bottom', '-' + window.scrollY + 'px');
    var ulc = $(ul).children();
    var drc = $(dr).children();
    var corners = [ulc.first(),ulc.last(),drc.last(),drc.first()];
    if (window.scrollY > half_way ) {
        $(window).scrollTop(half_way - child_height);
        corners[2].appendTo(ul);    
        corners[0].prependTo(dr);
    } else if (window.scrollY < half_way - child_height) {
        $(window).scrollTop(half_way);
        corners[1].appendTo(dr);
        corners[3].prependTo(ul);
    }
}
$(window).scroll(crisscross);

It works as your diagram suggests. The flicker is caused because browser reflow is triggered. A better method, instead of detaching and then inserting the divs, I believe would be simply to swap the attributes between two divs. Say whatever you have in there, the images, the text, the colors, the css classes, just swap that across with a big all purpose swap function. Then, since the containers themselves will remain fixed.

I adding containing divs and swapping the inner div out, so the size structure of the columns was preserved, but this did not work.

Crinkle

You're assuming that the height and number of boxes doesn't change (OP: “The amount of boxes could be a lot higher e.g. 10 in each column”). – Motif

Not really. They can change fine. You just need to update the difference between 1500 and 1000 to be the height of the boxes. I'll put that in, thanks. – Crinkle

Uhmmm.. im missing that box one is being transfered to the right... all im seeing is the greenbox, but the question is to move it to the right so red should show up at the right one aswell – Boondoggle

Thanks for this. Currently playing around in the fiddle. How evil would it be if it went both directions? – Tangled

@Tangled I agree. I made it that way. How I roll. – Crinkle

haha, awesome. Sorry, I think I am a fiddle behind (which is a bit of a dodgy sentence...) – Tangled

Yes it is twitchy. I'm up to 4 now, still no joy with the twitch. – Crinkle

Could it be to do with both columns being at different levels to each other? Am playing with a div with no height which expands on the swap but it aint working too great. – Tangled

You could be right. Perhaps you could make getting rid of the twitching a later challenge? I think you would get some answers for it if you showed the fiddle and asked it as a question. – Crinkle

Sounds like a good plan. I think you have nailed the column spill, mucho thanks. – Tangled

This is a winner for me, I will just wait to see if Lim H (the bounty person) is happy, as its his 100 rep. – Tangled

I'm still learning JavaScript and I find the effect really cool and the code is elegant :D It's useful too. Not just the code but the approach as well. Up,down,left,right works great but is there a way to shorten the code with mod 4? It'd be beneficial if someone wants to port this type of effect to three.js... – Wynellwynn

Well, the effect was your idea. I think we all find it a pretty cool idea. You had everything set up, I just added 2 or 3 lines. That's it. I will see if I can shorten the code. – Crinkle

It wasn't my idea. I didn't even set anything up. But I'm actually having a use case for it atm. Not too urgent, but it can definitely improve the feel of one of my projects. – Wynellwynn

I think its turned out great, thanks again cris. I learnt a lot from it. Going to play around with the flicker, might open a question for it like you recommended. – Tangled