Parallax scrolling es una de las tendencias en diseo web para este ao, bsicamente funciona as, mientras te desplazas

(scroll) por la pgina en cuestin, el fondo de se mueve ms lento que el contenido en el primer plano, creando as la ilusin de profundidad 3D. A continuacin, un simple y efectivo tutorial para que puedas crear tu propio efecto parallax para tu sitio web.

Paso 1: Formato HTML

<section id="home" data-type="background" data-speed="10"></section> <section id="about" data-type="background" data-speed="10"></section>

Esta tcnica gira en torno al control de la velocidad de la imagen de fondo. As que vamos a empezar con el formato HTML, creando dos secciones junto con los atributos correspondientes:data-type y data-speed. Voy a ampliar estos trminos ms adelante.

Vamos a utilizar la etiqueta<section> con los atributos data-type& data-speed, recientemente introducidos en HTML5. Esto hace que el cdigo HTML sea ms limpio, ordenado y fcil de leer. De acuerdo con la especificacin de los atributos de datos personalizados, cualquier atributo que comience con data- se tratar como un rea de almacenamiento para datos privados. Esto no afectar a la distribucin o presentacin del sitio. Puesto que todo lo que necesitamos hacer es controlar la velocidad de las imgenes de fondo, vamos a utilizar los atributos data-type = background y data-speed = 10 como atributos clave para especificar los parmetros necesarios.
<section class="pages" id="home" data-type="background" data-speed="10"> <article>I am absolute positioned</article> </section> <section class="pages" id="about" data-type="background" data-speed="10"> <article>Simple Parallax Scroll</article> </section>

A continuacin, aadiremos el cdigo dentro de las etiquetas <article> correpondiente a cadaseccin <section>

Lo que estamos tratando de hacer aqu es hacer que el fondo <section> se desplace ms lento que su contenido, es decir <article>. Esto nos ayudar a crear el efecto parallax.

Antes de pasar a jQuery, vamos a aadir las imgenes de fondo en nuestro CSS para cada<section>.

#home { background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; } #about { background: url(about-bg.jpg) 50% 0 no-repeat }

fixed; min-height: 1000px;

Puedes utilizar los fondos que quieras, yo utilizar estos:

Vamos a aadir ms estilos CSS para darle color y elegancia a nuestro sitio.

#home { background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; } #home article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; } #about { background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box-shadow: 0 0 50px rgba(0,0,0,0.8); } #about article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; }

Paso 2:

jQuery

Comenzaremos a introducir nuestro cdigo jQuery. vamos a empezar con el mtodo estndardocument.ready() para asegurarse de que la pgina se ha cargado y est lista para ser manipulada con nuestro script jQuery.

$(document).ready(function(){ });

Esta tcnica controla la velocidad de la imagen de fondo que existe en ambas secciones.

En el cdigo que se muestra a continuacin, lo que sucede es lo siguiente: estamos iterando sobre cada <section> de la pgina, que contienen el atributo data-type="background"

$(document).ready(function(){ $('section[data-type="background"]').each(function(){ var $bgobj = $(this); // assigning the object }); });

Ahora hay que aadir otra funcin .Scroll(), en el interior .Each(), que se invoca cuando el usuario comienza a desplazarse (scrolling).

$(window).scroll(function() { });

Ahora necesitamos determinar cuanto se ha desplazado el usuario, y dividir este valor por el valordata-speed que utilizamos al comienzo, esto ubicara el fondo y frente en diferentes zonas, dando el efecto parallax.

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

El ltimo paso es asignar nuestra posicin del fondo a una variable.

// Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords });

Nuestro script jQuery debera quedar as.

$(document).ready(function(){ $('section[data-type="background"]').each(function(){ var $bgobj = $(this); // assigning the object $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data('speed')); // Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords }); }); }); });

LISTO!