En la publicación de hoy vamos a echar un vistazo detallado a una de las mayores tendencias del diseño web (y por lo tanto del diseño de temas de WordPress) de los últimos años: el paralaje .
Vamos a definir qué es el paralaje en teoría, qué es dentro del diseño web y por qué alguien podría querer usarlo; acompañado de algunos excelentes ejemplos implementados por talentosos diseñadores/desarrolladores.
Luego, repasaremos varias formas diferentes en que cualquiera puede implementar el efecto de desplazamiento de paralaje en su sitio web de WordPress, ya sea mediante el uso de código, complementos o el propio generador de páginas Divi de Elegant Theme .
“Parallax” es la palabra que se usa para describir la diferencia en la posición aparente de un objeto cuando se ve desde dos puntos de vista diferentes. Un buen ejemplo de esto, tomado de Wikipedia , es la posición aparente de la aguja del velocímetro en un automóvil.
Cuando se ve directamente de frente, la velocidad puede mostrar exactamente 60; pero cuando se ve desde el asiento del pasajero, la aguja puede parecer que muestra una velocidad ligeramente diferente, debido al ángulo de visión.
¿Qué es un efecto de desplazamiento de paralaje?
En el diseño web, el paralaje (como se describe anteriormente) es realmente solo un «efecto especial». Una ilusión óptica lograda mediante la animación de múltiples capas de imágenes de fondo y primer plano a diferentes velocidades para dar la impresión de profundidad. Las variaciones resultantes en el punto de vista de un usuario a medida que se desplaza por estas imágenes es lo que llamamos «el efecto de desplazamiento de paralaje».
¿Por qué usar Parallax en el diseño web?
Hasta la fecha, el paralaje ha sido ampliamente considerado como una mera tendencia de diseño web. Algo estéticamente agradable, pero en última instancia innecesario. Muchos, particularmente entre la comunidad de diseño, han expresado su frustración por la popularidad y longevidad del paralaje. Están esperando ansiosamente el día en que el público en general (es decir, clientes y clientes) deje de estar enamorado de él y se desvanezca silenciosamente en el pasado de Internet.
Personalmente, todavía estoy un poco intrigado con el paralaje. Como con la mayoría de las cosas, creo que hay un punto medio que se puede encontrar. No soy un fanático del paralaje extremo y/o sin sentido por sí mismo, pero al mismo tiempo no puedo evitar sentirme impresionado y de alguna manera sumergirme más profundamente en el contenido que «usa bien el paralaje». Algo que todavía no estoy seguro de cómo definir claramente, pero sin embargo “lo sé cuando lo veo”. Otra frase que tiende a molestar a los tipos creativos. Yo mismo incluido.
Sin embargo, dicho todo esto, he observado una especie de regla general que se aplica a la tecnología creativa y las tendencias que pueden explicar (en parte) por qué el paralaje tiene el poder de permanencia que tiene. Es algo que exploré bastante profundamente en una publicación anterior aquí en el blog de temas elegantes.
Esa regla general es esta:
Cualquier forma novedosa de comunicación se utiliza al principio por sí misma, porque es diferente e interesante. Pero con el tiempo la novedad se desvanece y, si el objetivo es la adopción generalizada a largo plazo, debe encontrar un nicho utilitario para llenar; algo útil lo hace mejor que otras alternativas.
¿Existe tal instancia en la que el efecto de desplazamiento de paralaje cumpla un papel utilitario en el diseño web y/o la creación de contenido mejor que todas las otras alternativas? Creo que sí. De hecho, puede haber varios. El primer y más obvio ejemplo que me viene a la mente es cualquier instancia en la que el propio efecto de desplazamiento de paralaje ayuda a iluminar la información que se comparte.
Creo que los primeros dos ejemplos en la sección a continuación prueban este punto bastante bien. En cada caso, el paralaje se usa en diversos grados (con otras técnicas de diseño) para lograr una experiencia más inmersiva que comunica hechos/datos de una manera agradable. Algo así como una exhibición interactiva en un museo de ciencias que utiliza una actividad divertida para cimentar la lección en la mente del visitante.
Los primeros dos sitios web en la sección a continuación son excelentes ejemplos de este caso de uso en acción.
Grandes ejemplos del efecto Parallax en acción
Hay innumerables ejemplos de parallax en el diseño web que podrían mostrarse en esta sección. Elegí los ejemplos que hice porque, para mí, representan casos en los que el uso del efecto de paralaje realmente mejora la experiencia general y ayuda a contar una historia o explicar hechos de una manera más impactante.
motores tesla
En este ejemplo, el efecto de desplazamiento de paralaje se usa con moderación pero con un gran efecto. Es uno de los muchos elementos de diseño inteligente que se utilizan para convertir una mera página de preguntas frecuentes en una historia convincente sobre cómo hacer un viaje en un vehículo Tesla.
Visitar sitio
Aguja Espacial
En el sitio web de Space Needle, puede usar el desplazamiento de paralaje para viajar más de 605 pies hacia arriba de la aguja y aprender cosas divertidas para hacer en Seattle en el camino.
Visitar sitio
chico del juego
En este sitio, puede usar el desplazamiento de paralaje para desplazarse por algunos tetris al estilo de la vieja escuela para el 25 cumpleaños de Game Boy.
Visitar sitio
sony
Como parte de la campaña Be Moved de Sony, crearon este sitio web para contar una historia convincente con desplazamiento de paralaje.
Visitar sitio
Autopista uno
En el sitio web de Highway One, puede usar el desplazamiento de paralaje en la intersección de la narración y el juego.
Visitar sitio
Cómo crear un efecto de paralaje en WordPress con código
Cuando se trata de crear un efecto de paralaje en WordPress con código, tiene algunas opciones. Puede agregar un tipo de publicación personalizada de paralaje a su tema existente, como se muestra en este tutorial de Andrei de Wevo Studio , o puede crear su propio tema con páginas que usan una plantilla de página de paralaje personalizada de su propio diseño.
Sin embargo, con toda honestidad, a menos que esté desarrollando su propio tema o simplemente quiera practicar el desarrollo de paralaje, probablemente sea mejor que use uno de los complementos a continuación o un tema que ya viene con páginas de paralaje. El tutorial al que he vinculado anteriormente literalmente hace exactamente lo mismo que muchos de los complementos a continuación. La principal diferencia es que con un complemento, el trabajo duro ya está hecho.
Si realmente está buscando una buena práctica de desarrollo con parallax, también debería consultar los siguientes tutoriales:
- Cómo crear un sitio web de desplazamiento de paralaje
- Tutorial de desplazamiento de paralaje simple
- Sitios web puros de CSS Parallax
- Una técnica simple de desplazamiento de paralaje
Complementos de efecto de paralaje para WordPress
Si usar el código anterior no es algo que pueda hacer, que no le resulte cómodo o que simplemente no le interese, existen varias opciones de complementos para los usuarios de WordPress. He incluido cuatro complementos diferentes a continuación, tanto premium como gratuitos, que deberían permitirle crear publicaciones y páginas de paralaje en poco tiempo.
Complemento de WordPress Parallax One Page Builder
El único complemento premium en esta breve lista, Parallax One Page Builder, está diseñado para ayudar a cualquier persona a crear páginas de desplazamiento de paralaje con cualquier tema. Viene con varios efectos, capacidad de galería y cartera, herramientas de SEO personalizadas y mucho más.
Precio: $22 | Más información y descarga
Pergamino de paralaje
El complemento Parallax Scroll utiliza un tipo de publicación personalizada de desplazamiento de paralaje para permitir que cualquier persona cree publicaciones o páginas con elementos de paralaje.
Precio: GRATIS | Más información y descarga
Parallax Gravity – Creador de páginas de destino
Parallax Gravity está diseñado para crear páginas de destino. Entonces, si bien esto no le permitirá agregar elementos de paralaje a sus publicaciones/páginas existentes, puede crear nuevas páginas de destino con elementos de paralaje en ellas.
Precio: GRATIS | Más información y descarga
Motor de historias de Esopo
Con Aesop Story Engine, el paralaje es solo uno de varios módulos de narración disponibles para su uso. Usado junto con un tema oficial de Aesop o cualquier tema que ejecute el script de compatibilidad de Aesop (que se puede encontrar en la página del complemento vinculada a continuación), cualquiera puede incluir elementos de paralaje en sus publicaciones o páginas de formato largo.
Precio: GRATIS | Más información y descarga
Cómo crear un efecto de paralaje en WordPress con Divi
Si es un usuario de Divi, como estoy seguro de que muchos de ustedes lo son, entonces puede incluir elementos de paralaje en literalmente cualquier página que elija crear utilizando el generador de páginas integrado de Divi.
Así es cómo:
Primero, asegúrese de que cualquier página o publicación que esté creando esté en modo de creación de páginas.
A continuación, haga clic en el botón de configuración para cualquier sección de fondo.
Serás llevado a una pantalla como esta. Si te desplazas hacia abajo, tendrás la opción de habilitar el paralaje. Puede elegir entre CSS o JavaScript verdadero parallax con el simple clic de un botón.
Cuando haya establecido su preferencia, simplemente haga clic en Guardar en el módulo de configuración, guarde el borrador en la página y luego obtenga una vista previa. Si no está familiarizado con el aspecto de este efecto con Divi, consulte la demostración de divi para ver varios ejemplos.
En conclusión
Parallax, nos guste o no, no parece desaparecer pronto. Sin embargo, a medida que pasa el tiempo, creo que verlo hecho en una página solo por el hecho de tenerlo allí ciertamente se desvanecerá. Lo que veremos en su lugar son instancias de buen gusto de parallax, utilizadas junto con otras técnicas de diseño, para lograr una experiencia de usuario superior.
En la publicación de hoy, aprendimos cómo agregar este tipo de paralaje a nuestros sitios web de WordPress a través de código, complementos y mediante el generador de páginas Divi. Si tiene algo que agregar o comentar, nos encantaría leer sus pensamientos en los comentarios a continuación.
Miniatura del artículo de Bloomua / Shutterstock.com