there seem to be two separate parts here. First, the divs are not moving correctly and then they stop moving altogether. Second, scrolling isn't working properly.
Looking at div movement first:
I am not familiar with jquery but one of your problems seems to be that this line
$('.grid-image').css('transform', 'matrix(1, 0, 0, 1, ' + yAxis + ',' + xAxis + ')');
does not update the transform settings for the current element but changes the CSS for all elements of class grid-image. To ensure each div gets its new matrix you can change the above line to
this.style.transform='matrix(1, 0, 0, 1, ' + yAxis + ',' + xAxis + ')';//incidentally did you want the x and y this way round?
Another problem is that all the divs apart from the first will still end up with the same xAxis and yAxis in their transform matrix. This is because Math.floor(Math.random()) is equivalent to Math.floor(Math.random()*1) which gives a random integer from 0 (inclusive) to 1 (exclusive), so it is always 0. Depending on how big you want these values to be you can use a higher integer. For example, Math.floor(Math.random()*10) gives a random integer from 0 to 9.
I do not know whether you intended this or not, but the first div will never have its transform changed as its index is 0 so these lines always set xAxis and yAxis = 0
var yAxis= index * Math.floor(Math.random()-2);
var xAxis= index * Math.floor(Math.random()-1);
Adding 1 to the index, for example, would ensure the first div gets new values.
Now looking more closely at the calculations for the axes, CSS transform matrix interprets the last two of its parameters as translateX and translateY. These are relative to the current position of the element. In the original the values were always negative so all the elements moved gradually to the left and (less noticeably as the increment was smaller) up.
Using your Codepen my laptop became very hot, with the fan going crazy - there is a lot of calculation going on with a matrix transform on so many elements 20 times a second. I have attempted to mitigate this by noticing that you are not scaling or skewing elements so a translate transform instead of a matrix transform would do.
Putting these things together if we replace the setInterval call with
setInterval(function() {
$('.grid-image').each(function(index){
var yAxis= (index+1) * Math.floor(Math.random()*1000) * (Math.random() < 0.5 ? -1 : 1);
var xAxis= (index+1) * Math.floor(Math.random()*1000) * (Math.random() < 0.5 ? -1 : 1);
this.style.transform='translate('+xAxis+'px,'+yAxis+'px)';
});
}, 50);
we get random-looking motion of all the divs. The amount of motion of course depends on both the time interval and the calculations for the x and y increments and I have *1000 here to get some easily visible motion. It needs to be more if you want elements to move across the screen more. I've kept the index in the calculations but I'm not sure if that's what you intended - elements further down move more than those at the top, and then as you scroll you find slower ones again (so the overall effect is to have a hint of a pattern rather than total randomness).
Using this code I have not seen the animation stop - and have run it for many minutes. The laptop got hot but not so much. I suppose there could be a question around whether less powerful processors can complete all the matrix transforms in the time interval. If that proves to be a problem then moving to setTimeout would be helpful as would any CSS changes that encouraged use of GPUs.
Hope this helps with your first two points.
Now to look at the scrolling. This code
var clone = $(".wrapper").contents().clone();
clone.appendTo(".wrapper");
clone.prependTo(".wrapper");
puts just one copy of the content div into the .wrapper div. I think this is because it gets appended, then prepended which means it isn't anymore appended i.e. it can't be in two places at once. Replacing it with this code gives 3 copies of a content div which I guess you know will be enough for the sizes of display your code will be used on
var clone = $(".wrapper").contents().clone();
var clone2 = $(".wrapper").contents().clone();
clone.appendTo(".wrapper");
clone2.prependTo(".wrapper");
Scrolling back now works but forward has a problem. In this code
$(document).scroll(function(){
var scrollWindowPos = $(document).scrollTop();
if(scrollWindowPos >= origDocHeight ) {
$(document).scrollTop(0);
}
if(scrollWindowPos <= 0 ) {
$(document).scrollTop(origDocHeight);
}
});
where scrollWindowPos >= origDocHeight it scrolls to 0 which means next time scrollWindowPos <=0 is true and it jumps. Replacing with this code enables scrolling forward
$(document).scroll(function(){
var scrollWindowPos = $(document).scrollTop();
if(scrollWindowPos >= origDocHeight ) {
$(document).scrollTop(1); /* used to be 0 - using 1 is a bit hacky but it does the job */
}
else if(scrollWindowPos <= 0 ) {
$(document).scrollTop(origDocHeight);
}
});
It is not perfect. Scrolling by grabbing the scroll bar and moving it downwards creates 'flashes' but scrolling by selecting the scroll bar's downward arrow gives smooth scrolling, no flashes (Windows 10, Edge and Chrome). I can't think at the moment how to investigate this further.
I had to remove the display:none on the body which is in the CSS on Codepen in order to get a scroll bar, so it may be that I have misunderstood what you wanted from scrolling.
Here is the complete JS code with all the above changes in it
//MOVING ANIMATION
setInterval(function() {
$('.grid-image').each(function(index){
var yAxis= (index+1) * Math.floor(Math.random()*1000) * (Math.random() < 0.5 ? -1 : 1);
var xAxis= (index+1) * Math.floor(Math.random()*1000) * (Math.random() < 0.5 ? -1 : 1);
this.style.transform='translate('+xAxis+'px,'+yAxis+'px)';
});
}, 50);
//ENDLESS SCROLL
var origDocHeight = document.body.offsetHeight;
var clone1 = $(".wrapper").contents().clone();
var clone = $(".wrapper").contents().clone();
clone.appendTo(".wrapper");
clone1.prependTo(".wrapper");
$(document).scroll(function(){
var scrollWindowPos = $(document).scrollTop();
if(scrollWindowPos >= origDocHeight ) {
$(document).scrollTop(1);
}
else if(scrollWindowPos <=0 ) {
$(document).scrollTop(origDocHeight);
}
});
