Crear un Sitio Web con el efecto Parallax Usando Stellar.js

() translation by (you can also view the original English article)

Una de las más grandes tendencias en el reciente y moderno diseño web es el uso del efecto de desplazamiento parallax. En este tutorial voy a mostrarle cómo usted puede crear el efecto en su propio sitio web con un poco de imaginación y un poco de ayuda de Stellar.js

Introducción

El efecto de desplazamiento parallax ha sido popular desde que sitios tales como Nike´s Better World lo presento en sus sitios web hace algunos años. El efecto parallax con respecto a las interfaces ha estado desde los años 80, cuando fue usado por primera vez en los títulos de los juegos de vídeo y, posteriormente, en los mismos juegos. Hace poco, empezó a hacer su aparición en las interfaces de la web, seguro que usted estará familiarizado con silverbackapp, el cual uso el efecto como parte del encabezado.

Cuando se combina con la funcionalidad de desplazamiento de un sitio web, los efectos de desplazamiento parallax pueden tener un sólido impacto visual, especialmente cuando se combina con algunas formas de historias que lo conducirán en un viaje.

Para...¿Qué?

Parallax es un desplazamiento o una diferencia en la posición aparente de un objeto visualizado a lo largo de dos lineas diferentes de vista. - Wikipedia

Ok, pero ¿qué es con exactitud un efecto parallax? Bien, tal vez es probablemente una de las cosas a las que sus clientes se refieren cuando dicen a ciegas "Quiero mi sitio HTML5". Siempre que los clientes me piden un sitio "HTML5", tengo que preguntarles específicamente cómo interpretan el significado HTML5 -en el momento que solamente parece ser una palabra de moda que los clientes siguen diciéndome sin entender en realidad lo que esto significa.

¿Así que es HTML5? Por supuesto, HTML5 tiene una parte que juega su rol en el efecto parallax, pero es más que simple HTML5, también utiliza algunas formas de javascript, tales como jQuery y, sin mencionar que, tampoco seria posible sin un poquito de CSS3.

La palabra parallax se deriva del Griego παραλλαξη (parallix) que significa alteración. Los objetos que están más cerca del ojo tienen un parallax más grande que los objetos que están alejados. Esto significa que los objetos que están más cerca de nosotros pueden parecer que se mueven más rápido que los objetos en el fondo.

Utilizando múltiples capas de fondo y objetos (tales como imágenes) y luego, dejando que se muevan en velocidades diferentes, crea un sensación de profundidad y dimensión.

Parallax en Acción

Eche un vistazo a algunos ejemplos que demuestran efectos parallax.

Todo sitio web cuenta una historia.

Los ejemplos anteriores lo llevan a alguna forma de viaje o historia, y lo hacen en una variedad de formas diferentes. Esto, en mi opinión, es lo que hace a desplazamiento parallax de un sitio un éxito. La clave para hacerlo interesante y único es centrándose en una buena historia y concepto, luego, usando el efecto en formas creativas e imaginativas.

Wieden+Kennedy (W&K), los chicos detrás del soporte del Sitio web Nike Better World:

En nuestra opinión, las tecnologías son independientes de los conceptos. Nuestro enfoque primario fue crear una magnífica experiencia de narración interactiva. - Wieden+Kennedy (W&K)

Cómo funcionará nuestro sitio

Para demostrar una manera de la implementación del efecto de desplazamiento parallax en su sitio web, he optado por mostrale un sitio web de cuatro diapositivas que utiliza el efecto en diferentes fondos e imágenes. También he añadido una navegación en el extremo izquierdo que se desplazará hacia una diapositiva específica en el sitio y que, además, cambiará de tamaño para reflejar el número de diapositiva activa. Además, estoy usando la fuente web Bebas, aunque usted es libre de usar algo que usted desee.

Así es como aparecerá la estructura de nuestra carpeta:

Los Plugins Utilizados

Stellar.js

Para ayudarme a lograr este efecto, estoy usando Stellar.js un complemento de jquery, que fue diseñado por Mark Dalgleish, y que hace mucho más fácil crear sitios web con el efecto de desplazamiento parallax. Hay otros plugins disponibles para ayudarle a hacer esto y de los cuales hice una lista que está al final de este artículo. He optado por usar Stellar.js ya que es bastante sencillo de implementar y, aunque no está demostrado durante este tutorial, puede ser optimizado para trabajar en las plataformas de dispositivos inteligentes tales como iOS.

Waypoints.js

También voy a usar jQuery waypoints de Caleb Troughton. Waypoints es otro complemento de jQueyr que ejecuta una función siempre que usted desplaza a un elemento. Esto permite a la navegación en el sitio web resaltar en cual diapositiva estamos de acuerdo a la posición de la barra de desplazamiento.

