Gracias a la tecnología, al diseño web y al avance del marketing digital, hoy es posible desarrollar y optimizar cualquier tipo de espacios. Por tanto, si deseas montarte en la ola de la actualidad digital, es momento de conocer a parallax, concebido como la última novedad en diseño web, mejor conocido como efecto parallax, una magistral herramienta para desbordar la creatividad y lanzar webs dimensionales memorables.
Indice De Contenidos
¿Qué es efecto parallax y cómo hacerlo?, ejemplos
Para saber qué es el efecto parallax, hay que remontarse al 2011, cuando nación esta grandiosa técnica web; el efecto parallax se conoce como paralaje, su boom sin duda alguna da fe de un antes y un luego en el mundo del diseño digital. Y desde entonces se ha ido renovando, de la mano de las tendencias en la internet, pues el parallax hoy día representa una pieza vital para el diseño web, por lo que llegó para quedarse.
Su utilidad marca la pauta al momento de idear un sitio, tal como veremos más adelante el efecto parallax ejemplos de algunas webs, pues representa una muy eficiente forma de agregar valor a un sitio, a través de sus efectos visuales al hacer scroll, esto es es, poder desplazar verticalmente una página web. Todo lo cual le propina un mágico efecto de pantalla realmente de ensueño.
Y pese a que idear un sitio con efecto parallax scrolling, supone un largo proceso largo y complejo, que por demás, vale acotar, que no puede ser desarrollado por cualquier, pues demanda el dominio de ciertos conocimientos avanzados de CSS, Javascript y diseño web. No obstante, no debes asustarte, pues también se debe agregar al respecto, que hoy día esta labor es más sencilla, gracias a los maravilloso plugins especializados en estos efectos.
Asimismo, aunado a la ayuda que representa el efecto parallax en la creación de webs, también se dispone de fuentes de estos efectos Parallax, a fin de permitir mejorar aún más el aspecto y forma de una página. Dentro de los más conocidos están:
ScrollMagic: un plugin de jquery, muy conocido y funcional, al tiempo que deja genera animación fundada en la posición del scroll; es decir, se pueden dejar elementos estáticos, movibles o animados, mientras recorres la pantalla, así como crear efecto parallax muy personalizados; es poco pesado; está bien documentado y cuenta recursos externos.
Skrollr: es un plugin muy simple y eficiente, no demanda saber de Javascript ni jQuery, ya que con HTML y CSS, se tiene lo necesario para operarlo. Requiere atributos informativos para poder animar algún elemento HTML, aunque vale acotar, que sus efectos durarán solo mientras el usuario haga scroll.
Page Piling: es un plugin de jQuery, con el que se pueden formar distintas capas para el diseño del website del que se trate, apilándose unas sobre otras. Al hacer scroll o ingresar a la URL, tiene lugar una animación deslizada. Este puede operar en todo tipo de plataforma y navegadores.
Stellar: también es de jQuery, y ue ideado para contribuir con la implementación de parallax scrolling; donde el movimiento de cada elemento, se puede establecer de forma individual, utilizando en él atributos de datos. Inclusive, se pueden generar fondos que se reposicionan al hacer scroll, y que retoman su posición original, al alcanzar cierto punto.
¿Efecto parallax?
El efecto parallax, como bien se adelantó es una maravillosa y útil práctica del diseño web, donde su fondo muestra una dinámica de diferentes ritmos, según su contenido. Y se obtiene como resultado, una silueta ilusoria en tercera dimensión al hacer scroll, lo que genera a su vez un efecto profundo que contribuye con el usuario a adentrarse en su contenido.
De tal forma, que el efecto parallax se fundamenta en una percepción visual; es decir, el ojo humano percibe los objetos aledaños a este más grandes de lo que realmente son, así como más lejos. Obteniendo al fin, una falsa sensación sobre los objetos más lejanos, que se mueven más lento que los que aquellos más cercanos.
Ejemplos de efecto parallax
Ahora, bien ya sabes que el efecto parallax es una técnica de ritmo y percepciones visuales, cuyo evento se fundamenta en dicha percepción, que a su vez se le conoce como paralaje, es decir, la posición de cualquier objeto en el área visual, cambia según el ángulo desde donde se vea. Aunque pudiera ser difícil definirlo, será mucho más fácil a través de ejemplos más ilustrativos, y lo compruebes por ti mismo:
- Toma un objeto, y colócalo a unos 2 tes. lejos de ti, puede ser un cuadro en la pared, o una ventana.
- Abre los brazos en cruz con el pulgar apuntando arriba.
- Cubre el ojo izquierdo, y ve la ubicación de tu pulgar, con relación al objeto de referencia tomado al fondo.
- Luego, cubre tu ojo derecho, y observa cómo se modifica la escena.
Esta ilustración, pone de manifiesto que este técnica de animación en parallax, no es nada nuevo, y que cualquier persona lo puede llevar a cabo en cualquier instancia; además, ya se aplicaba en cintas de animación y videojuegos de 1980. No obstante, su magia radica, en que de estos espacios saltó magistralmente a las páginas webs, siendo toda una sensación.
Para que te sumerjas en el mundo del efecto parallax, seguidamente se deja un conjunto de modelos de esta técnica; con el propósito de que recibas inspiración por alguno de ellos, e impongas tendencia en tu web. Veamos algunos gurús que usaron el efecto parallax en sus extraordinarias creaciones.
Mild Design
Emilie De Grosbois, es la idearia de Mild Design, a través de su exclusivo portafolio ofrece a sus usuarios y visitantes imágenes de extraordinaria belleza, que abarcan toda la pantalla. Cuyo logro, es gracias al efecto parallax, donde para ir de una a otra imágenes, su efecto no solo hipnotiza, sino que además adiciona profundidad, dando la impresión de que las imágenes se deslizan una sobre delicadamente.
Offf Tel Aviv
Por su parte, la página web del Festival OFFF 2019, ofrece al visitante una fascinante experiencia con su grandioso fondo rosa, el cual encanta con sus enormes letras y el movimiento que escurre. Posee igualmente, mucho movimiento, debido a la mezcla de animaciones y parallax.
Y al hacer scroll, estas se activan en forma de vídeos en loop, acompañados de diversos conferencistas y actividades alusivas al festival, además del magistral guiño de una cantidad de ojos que colocan el tilde humorístico e invitan al usuario a participar.
Chris Covert
También está la muy destacable página del CV online de Chris Covert, este ingenio aeroespacial, resulta todo un experto e innovador profesional. El diseño y el movimiento logran transmitir mucho de su personalidad, lo que no podía ser posible con una sosa lista de experiencia, habilidades y educación formal.
Ivy Chen
Ivy Chen no se queda atrás con el uso del parallax, ciertamente esta brillante ilustradora y diseñadora, logra creaciones con efectos inéditos en su portafolio digital. Donde sus creaciones se van develando paulatina y bellamente al hacer scroll. Esta creadora invita a adentrarse en sus distintos trabajos de forma inédita, pues cada boceto de su moda, se va convirtiendo delicadamente en una prenda real, y termina siendo una bella foto de moda en toda regla.
Industrial Jewellery
Otro tanto, ofrece el sitio web de Hila Rawet Karni, quien en sus diseños de joyas, emplea parallax a fin de propiciar interesantes diseños compuestas por numerosas capas. Esta autora, superpone fotos y letras unos sobre otros, haciendo espectaculares imágenes en movimientos suaves y lento, con algunos más rápidos, para dar el aspecto de cambio, además de formar nuevas composiciones al hacer scroll.
Inky Blue Animal Rescue
Esta adorable dama, también posee su página de Inky Blue Animal Rescue adorable, pues muestra una coherente galería de tonos formado por azules y neutros, que sin duda se vincula de forma muy natural al nombre de la ONG, sin dejar de lado el excelente uso del movimiento. Su página muestra al lado superior una enormes fuentes en mayúscula con el nombre de la ONG atravesando toda la pantalla.
Hana Knizova
Por su parte, el sitio web de notable fotografía de Hana Knizova, tiene como atributo principal sus fondos en movimientos, todo ello debido también al efecto parallax. Sus fotos de la página de inicio, representan una introducción a sus proyectos, así como a sus diversas especialidades, que abarca la fotografía editorial hasta el retrato. Sus imágenes se replican, igual al menú del sitio, generando un peculiar sistema de navegación interno, donde cada foto lleva a otra distinta.
Hotel Vale das Nuvens
Pasar por los modelos de efecto parallax, sin nombrar a Nuvens, un ecohotel de Brasil, es dejar de lado a un icono de la web, pues su web se compone de cuantiosas y llamativas franjas horizontales con efecto parallax. Donde cada una de estas bandas dispone de un llamado a la acción distinto, acompañado de una extraordinaria imagen o vídeo de las instalaciones del hotel. Además, las letras reflejadas al centro de cada franja, tiene movimiento a ritmos distintos al fondo, logrando así, un suave y agradable efecto visual.
Karlie Kross
Esta sitio web de Karlie Kros, posee un bello diseño, lujoso y pulcro, el modelo ideal para esta supermodelo. Su diseño pretende la simplicidad, haciendo uso de tonos blancos, grises y negro, adicional a una abundante cantidad de área blanca en forma de texto. Al mismo tiempo, logra combinar su elegante línea con pequeños tildes, que la alejan una imagen ordinaria. Posee delicados detalles rosa, una fuente negra con mucha presencia, y una sensación de movimiento de parallax, así como un vídeo en loop.
Frankie Retford
Esta diseñadora, posee una página personal, y otra para nómada digital Frankie Ratford, la misma rebosa de color, alegría y energía. El extremo superior del sitio resalta por poseer distintos fondos en movimiento, gracias al efecto parallax, donde Frankie se muestra inmóvil retratada encantadoramente. De igual forma, a sus espaldas, se exhibe su nombre deslizándose hacia arriba, seguido de su breve biografía que repite el mismo patrón.
Cómo usar el efecto parallax en tu sitio Wix
Enseguida se dejan los pasos para poner en marcha el efecto parallax en tu propio sitio web Wix, con la posibilidad de emplear bandas con fotos, matices o vídeos de fondo que más te gusten. Debiendo resaltar que, combinando algunas de las franjas, se enriquecerá mucho más este efecto.
Activar el desplazamiento parallax en una franja
Lo prometido es deuda, enseguida se abren las opciones para activar el efecto parallax, que cómo podrás observar, son muy sencillos:
- Para activar este modo, solo debes ingresar al Editor, pinchar en Agregar, a la izquierda, y después en Franjas.
- Pinchar en Cambiar el fondo de la franja, en esta opción ya puedes modificar el fondo por el tono, imagen o vídeo elegido.
- Luego pinchar en Configuraciones sobre la franja, una vez entres, hacerlo en Efectos de desplazamiento, allí selecciona el efecto que mejor desees, como pueden ser Parallax, Revelar, Zoom-in o Aparecer.
- Comprobar su funcionamiento en vista preliminar, y concreta los cambios de ser necesario.
Plantillas con efecto parallax
Además de las indicaciones anteriores, puedes optar por una plantilla que tenga incorporado el efecto parallax en su diseño, pudiendo adaptar la misma a tus requerimientos particulares. A continuación, tienes 3 plantillas como modelo, para mostrarte cómo puedes iniciarte, pero también puedes seleccionar en la página de plantillas, aquella que sientas que se identifica contigo:
- Panadería: es una plantilla muy útil, que posee algunas franjas que ocupan toda la pantalla con su movimiento parallax; donde el cinemagraph reflejado en su tercera línea, que por demás, agrega más sensación de movimiento.
- Let’s Play: por su parte, este modelo se compone de diversos fondos con efecto parallax, lo cual logra generar una sofisticada visual a través de su fondo en degradé, que cambia de tono, y otro con un texto inmóvil.
- Estilismo: este tipo de plantilla es ideal y muy usada en estilismo de moda, pues con el scroll, se activa un conjunto de efectos en el sitio web, apreciándose 2 velocidades mientras transcurre el desplazamiento vertical.
Si te gustó este tópico, puedes leer también: