Código

Cómo crear un efecto paralaje simple

En toda la web, surgen sitios que usan lo que se conoce como desplazamiento de paralaje. En esencia, un desplazamiento de paralaje es cuando el contenido se desplaza a diferentes velocidades, creando un sentido de perspectiva y, por lo tanto, de profundidad.

Es un efecto atractivo y puede aplicarse a tantas capas como desee. En este artículo voy a presentar los principios básicos mostrándote cómo crear un efecto de paralaje simple de dos capas.

El HTML

Para comenzar, necesitamos algo de HTML, vamos a incluir un texto de relleno para colocarlo dentro de una sección y luego otro

eso mantendrá nuestros antecedentes: 

Home page
We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
We offer the following services:
  • Branding
  • Logos
  • Websites
  • Web applications
  • Web development – HTML5, CSS, jQuery
  • Content Management Systems
  • Responsive Web Design
  • Illustration
  • Business cards
  • Letterheads and compliment slips
  • Flyers
  • Mailers
  • Appointment cards
Sub page
Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:
 
Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.
Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.
 
Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.
  
Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

Esto es todo el HTML que vamos a necesitar. Todo el texto es solo para asegurarnos de que cubrimos toda la página para que el desplazamiento sea necesario. Vamos más al CSS:

El CSS

El CSS requerido para crear un efecto de paralaje es en realidad bastante simple si usted entiende por qué está escrito tal como es. Primero necesitamos establecer la imagen de fondo del div .bg y luego tenemos que evitar que el div se desplace, porque jQuery aplicará la acción de desplazamiento; entonces tenemos que establecer su posición para arreglar. A continuación, establecemos el ancho al 100% y la altura al 300% para asegurarnos de que el div sea más grande que la pantalla real. Lo ubicamos en la parte superior izquierda y finalmente le damos un índice z de -1 para asegurarnos de que se representa debajo del texto. 

.bg {background: url('bg.jpg') repeat;position: fixed;width: 100%;height: 300%;top:0;left:0;z-index: -1;}

Este es todo el CSS que necesitamos para el bg div, ahora solo tenemos que diseñar el resto de nuestra página (aunque esto es completamente opcional, no afecta el desplazamiento de paralaje): 

section {color: #fff;font-family: arial;width: 500px;margin: auto;line-height: 20px;font-size: 16px;}

Intenta desplazarte por la página ahora y verás que el texto se desplaza pero el fondo permanece fijo, vamos a cambiar eso con nuestro jQuery:

El jQuery

Lo que queremos que jQuery haga es verificar qué tan lejos se ha desplazado el usuario y mover el fondo a una velocidad más lenta. Vamos a crear una función llamada paralaje y crear una variable que contendrá el valor de los píxeles que el usuario ha desplazado: 

function parallax(){var scrolled = $(window).scrollTop();

Ahora, para hacer que el fondo se desplace a la misma velocidad que el texto, establecemos que el valor superior del div es el valor negativo del desplazamiento, luego cierre la función. Al igual que: 

    $('.bg').css('top', -(scrolled) + 'px');}

Sin embargo, el punto de desplazamiento de paralaje es moverse a una velocidad diferente, por lo que para ajustar la velocidad, multiplicamos el valor por una fracción, por ejemplo 0.2 para 20%: 

function parallax(){var scrolled = $(window).scrollTop();$('.bg').css('top', -(scrolled * 0.2) + 'px');}

Solo hay una cosa más que hacer para ejecutar el efecto y eso es llamar a la función cada vez que se desencadena el evento de desplazamiento: 

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

Habiendo hecho esto, nuestro código está completo. Si prueba el archivo, lo verá funcionando. Para cambiar la velocidad, necesitamos cambiar la fracción en la función; las fracciones más pequeñas reducen la velocidad y las fracciones más altas la aumentan. Puedes ver el resultado final de este código en esta pluma que creé

Conclusión

Como puede ver, crear un efecto de paralaje no es tan difícil como podría haber esperado. Por supuesto, esto es solo un ejemplo simple, pero puede basarse en esto para crear cualquier tipo de efecto de paralaje complejo que desee.

¿Has usado un efecto de paralaje en un proyecto? ¿Tienes un mejor método? Háganos saber en los comentarios.

Imagen / miniatura destacada, imagen de perspectiva deslizante a través de Shutterstock.

desplazamiento de paralaje paralaje paralaje simple cómo construir un sitio web de paralaje

OdWebDesign.Net