Is there a way to create a seamless loop between #box2 and #box using this fiddle? I want them to reveal themselves in a continuous loop with infinite scroll. Each time one box fills the frame, the next one should appear in the distance, repeating indefinitely.
window.addEventListener( 'load', function() {
var box = document.getElementById('box'),
docHeight = document.documentElement.offsetHeight;
window.addEventListener( 'scroll', function() {
// normalize scroll position as percentage
var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
transformValue = 'scale('+(1-scrolled)+')';
box.style.WebkitTransform = transformValue;
box.style.MozTransform = transformValue;
box.style.OTransform = transformValue;
box.style.transform = transformValue;
}, false);
document.getElementById('nav').addEventListener( 'click', function(event) {
var level = parseInt( event.target.getAttribute('href').slice(1), 10 ),
// normalize scroll position
scrollY = ( level / 4 ) * ( docHeight - window.innerHeight );
// enable transitions
box.className = 'transitions-enabled';
// change scroll position
window.scrollTo( 0, scrollY );
}, false);
function transitionEnded(event) {
// disable transition
box.className = '';
}
box.addEventListener( 'webkitTransitionEnd', transitionEnded, false);
box.addEventListener( 'transitionend', transitionEnded, false);
box.addEventListener( 'oTransitionEnd', transitionEnded, false);
}, false);
I'm seeking guidance on the next steps to achieve a smooth loop between the two divs.
Appreciate your help!