jQuery Easing

jQuery easing, es un complemento de GSGD que ofrece avanzadas opciones de suavizado. Estaremos usando esto para añadir un agradable movimiento suavizado cuando se haga la transición de una diapositiva a la otra.

La estructura HTML

Empecemos nuestro archivo index.html añadiendo el doctype para HTML5 y luego va a crear la sección head. Este consiste de una hoja de estilo CSS Reset para reiniciar los estilos, seguido por nuestra hoja de estilos 'styles.css'. Después, añadimos la biblioteca jQuery seguido por nuestro archivo jQuery personalizado 'js.js'. Todo esto es seguido por tres plugins; 'jquery.stellar.min.js','waypoints.min.js' and 'jquery.easing.1.3.js'.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a parallax Website using Stellar.js</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

</head>

El próximo elemento en nuestro html es la imagen del logo Envato que queda en una posición fija a través de todo el sitio. Para hacer esto agregamos la clase de 'envatologo' para que podamos ajustar la posición de él más tarde cuando desarrollemos el código CSS3.

1	<img class="envatologo" src="images/envatologo.png">

Las Diapositivas

Las cuatro diapositivas usan la misma estructura:

1
2	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
3	<a class="button" data-slide="2" title=""></a>
4	</div><!--End Slide 1-->

Usamos una clase 'slide' que será utilizada como un estilo general para todas las diapositivas. Luego, a cada diapositiva se le da un id de 'slide' seguido por el número, por ejemplo: 'Slide1'. Usamos los atributos de datos HTML5 y la llamamos 'data-slide'. Esto nos permitirá seleccionarlo usando jQuery. También se añade otro atributo de datos 'data-stellar-background-ratio'. Esto es específico para el complemento de jQuery; Stellar.js y le dice al plugin en que radio la velocidad del elemento debería moverse.

El radio es relativo a la velocidad natural de desplazamiento, así que un radio de 0.5 provocaría que el elemento se desplazará a la mitad de la velocidad, un radio de 1 no tendría ningún efecto, y un radio de 2 ocasionaría que un elemento se desplazará al doble de la velocidad.

Todas las diapositivas con excepción de la diapositiva cuatro tiene un botón que nos permitirá desplazar hacia la siguiente diapositiva. Para esto añadimos el atributo 'data-slide' con el valor del número de la diapositiva. Esto es para que el botón sepa cual diapositiva es la siguiente para que podamos pasar este valor a jQuery. La mayoría de las diapositivas tienen una etiqueta html llamada span con una clase de 'slideno', que simplemente es una versión de texto grande del número de la diapositiva y que aparece en la esquina inferior izquierda de la mayoría de las diapositivas. Esto podría ser usado por títulos.

1	<span class="slideno">Slide 1</span>

En las diapositivas tres y cuatro, también añadimos algunos elementos de imágenes para el div 'slide'. Estas imágenes le darán una idea verdadera al efecto parallax que estamos creando. Envolvemos todo esto dentro de un div 'wrapper' y que estará centrado y tiene una anchura de '960px', esto solamente es para estar seguros de que se muestra bien a través de todas las pantallas de monitores de escritorio.

Cada imagen tiene un atributo 'data-stellar-ratio' conectado a ella. Una vez más, esto es específico para Stellar.js y le dice al plugin en cual radio de velocidad deberíamos de desplazar el elemento.

<div class="wrapper">
		
			<img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">

</div>

El CSS

Por fortuna para nosotros no hay mucho implicado con CSS. Básicamente, es aplicar estilo a algunos elementos, pero la mayor parte de esto es para posicionar algo de los elementos de las imágenes.

Lo primero que necesitamos hacer con nuestro CSS es traer la fuente BEBAS usando @font-face. Luego añadimos eso al HTML para ajustar la fuente para el sitio. Además, ajustamos la anchura y la altura del html y del body al 100%. Esto le permitirá a nuestras diapositivas adoptar la anchura completa y la altura de la pantalla del usuario.

  
@font-face {  
	font-family: 'BebasRegular';  
	src: url('font/BEBAS___-webfont.eot');  
	src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),     
	url('font/BEBAS___-webfont.woff') format('woff'),     
	url('font/BEBAS___-webfont.ttf') format('truetype'),     
	url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');  
	font-weight: normal;  
	font-style: normal;  
	}  
	
html,body{ 
	font-family: 'BebasRegular';  	
	width:100%;  	
	height:100%;  
}

La Navegación

