Deslizador de página de pantalla completa con efectos Parallax

Vista prévia

Descripción

Un control deslizante de página de pantalla completa adaptable a JavaScript/CSS puro que permite al usuario cambiar entre secciones de página con un efecto de desplazamiento de paralaje.

Funcionamiento

Compile la estructura HTML para el control deslizante de página.

<div class="l">

<div class="bg">


<div class="c c1"></div>


<div class="c c2"></div>


<div class="c c3"></div>


<div class="c c4"></div>


<div class="c c5"></div>

</div>

<div class="fg">


<div class="c">



<h1>




SAMPLE ONE<br />




<small>THIS IS THE FIRST DESCRIPTION</small>



</h1>


</div>


<div class="c">



<h1>




SAMPLE TWO<br />




<small>THIS IS THE SECOND DESCRIPTION</small>



</h1>


</div>


<div class="c">



<h1>




SAMPLE THREE<br />




<small>THIS IS THE THIRD DESCRIPTION</small>



</h1>


</div>


<div class="c">



<h1>




SAMPLE FOUR<br />




<small>THIS IS THE FOURTH DESCRIPTION</small>



</h1>


</div>


<div class="c">



<h1>




SAMPLE FIVE<br />




<small>THIS IS THE FIVE DESCRIPTION</small>



</h1>


</div>

</div>
</div>

Agregue una paginación inferior al control deslizante.

<div class="i">

<a href="#" class="active"></a>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>
</div>

Haga la pantalla completa del deslizador.

html,
body,
.l,
.bg,
.bg > .c,
.fg {

width: 100%;

height: 100%;
}

Los estilos CSS primarios para las capas de paralaje, fondo y primer plano.

/* LAYER */
.l {

position: relative;

overflow: hidden;
}

/* BACKGROUND */
.bg {

position: absolute;

top: 0;

left: 0;

transition: top 1s;
}

/* FOREGROUND */
.fg {

position: absolute;

top: 0;

left: 0;
}

.fg > .c {

width: 100%;

height: 200%;

position: relative;
}

.fg > .c > h1 {

font-size: 56px;

color: white;

width: 100%;

text-align: center;

position: absolute;

top: 50%;

text-shadow: -2px 0 black, -2px 2px black, -2px -2px black, 0 2px black, 2px 0 black, 2px 2px black, 2px -2px black, 0 -2px black;

transform: translateY(-50%);
}

.fg > .c > h1 > small {

font-size: 32px;

color: #cfcfcf;
}

Estilo de los puntos de paginación.

.i {

width: 100%;

text-align: center;

position: absolute;

bottom: 10px;

word-spacing: 10px;
}

.i > a {

background: #888888;

width: 20px;

height: 20px;

display: inline-block;

border-radius: 50%;
}

.i > a.active {

background: white;
}

Agregue imágenes de fondo al control deslizante.

.c1 {

background: url("1.jpg") center center no-repeat;
}

.c2 {

background: url("2.jpg") center center no-repeat;
}

.c3 {

background: url("3.jpg") center center no-repeat;
}

.c4 {

background: url("4.jpg") center center no-repeat;
}

.c5 {

background: url("5.jpg") center center no-repeat;
}

El núcleo JavaScript para habilitar el control deslizante de página.

var bg = document.querySelector(".bg");
var fg = document.querySelector(".fg");
var link = document.querySelectorAll(".i > a");
var selectLink = 0;

function leInitWrapper() {

var bgHeight = window.innerHeight;

var fgHeight = bgHeight * 2;



if (window.innerWidth < 1024) {


for (var i = 0; i < bg.children.length; i++) {



bg.children[i].style.backgroundSize = "auto";



fg.children[i].style.backgroundSize = "auto";


}

}

else {


for (var i = 0; i < bg.children.length; i++) {



bg.children[i].style.backgroundSize = "100%";



fg.children[i].style.backgroundSize = "100%";


}

}


fg.style.top = "";

fg.style.top = Math.floor(fgHeight / 4 * -1).toString() + "px";

fg.style.transition = "top 1s";


for (var i = 0; i < link.length; i++) {


link[i].setAttribute("page-value", i.toString());


link[i].addEventListener("click", function(evt) {



evt.preventDefault();



selectLink = parseInt(this.getAttribute("page-value"))



bg.style.top = (selectLink * bgHeight * -1) + "px";



fg.style.top = (((selectLink * fgHeight) + Math.floor(fgHeight / 4)) * -1) + "px";



for (var j = 0; j < link.length; j++) {




link[j].classList.remove("active");



}



this.classList.add("active");


});

}
}
leInitWrapper();

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

leInitWrapper();
});