Share
Una de las mayores tendencias en diseño web moderno reciente es el uso de los efectos de desplazamiento de paralaje. En este tutorial, te mostraré cómo puedes crear el efecto en tu propio sitio web, con un poco de imaginación y un poco de ayuda de Stellar.js.
¿Está interesado en ahorrar tiempo y asegurarse de estar usando las mejores prácticas modernas? ¡Hay un excelente complemento de control deslizante de jQuery en Envato Market que podría hacer el trabajo perfectamente! Ya se utiliza en más de 150.000 sitios web..
El efecto de desplazamiento de la paralaje ha sido popular desde que sitios como Nike's Better World lo introdujeron en sus sitios web hace unos años. El efecto de paralaje con respecto a las interfaces ha existido desde la década de 1980, cuando se utilizó por primera vez en títulos de videojuegos y, posteriormente, en los juegos en sí. Más recientemente, comenzó a aparecer en las interfaces web. Estará familiarizado con silverbackapp, que utilizó el efecto como parte del encabezado..
Cuando se combinan con la funcionalidad de desplazamiento de un sitio web, los efectos de desplazamiento de paralaje pueden tener un fuerte impacto visual, especialmente cuando se combinan con algún tipo de historia que lo lleve en un viaje.
La paralaje es un desplazamiento o diferencia en la posición aparente de un objeto visto a lo largo de dos líneas de visión diferentes. - Wikipedia
Entonces, ¿qué es exactamente el efecto de paralaje? Bueno, es probablemente una de las cosas a las que se refieren tus clientes cuando dicen ciegamente "Quiero mi sitio HTML5". Cada vez que los clientes me piden un sitio "HTML5", tengo que preguntarles específicamente cómo interpretan el significado de HTML5; en este momento parece ser la palabra de moda que los clientes me siguen diciendo sin entender realmente lo que significa..
Entonces, ¿es HTML5? Seguro que HTML5 tiene un papel que desempeñar en el efecto de desplazamiento de paralaje, pero es más que HTML5, también utiliza algún tipo de javascript, como jQuery, y no sería posible sin un poco de CSS3.
La palabra paralaje real se deriva del griego παραλλαα (parallaxis) que significa alteración. Los objetos que están más cerca del ojo tienen un paralaje más grande que los objetos que están en la distancia. 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..
Acodar múltiples fondos y objetos (como imágenes) y luego permitir que se muevan a diferentes velocidades crea una sensación de profundidad y dimensión.
Eche un vistazo a algunos ejemplos que demuestran los efectos de paralaje..
Los ejemplos anteriores te llevan en alguna forma de viaje o historia, y lo hacen de diferentes maneras. Esto, en mi opinión, es lo que hace que un sitio de desplazamiento de paralaje sea un éxito. La clave para hacerlo interesante y único es centrarse en una buena historia y concepto, y luego usar el efecto de manera creativa e imaginativa..
Wieden + Kennedy (W&K), los chicos detrás del sitio web de Nike Better World apoyan esto:
En nuestra opinión, las tecnologías son independientes del concepto. Nuestro enfoque principal fue crear una gran experiencia de narración interactiva. - Wieden + Kennedy (W&K)
Para demostrar una forma de implementar el desplazamiento de paralaje en su sitio web, opté por mostrarle un sitio web de cuatro diapositivas que utiliza el efecto en diferentes fondos e imágenes. También he agregado una navegación en la esquina izquierda que se desplazará a una diapositiva específica en el sitio y también cambiará el tamaño para reflejar el número de diapositiva activa. También estoy usando la fuente web Bebas, aunque puedes usar otra cosa si lo deseas..
Así es como aparecerá nuestra estructura de carpetas:
Para ayudarme a lograr esto, estoy usando Stellar.js, un complemento de jquery de Mark Dalgleish que facilita la creación de sitios de desplazamiento de paralaje. Hay otros complementos disponibles para ayudarlo a hacer esto, que he enumerado al final de este artículo. He optado por usar Stellar.js ya que es bastante sencillo de implementar y, aunque no se ha demostrado durante este tutorial, se puede optimizar para que funcione en plataformas de dispositivos inteligentes como iOS.
También voy a usar los puntos de ruta jQuery de Caleb Troughton. Waypoints es otro complemento de jQuery que ejecuta una función cada vez que se desplaza a un elemento. Esto permite que la navegación en el sitio resalte en qué diapositiva estamos de acuerdo con la posición de la barra de desplazamiento.
jQuery easing es un complemento de GSGD que ofrece opciones avanzadas de aceleración. Vamos a utilizar esto para agregar un movimiento de suavidad agradable al hacer la transición de diapositiva a diapositiva.
Iniciando nuestro index.html, agregamos el doctype HTML5 y luego creamos la sección principal. Consiste en un restablecimiento de CSS seguido de nuestra hoja de estilo 'styles.css'. Luego agregamos la biblioteca jQuery seguida de nuestro archivo jQuery personalizado 'js.js'. Luego siguen los tres complementos, 'jquery.stellar.min.js', 'waypoints.min.js' y 'jquery.easing.1.3.js'.
Crea un sitio web de paralaje usando Stellar.js
El siguiente elemento en nuestro html es la imagen del logotipo de Envato que permanece en una posición fija constante en todo el sitio. A esto le agregamos una clase de 'envatologo' para que podamos configurar su posicionamiento más adelante cuando codifiquemos el CSS.
Las cuatro diapositivas usan el mismo marcado:
Utilizamos una clase de 'diapositiva' que se usará como estilo general para todas las diapositivas. A cada diapositiva se le asigna un ID de "diapositiva" seguido del número de diapositiva, es decir, "Diapositiva 1". Usamos el atributo de datos HTML5 y lo llamamos 'datos-diapositiva'. Esto nos permitirá apuntarlo usando jQuery. Se agrega otro atributo de datos de 'relación-fondo-estelar de datos'. Esto es específico del complemento stellar.js jQuery y le dice al complemento a qué proporción la velocidad del elemento debe desplazarse.
La relación es relativa a la velocidad de desplazamiento natural, por lo que una proporción de 0.5 causaría que el elemento se desplace a media velocidad, una relación de 1 no tendría ningún efecto, y una relación de 2 causaría que el elemento se desplace al doble de la velocidad.
Todas las diapositivas, excepto la diapositiva cuatro, tienen un botón que nos permitirá desplazarnos a la siguiente diapositiva. A esto le agregamos el atributo 'datos-diapositiva' con el valor del siguiente número de diapositiva. Esto es para que el botón sepa qué diapositiva es la siguiente para que podamos pasar este valor a jQuery. La mayoría de las diapositivas también tienen un lapso con una clase de 'slideno'; simplemente una versión de texto grande del número de diapositiva que aparece en la esquina inferior izquierda de la mayoría de las diapositivas. Esto también podría ser usado para títulos.
Accentsconagua
Diapositiva 1 En las diapositivas tres y cuatro, también agregamos algunos elementos de imagen a la división 'diapositiva'. Estas imágenes le darán una visión real del efecto de paralaje que estamos creando. Los envolvemos dentro de un div 'wrapper' que será centralizado y tiene un ancho de '960px', esto es solo para asegurarnos de que se muestre OK en todos los tamaños de monitores de escritorio.
Cada imagen tiene un atributo de 'relación estelar de datos' adjunto. Esto también es específico para stellar.js y le dice al complemento a qué proporción de velocidad debemos desplazar el elemento a.
Por suerte para nosotros no hay mucho involucrado con el CSS. Básicamente es un estilo de algunos elementos simples, pero la mayoría es para colocar algunos de los elementos de la imagen..
Lo primero que debemos hacer con nuestro CSS es traer la fuente BEBAS usando @ font-face. Luego lo agregamos al html para establecer la fuente del sitio. También establecemos el ancho y alto del html y el cuerpo al 100%. Esto permitirá que nuestras diapositivas adopten todo el ancho y alto de la pantalla del usuario.
@ font-face font-family: 'BebasRegular'; src: url ('font / BEBAS ___- webfont.eot'); src: url ('font / BEBAS ___- webfont.eot? #iefix') formato ('embedded-opentype'), url ('font / BEBAS ___- webfont.woff') formato ('woff'), url ('font / BEBAS ___- webfont.ttf ') formato (' truetype '), url (' fuente / BEBAS ___- webfont.svg # BebasRegular ') formato (' svg '); fuente-peso: normal; estilo de letra: normal; html, body font-family: 'BebasRegular'; ancho: 100%; altura: 100%; La navegación principal recibe una posición 'fija' para mantenerla en el mismo lugar en todo el sitio. Compensamos este 20px desde la parte superior para dar un poco de espacio por encima y establecemos el índice z en 1 para garantizar que esté en la capa superior del sitio.
La lista real es solo el estilo del texto con un borde en la parte inferior para actuar como un subrayado. Esto tiene un ancho de 53px. También se agrega una transición para que se anime de su estado estándar a su estado de desplazamiento. He usado el prefijo -webkit- aquí solo para mantener el código corto, pero el código fuente completo que se puede descargar arriba contiene todos los prefijos de los proveedores.
El estado de desplazamiento también usa las mismas propiedades que la clase 'activa'; Básicamente, sólo un aumento en el tamaño de la fuente y el ancho. JQuery utiliza la clase 'activa' para diseñar la diapositiva relevante que está a la vista de la ventana del navegador.
.navegación posición: fija; índice z: 1; superior: 20px; .navigation li color: # 333333; bloqueo de pantalla; relleno: 0 10px; línea de altura: 30px; margen inferior: 2px; font-weight: negrita; -webkit-transición: todos los .2s de facilidad de entrada; borde inferior: 1px negro sólido; alineación de texto: izquierda; ancho: 53px; .navigation li: hover, .active font-size: 25px; cursor: puntero; ancho: 100px! importante;
El logotipo de envato recibe algunos estilos de posicionamiento solo para garantizar que permanezca en el centro de la pantalla. De manera similar a la navegación, también se le da un índice z de '1' para garantizar que permanezca en la parte superior.
.envatologo cargo: fijo; superior: 50%; izquierda: 50%; ancho: 446px; margen superior: -41px; margen izquierdo: -223px; índice z: 1;
Ahora pasamos al estilo de las diapositivas reales. Les damos una propiedad 'fija' de adjunto de fondo. La propiedad de adjuntos de fondo establece si una imagen de fondo es fija o se desplaza con el resto de la página, por lo que resulta útil para las imágenes de fondo (como las que se usan en la diapositiva cuatro). Para este ejemplo, hemos utilizado un fondo de pantalla de Philipp Seiffert que se puede descargar aquí. Establecemos la posición de la diapositiva en "relativa". Esto es para que podamos posicionar absolutamente las clases 'slideno' y 'button' contra la diapositiva en oposición al documento real.
La sombra de la caja es solo para fines de decoración y agrega una bonita sombra en la parte superior de cada diapositiva.
.diapositiva adjunto de fondo: fijo; ancho: 100%; altura: 100%; posición: relativa; box-shadow: recuadro 0px 10px 10px rgba (0,0,0,0.3); .wrapper ancho: 960px; altura: 200px; margen: 0 auto; posición: relativa; .slideno posición: absoluta; abajo: 0px; izquierda: 0px; tamaño de fuente: 100px; font-weight: negrita; color: rgba (255,255,255,0.3);
El botón. Es para el botón en la parte inferior de la página que nos permite avanzar a la siguiente diapositiva. Lo hemos colocado en el centro inferior de cada diapositiva y hemos usado una imagen de una flecha como indicador.
.botón pantalla: bloque; ancho: 50px; altura: 50px; posición: absoluta; abajo: 0px; izquierda: 50%; color de fondo: # 333333; imagen de fondo: url (… /images/arrow.png); repetición de fondo: no repetición; .button: hover background-color: # 494949; cursor: puntero;
El estilo de cada diapositiva individual es relativamente simple y sigue el mismo patrón cada vez. La diapositiva uno tiene un color de fondo de '# 5c9900'. La diapositiva dos también tiene un color de fondo definido. La diapositiva dos también contiene imágenes y podemos apuntar a cada una usando el Selector de CSS nth-child (n). Este selector puede ser descrito como
Esta pseudo-clase hace coincidir los elementos en base a sus posiciones dentro de la lista de elementos hijos de un elemento padre.
Así que básicamente estamos diseñando cada imagen en el orden en que aparecen en nuestro marcado. Simplemente los estamos posicionando en relación a la envoltura de la diapositiva.
/ ****************************** DIAPOSITIVA 1 ***************** ************** / # slide1 background-color: # 5c9900; / ****************************** DIAPOSITIVA 2 **************** *************** / # slide2 background-color: # 005c99; # slide2 img: first-child position: absolute; superior: 700px; izquierda: -150px; # slide2 img: nth-child (2) position: absolute; superior: 300px; izquierda: 100px; # slide2 img: nth-child (3) position: absolute; superior: 600px; izquierda: 300px; # slide2 img: nth-child (4) position: absolute; superior: 400px; izquierda: 300px; # slide2 img: nth-child (5) position: absolute; superior: 600px; derecha: 300px; # slide2 img: nth-child (6) position: absolute; superior: 600px; derecha: 300px; # slide2 img: nth-child (7) posición: absoluta; superior: 400px; derecha: 100px; # slide2 img: nth-child (8) posición: absoluta; superior: 100px; derecha: 300px;
La diapositiva tres sigue el mismo traje que la diapositiva dos.
/ ****************************** DIAPOSITIVA 3 ***************** ************** / # slide3 background-color: # b6c10b; # slide3 img: first-child position: absolute; superior: 700px; izquierda: 300px; # slide3 img: nth-child (2) position: absolute; superior: 100px; izquierda: 100px; # slide3 img: nth-child (3) position: absolute; superior: 150px; izquierda: 300px; # slide3 img: nth-child (4) position: absolute; superior: 450px; izquierda: 300px; # slide3 img: nth-child (5) position: absolute; superior: 200px; derecha: 300px; # slide3 img: nth-child (6) position: absolute; superior: 100px; derecha: 300px;
La diapositiva cuatro es ligeramente diferente a las dos diapositivas anteriores, ya que no contiene ningún elemento de imagen ni un color de fondo, sino que utiliza una imagen de fondo. También le hemos dado la propiedad CSS3 'background-size: cover'. Básicamente, esto establece la imagen de fondo para cubrir toda la ventana del navegador y se redimensionará a medida que la ventana del navegador cambie de tamaño. También hemos agregado una línea de texto en la última diapositiva que hemos diseñado y dado una clase de 'parallaxbg'
/ ****************************** DIAPOSITIVA 4 ***************** ************** / # slide4 background-image: url (… /images/Slide4/desktop4.jpg); -webkit-background-size: cubierta; -moz-background-size: cubierta; -o-fondo-tamaño: cubierta; tamaño de fondo: cubierta; # slide4 .parallaxbg position: absolute; derecha: 40px; superior: 40px; tamaño de fuente: 28px; color: rgba (51,51,51,0.3);
El jQuery realmente es donde esta cosa comienza a cobrar vida. He comentado el código para que pueda ver exactamente lo que está sucediendo..
jQuery (document) .ready (function ($) // initialise Stellar.js $ (window) .stellar (); // Cache algunas variables var links = $ ('. navigation'). find ('li'); slide = $ ('. slide'); button = $ ('. button'); mywindow = $ (window); htmlbody = $ ('html, body'); // Plugin de configuración de waypoints slide.waypoint (función (evento , dirección) // caché la variable del atributo de diapositiva de datos asociada con cada diapositiva dataslide = $ (this) .attr ('diapositiva de datos'); // Si el usuario se desplaza hacia arriba, cambie el enlace de navegación que tiene el mismo atributo de la diapositiva de datos como la diapositiva para activar y // eliminar la clase activa del enlace de navegación anterior if (direction === 'down') $ ('. navigation li [data-slide = "' + dataslide + '" ] '). addClass (' active '). prev (). removeClass (' active '); // else Si el usuario se desplaza, cambia el enlace de navegación que tiene el mismo atributo de diapositiva de datos que la diapositiva a activo y / / eliminar la clase activa del siguiente enlace de navegación sino $ ('. navigation li [data-slide = "' + dataslide + '"]'). addClass ('active'). next ( ) .removeClass ('active'); ); // los puntos de ruta no detectan la primera diapositiva cuando el usuario se desplaza hacia la parte superior, por lo que agregamos un poco de código, que elimina la clase // de la diapositiva 2 del enlace de navegación y la agrega a la diapositiva 1 del enlace de navegación. mywindow.scroll (función () if (mywindow.scrollTop () == 0) $ ('. navigation li [data-slide = "1"]'). addClass ('active'); $ ('. navigation li [data-slide = "2"] '). RemoveClass (' active ');); // Cree una función a la que se le pasará un número de diapositiva y luego se desplazará a esa diapositiva usando jquerys animate. El complemento Jquery // easing también se usa, por lo que pasamos al método de suavizado "easeInOutQuint", que está disponible a través del complemento. function goToByScroll (dataslide) htmlbody.animate (scrollTop: $ ('. slide [data-slide = "' + dataslide + '"]'). offset (). top, 2000, 'easeInOutQuint'); // Cuando el usuario haga clic en los enlaces de navegación, obtenga el valor del atributo de deslizamiento de datos del enlace y pase esa variable a la función goToByScroll links.click (función (e) e.preventDefault (); dataslide = $ (este ) .attr ('data-slide'); goToByScroll (dataslide);); // Cuando el usuario haga clic en el botón, obtenga el valor de atributo de deslizamiento de datos del botón y pase esa variable a la función goToByScroll button.click (function (e) e.preventDefault (); dataslide = $ (este ) .attr ('data-slide'); goToByScroll (dataslide);); ); 
Si observa la diapositiva dos de nuestro ejemplo, notará las burbujas en 3D. He agregado un ligero desenfoque gaussiano a algunos de estos, principalmente a los que están en primer plano y en segundo plano. La combinación de estos con burbujas bien enfocadas se suma a la sensación de profundidad que crea el paralaje. Esto es algo que quizás debería considerar cuando intente obtener una buena profundidad en su sitio..
Muchos sitios que utilizan este efecto tienden a ser bastante pesados en imágenes, asegúrese de comprimir sus imágenes tanto como pueda (sin sacrificar la calidad). Si después de la compresión todavía se está demorando en cargarse, considere agregar un cargador a su sitio.
El desplazamiento de paralaje es uno de los efectos más queridos de los últimos tiempos y las personas están constantemente empujando los límites con él. Aquí hoy les he mostrado cómo configurar un sitio web básico que utiliza el desplazamiento de paralaje. La demostración que he mostrado hoy es un sitio relativamente simple para propósitos de aprendizaje. Para aquellos de ustedes que están a punto de crear un sitio con este efecto, les insto a dedicar tiempo al concepto y la historia, ya que esto es lo que los hace únicos, compartibles y, de hecho, un placer para navegar. Se trata de cómo puede utilizar este efecto de manera inteligente y no solo de usarlo por el simple hecho de usarlo..
Espero que haya disfrutado leyendo sobre el desplazamiento de paralaje y me encantaría ver cómo lo han utilizado en sus propios sitios, siéntase libre de dejar enlaces a ellos a continuación. Hasta la proxima vez!