A la navegación principal se le da una posición 'fixed' para mantenerlo en el mismo lugar a través del sitio. Así que desplazamos este 20px desde la parte de arriba para darle un poco de espacio arriba de él, y ajustamos la propiedad z-index en 1 para garantizar que éste está arriba de todas las capas del sitio.

La lista actual solamente es el estilo del texto con un borde que cruza hasta el fondo para actuar como un subrayado. Esta tiene un ancho de 53px. También se añadió una transición para que haga una animación desde su estado estándar hasta su estado en el evento hover. He usado el prefijo -webkit- sólo para conservar el código corto, pero el recurso de código completo que puede ser descargado arriba, contiene todos los prefijos.

El estado hover también usa las mismas propiedades que la clase 'active', básicamente, solamente un incremento en el tamaño de la fuente y la anchura. La clase 'active' es utilizada por jQuery para aplicar estilo relevante a la diapositiva que es visualizada en la ventana del navegador.

  
.navigation {  	
	position:fixed;  	
	z-index:1;  	
	top:20px;  
}  
.navigation li {  	
	color:#333333;  	
	display:block;  	
	padding: 0 10px;  	
	line-height:30px;  	
	margin-bottom:2px;  	
	font-weight:bold;  	
	-webkit-transition: all .2s ease-in-out;  	
	border-bottom:1px solid black;  	
	text-align:left;  	
	width:53px;  
}  
.navigation li:hover,
.active {  	
	font-size:25px;  	
	cursor:pointer;  	
	width:100px!important;  
}

Al logotipo envato se la ha aplicado un estilo de posición solamente para garantizar que queda en el centro de la pantalla. Parecido a la navegación, a éste también le fue dado la propiedad z-index '1' para asegurar que queda arriba.

  
.envatologo {  
	position:fixed;  
	top:50%;  
	left:50%;  
	width:446px;  
	margin-top:-41px;  
	margin-left:-223px;  
	z-index:1;  
}

Ahora continuamos con el estilo de las diapositivas. Le damos una propiedad background-attachment con la opción 'fixed'. La propiedad background-attachment establece si una imagen de fondo está ajustada o se desplaza con el resto de la página, lo que viene a ser útil para las imágenes de fondo (tales como las que hemos usado en las cuatro diapositivas). Para este ejemplo hemos utilizado un fondo de pantalla de Philipp Seiffert que usted puede descargar haciendo clic aquí. Ajustamos la posición de la diapositiva a 'relativa'. Esto es para que podamos aplicar la posición absoluta a la clase 'slideno' y al 'botón' frente a la diapositiva que está al contrario del documento actual.

El efecto sombra de cuadro es solamente para propósitos de decoración y añade un agradable sombra paralela a la inserción superior de cada diapositiva.

.slide {
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper {
	width:960px;
	height:200px;
	margin:0 auto;
	position:relative;
}
.slideno {
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:100px;
	font-weight:bold;
	color:rgba(255,255,255,0.3);
}

La clase .button es para el botón que está al fondo de la página y que nos permite avanzar a la siguiente diapositiva. La colocamos en el centro inferior de cada diapositiva y hemos usado una imagen de una flecha como el indicador.

.button{
	display:block;
	width:50px;
	height:50px;
	position:absolute;
	bottom:0px;
	left:50%;
	background-color:#333333;
	background-image:url(../images/arrow.png);
	background-repeat:no-repeat;
}
.button:hover{
	background-color:#494949;
	cursor:pointer;
}

El estilo para cada diapositiva individual es relativamente sencillo y sigue el mismo patrón para cada una. La diapositiva uno tiene un color de fondo de '#5c9900'. La diapositiva dos también tiene un color de fondo ajustado en ella. La diapositiva dos también contiene imágenes y podemos seleccionar cada una usando el selector CSS nth-child(n). El selector puede ser descrito como:

Esta pseudo-clase combina con elementos sobre la base de sus posiciones dentro de una lista de un elemento primario de un elemento secundario.

Así que básicamente estamos aplicando estilo a cada imagen para que aparezcan en nuestro marcado. Solamente estamos ubicándolas en el contenedor de la diapositiva.

/******************************
 SLIDE 1 
*******************************/
#slide1{
	background-color:#5c9900;
	
}
/******************************
 SLIDE 2 
*******************************/
#slide2{
	background-color:#005c99;
	
}
#slide2 img:first-child{
	position:absolute;
top: 700px;
left: -150px;
}
#slide2 img:nth-child(2){
	position:absolute;
	top:300px;
	left:100px;
}
#slide2 img:nth-child(3){
	position:absolute;
	top:600px;
	left:300px;
}
#slide2 img:nth-child(4){
	position:absolute;
	top:400px;
	left:300px;
}
#slide2 img:nth-child(5){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(6){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(7){
	position:absolute;
	top:400px;
	right:100px;
}
#slide2 img:nth-child(8){
	position:absolute;
	top:100px;
	right:300px;
}

