Scroller vertical de pantalla completa en JavaScript puro-Z-index scroll

Vista prévia

Descripción

Un desplazador de pantalla completa JS/CSS donde la sección de contenido actual cubrirá la anterior en el desplazamiento vertical de la página.

Funcionamiento

Agrega contenido seccionado a tu página HTML como estos:

<main role="main">


<!-- Image -->

<section class="image">


<div class="image__bg" style="background-image: url('1.jpg');"></div>

</section>



 <!-- Image -->

<section class="image">


<div class="image__bg" style="background-image: url('2.jpg');"></div>

</section>


<!-- Image -->

<section class="image">


<div class="image__bg" style="background-image: url('3.jpg');"></div>

</section>


</main>

Haga las secciones ventana completa sin importar cómo cambiar el tamaño del navegador.

.image {

position: relative;

height: 100vh;

width: 100%;
}

El principal JavaScript para activar el efecto de desplazamiento z-index.

var OpacityScroll = (function() {

var s;


return {


settings: {



windowHeight: window.innerHeight,



halfWindowHeight: window.innerHeight / 2,



documentHeight: document.body.scrollHeight,


},



init: function(page) {



s = this.settings;



this.bindEvents(page);


},



bindEvents: function(page) {



var children = document.querySelectorAll('.' + page + ' main')[0].children;




[].forEach.call(children, function(child, idx) {




child.style.left = 0;





if (idx === 0) {





child.style.position = 'fixed';





child.style.top = 0;





child.style.zIndex = 0;




} else {





child.style.position = 'absolute';





child.style.top = idx + '00vh';





child.style.zIndex = idx;






var scrollOffset = child.getBoundingClientRect().top + document.body.scrollTop,







opacityTrigger = s.windowHeight * idx - s.halfWindowHeight;






window.addEventListener('resize', function() {






scrollOffset = child.getBoundingClientRect().top + document.body.scrollTop;






s.windowHeight = window.innerHeight;






s.halfWindowHeight = s.windowHeight / 2;






s.documentHeight = document.body.scrollHeight;






opacityTrigger = s.windowHeight * idx - s.halfWindowHeight;





});






window.addEventListener('scroll', opacityChange);





window.addEventListener('resize', opacityChange);






function opacityChange() {






var scrollTop = document.body.scrollTop,








_prev = child.previousElementSibling,








opacity = 1 - (scrollTop - opacityTrigger) / scrollTop * idx * 2;







if (scrollTop >= opacityTrigger) {







opacity > 0 ? _prev.style.opacity = opacity : _prev.style.opacity = 0;






} else {







_prev.style.opacity = 1;






}







if (scrollTop >= scrollOffset && scrollTop + s.windowHeight !== s.documentHeight) {







child.style.position = 'fixed';







child.style.top = 0;






} else {







 child.style.position = 'absolute';







child.style.top = idx + '00vh';







child.style.left = 0;







child.style.zIndex = idx;






}





}




}



});


},

};
})();

OpacityScroll.init('example');