Scroll's are forever

by Darby Rathbone

HTML

<div><img src="http://placeskull.com/500/500" alt="" /></div>
<div><img src="http://placeskull.com/500/600" alt="" /></div>
<div><img src="http://placeskull.com/500/400" alt="" /></div>
<div><img src="http://placeskull.com/400/500" alt="" /></div>
<div><img src="http://placeskull.com/600/500" alt="" /></div>

CSS

*{

    margin:0px;
    padding:0px;
}
div{
    position:relative;
    outline:4px dashed #ff0000;
    overflow:hidden;
    width:100%;
    height:100%;
    display:block;
}
img{
    
        width:100%;
    height:100%;

}
span{
    width:100%;
    height:100%;
    position:absolute;
    display:block;
    z-index:1;
    color:red;
    font-size:100%;
    
}

JavaScript

var divs = [].slice.call(document.getElementsByTagName('div'));divs.forEach(function(e,i){
    var span = document.createElement('span');
    span.innerHTML = i+1;
    span.style = 'width:100%;height:100%;position:absolute;display:block;z-index:1;top:0px;';
    e.insertBefore(span,e.firstChild);
});
document.body.insertBefore(divs[divs.length-1].cloneNode(true),divs[0]);
document.body.appendChild(divs[0].cloneNode(true));
var getSizes= function(){
    window.rect ={width:window.innerWidth,height:window.innerHeight};
    divs.forEach(function(e,i){e.rect = e.getBoundingClientRect();
                               });
};getSizes();
var scrolled =window.innerHeight;
document.body.scrollTop = window.innerHeight;
addEventListener('scroll',function(e){
    scrolled +=document.body.scrollTop- window.innerHeight;
    if(scrolled<0){
                document.body.style.transitionD = '0ms';
        scrolled += window.innerHeight*(divs.length); 
    }
    if(scrolled>window.innerHeight*(divs.length)){
        document.body.style.transition = '0ms';
        scrolled = (scrolled%window.innerHeight); 
    }
   // console.log(scrolled);
    document.body.style.transform = 'translate(0px,'+-1*scrolled+'px)';
            document.body.style.transition = '';
    //console.log(top);
    document.body.scrollTop = window.innerHeight;
    
    });
addEventListener('resize',function(e){
    
    [].slice.call(document.getElementsByTagName('div')).forEach(function(e){e.style.width = window.innerWidth+'px';
                               e.style.height = window.innerHeight+'px';
                              });
   getSizes(); 
});