En la actualidad tenemos una amplia variedad de páginas web, las cuales pueden implementar diferentes patrones de diseño, que pueden ir desde un clásico diseño plano o el nuevo e innovador Material Design.
Pero existe una manera bastante diferente y peculiar de hacer sitios web, sitios web que son meramente informativos y que no tienen una funcionalidad muy compleja como tal. Para estos casos podemos usar una web de una sola página que implemente el efecto Parallax.
Este efecto nos da la sensación que tenemos múltiples planos e incluso múltiples páginas en una sola. Veamos entonces como podemos implementarlo.
Código HTML
Nuestro HTML estará compuesto de una estructura bastante simple, compuesta por div que identificaremos como contenedores de acuerdo a ciertas clases, además de esto incluiremos nuestras hojas de estilo de manera habitual, así como nuestro JavaScript. Para este ejemplo nos apoyaremos tanto de jQuery como de Underscore.js el cual es una librería que nos proporciona varias funcionalidades que nos ayudarán con este ejercicio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Parallax</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="parallax.js"></script>
</head>
<body>
<div class="container">
<section class="background">
<div class="content-wrapper">
<p class="content-title">Skyfall</p>
<p class="content-subtitle">Película 1</p>
</div>
</section>
<section class="background">
<div class="content-wrapper">
<p class="content-title">The Professional</p>
<p class="content-subtitle">Película 2</p>
</div>
</section>
<section class="background">
<div class="content-wrapper">
<p class="content-title">Reservoir Dogs</p>
<p class="content-subtitle">Película 3</p>
</div>
</section>
</div>
</body>
</html>
Código CSS
Para nuestra hoja de estilos trabajaremos un poco más utilizaremos las propiedades de CSS3 en lo que respecta a los transforms para dar el efecto de movimiento hacia arriba o hacia debajo de nuestro fondos, además de esto utilizaremos los hijos de nuestro documento para asignar diferentes imágenes de fondo que servirán como nuestras múltiples páginas, veamos este fragmento de nuestro CSS:
.background {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 130vh;
position: fixed;
width: 100%;
-webkit-transform: translateY(30vh);
-ms-transform: translateY(30vh);
transform: translateY(30vh);
-webkit-transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}
.background:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.background:first-child {
background-image: url(skyfall.jpg);
-webkit-transform: translateY(-15vh);
-ms-transform: translateY(-15vh);
transform: translateY(-15vh);
}
.background:first-child .content-wrapper {
-webkit-transform: translateY(15vh);
-ms-transform: translateY(15vh);
transform: translateY(15vh);
}
.background:nth-child(2) {
background-image: url(theprofessional.jpg);
}
.background:nth-child(3) {
background-image: url(reservoirdogs.png);
}
.background:nth-child(1) {
z-index: 3;
}
.background:nth-child(2) {
z-index: 2;
}
.background:nth-child(3) {
z-index: 1;
}Para finalizar con nuestra hoja de estilos aplicaremos algunos cambios al texto que estará incluido en cada contenedor, así como la transición que debe hacer cada uno de estos de acuerdo al scroll que le hagamos al sitio web, indicando si estamos moviéndonos hacia arriba o hacia abajo
.content-wrapper {
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
color: #fff;
font-family: Montserrat;
text-transform: uppercase;
-webkit-transform: translateY(40vh);
-ms-transform: translateY(40vh);
transform: translateY(40vh);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}
.content-title {
font-size: 12vh;
line-height: 1.4;
}
.background.up-scroll {
-webkit-transform: translate3d(0, -15vh, 0);
transform: translate3d(0, -15vh, 0);
}
.background.up-scroll .content-wrapper {
-webkit-transform: translateY(15vh);
-ms-transform: translateY(15vh);
transform: translateY(15vh);
}
.background.up-scroll + .background {
-webkit-transform: translate3d(0, 30vh, 0);
transform: translate3d(0, 30vh, 0);
}
.background.up-scroll + .background .content-wrapper {
-webkit-transform: translateY(30vh);
-ms-transform: translateY(30vh);
transform: translateY(30vh);
}
.background.down-scroll {
-webkit-transform: translate3d(0, -130vh, 0);
transform: translate3d(0, -130vh, 0);
}
.background.down-scroll .content-wrapper {
-webkit-transform: translateY(40vh);
-ms-transform: translateY(40vh);
transform: translateY(40vh);
}
.background.down-scroll + .background:not(.down-scroll) {
-webkit-transform: translate3d(0, -15vh, 0);
transform: translate3d(0, -15vh, 0);
}
.background.down-scroll + .background:not(.down-scroll) .content-wrapper {
-webkit-transform: translateY(15vh);
-ms-transform: translateY(15vh);
transform: translateY(15vh);
}
Código JavaScript
Por último en nuestro JavaScript manejaremos lo que son los listener de nuestros eventos, es decir, saber cuándo el usuario utiliza el scroll del ratón para desplazarse por la página web. Además de esto detectaremos el navegador utilizado y estableceremos algunos valores constantes como la duración que debe tener un slider antes de poder ser cambiado de nuevo, la sensibilidad del scroll y la cantidad de páginas que tendremos.
var tiempo = false;
var esFirefox = (/Firefox/i.test(navigator.userAgent));
var esInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent));
var sensibilidadScroll = 30;
var duracionSliders = 600;
var sliderActual = 0;
var sliderTotales = $(".background").length;
function efectoParallax(evt) {
if (esFirefox) {
delta = evt.detail * (-120);
} else if (esInternetE) {
delta = -evt.deltaY;
} else {
delta = evt.wheelDelta;
}
if (tiempo != true) {
if (delta <= -sensibilidadScroll) {
tiempo = true;
if (sliderActual !== sliderTotales - 1) {
sliderActual++;
eleSiguiente();
}
duracionSliderTiempo(duracionSliders);
}
if (delta >= sensibilidadScroll) {
tiempo = true;
if (sliderActual !== 0) {
sliderActual--;
}
previousItem();
duracionSliderTiempo(duracionSliders);
}
}
}Por último vamos a establecer el tiempo que debe estar fijo la imagen para pasar a la siguiente, así como los listener a nuestros eventos, adicionalmente utilizaremos la función de añadir o remover clase para saber cuándo una de las imágenes está en la parte inferior o superior:
function duracionSliderTiempo(slideDuration) {
setTimeout(function() {
tiempo = false;
}, slideDuration);
}
var eventoScrollMouse = esFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(eventoScrollMouse, _.throttle(efectoParallax, 60), false);
function eleSiguiente() {
var $slideAnterior = $(".background").eq(sliderActual - 1);
$slideAnterior.removeClass("up-scroll").addClass("down-scroll");
}
function previousItem() {
var $slideSig = $(".background").eq(sliderActual);
$slideSig.removeClass("down-scroll").addClass("up-scroll");
}Ya con nuestro código finalizado solo nos queda probar el funcionamiento de nuestra aplicación, para ello solo debemos utilizar el scroll de nuestro ratón para ver el comportamiento, veamos:
Este efecto da una sensación bastante fresca a nuestros sitios sin embargo se aconseja utilizarlo en determinadas aplicaciones como portafolios o páginas informativas, ya que alguna otra web que maneje otro tipo de procesos o información hará que el usuario se canse y pierda el interés en la misma.