La diapositiva tres sigue los mismos ajustes de la dos.

  
/****************************** SLIDE 3 *******************************/  
#slide3 {  	
	background-color:#b6c10b;  
}  
#slide3 img:first-child {  	
	position:absolute;  
	top: 700px;  
	left: 300px; 
}  
#slide3 img:nth-child(2){  	
	position:absolute;  	
	top:100px;  	
	left:100px;  
}  
#slide3 img:nth-child(3){  	
	position:absolute;  	
	top:150px;  	
	left:300px;  
}  
#slide3 img:nth-child(4){  	
	position:absolute;  	
	top:450px;  	
	left:300px; 
}  
#slide3 img:nth-child(5){  	
	position:absolute;  	
	top:200px;  	
	right:300px;  
}  
#slide3 img:nth-child(6){  	
	position:absolute;  	
	top:100px;  	
	right:300px;  
}

La diapositiva cuatro es ligeramente diferente a las anteriores debido a que no contiene ninguno de los elementos de imágenes o color de fondo, sino que utiliza una imagen de fondo. Además, que le hemos aplicado la propiedad CSS3: 'background-size:cover'. Básicamente, esto ajusta la imagen de fondo para que cubra toda la ventana del navegador y cambie el tamaño a medida que cambia el tamaño del navegador. Además, hemos añadido una linea de texto en la última diapositiva a la que hemos aplicado estilo y le dimos la clase de 'parallaxbg'.

/******************************
 SLIDE 4 
*******************************/

#slide4{
	background-image:url(../images/Slide4/desktop4.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#slide4 .parallaxbg{
	position:absolute;
	right:40px;
	top:40px;
	font-size:28px;
	color:rgba(51,51,51,0.3);
}

El jQuery

El jQuery es en realidad en donde las cosas empiezan a cobrar vida. He comentado el código para que usted pueda ver lo que realmente está pasando.

  
jQuery(document).ready(function ($) {


    //initialise Stellar.js
    $(window).stellar();

    //Cache some variables
    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');


    //Setup waypoints plugin
    slide.waypoint(function (event, direction) {

        //cache the variable of the data-slide attribute associated with each slide
        dataslide = $(this).attr('data-slide');

        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the previous navigation link 
        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the next navigation link 
        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }

    });

    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 
    //from navigation link slide 2 and adds it to navigation link slide 1. 
    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }



    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);

    });


});

Solo algunos puntos

Create a Parallax Scrolling Website using Stellarjs envato

Si se detiene a ver la diapositiva dos de nuestro ejemplo, observará las burbujas 3D. Bueno, he añadido un leve desenfoque gausiano a algunas de ellas, principalmente a aquellas que están en el fondo. Al combinar estas con las burbujas considerablemente enfocadas, añade la sensación de profundidad que parallax crea. Esto es algo que usted debería considerar cuando esté tratando de conseguir buena profundidad para su sitio.

Muchos sitios que utilizan este efecto tienden a ser bastante pesados, así que asegúrese de comprimir sus imágenes tanto como usted pueda (sin sacrificar calidad). Si después de la compresión aún toma mucho tiempo en cargar entonces consideré añadir un cargador a su sitio web.

Conclusión

El Desplazamiento Parallax es uno de los efectos más encantadores de los últimos tiempos y las personas están constantemente empujando a los límites con él. Hoy he mostrado cómo configurar un sitio web de forma básica para que utilice desplazamiento parallax. El demo que he mostrado hoy es un sitio relativamente sencillo, y solamente fue desarrollado para propósitos de aprendizaje. Para aquellos de ustedes que están a punto de crear un sitio web usando este efecto, entonces lo insto a invertir tiempo en el concepto y la historia de qué es lo que hace a esto único, compartible y, de hecho, un placer para navegar. Se trata de como usted puede utilizar este efecto con sabiduría y no usarlo solamente por el bien de usarlo.

Espero que haya disfrutado leer sobre el efecto parallax y me encantaría ver cómo lo han utilizado ustedes en sus propios sitios web, así que siéntase libre de dejar los enlaces debajo. ¡Hasta la próxima vez!

Enlaces hacia Lecturas y Recursos Adicionales

Detrás de las Escenas de Nikes Better World
21 Ejemplos Sitios web con el Efecto de Desplazamiento Parallax
Scrollorama Un plugin parallax con algunas características estupendas.
Crear un Navegación Contagiosa Usando jQuery Waypoints