{"id":31633,"date":"2024-11-12T12:39:32","date_gmt":"2024-11-12T12:39:32","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31633"},"modified":"2025-03-18T14:06:45","modified_gmt":"2025-03-18T14:06:45","slug":"parallax-efecto-de-diseno","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/parallax-efecto-de-diseno","title":{"rendered":"Parallax (efecto de dise\u00f1o)"},"content":{"rendered":"

\u00bfQu\u00e9 es el efecto parallax o parallax scrolling?<\/span><\/h2>\n
\n
\"Efecto<\/a> <\/p>\n
Imagen:<\/b> Efecto Parallax – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

El efecto parallax, paralaje, parallax scrolling o desplazamiento parallax es una t\u00e9cnica visual que se utiliza en dise\u00f1o web para crear una impresi\u00f3n de profundidad.\n<\/p>\n

B\u00e1sicamente, hace que el fondo de una p\u00e1gina web se mueva m\u00e1s lento que el primer plano mientras se produce un desplazamiento, creando una ilusi\u00f3n de tridimensionalidad en un sitio bidimensional.\n<\/p>\n

Inicialmente conocido como \u00abparallaxing\u00bb, este efecto se origin\u00f3 a partir de una t\u00e9cnica de c\u00e1mara en multiplano introducida en la animaci\u00f3n durante la d\u00e9cada de 1930, en la que se utilizaban varias capas o planos, cada uno de los cuales se mov\u00edan a una velocidad diferente pero en la misma direcci\u00f3n que las dem\u00e1s. De este modo, la capa que se mov\u00eda m\u00e1s r\u00e1pido era la que se percib\u00eda m\u00e1s cercana a la c\u00e1mara.\n<\/p>\n

Por ejemplo, el parallaxing fue la t\u00e9cnica empleada en algunas pel\u00edculas de Walt Disney como Blancanieves, Bambi o Fantas\u00eda para crear una ilusi\u00f3n de movimiento y profundidad.\n<\/p>\n

Posteriormente, despu\u00e9s de 1980, este m\u00e9todo se aplic\u00f3 a los gr\u00e1ficos de computadoras en 2D y videojuegos, especialmente en los de Arcade. A partir del 2011, el efecto parallax tambi\u00e9n se implement\u00f3 en el dise\u00f1o web con el HTML5<\/a> y la codificaci\u00f3n CSS3 para mejorar la experiencia de uso y crear webs m\u00e1s atractivas que atrajeran al p\u00fablico.\n<\/p>\n

Efecto parallax en HTML5 y CSS<\/span><\/h2>\n

Para implementar el efecto parallax en un sitio web con HTML5 y CSS, se utiliza un elemento contenedor a la hora de dise\u00f1ar el sitio web. Luego, se le asigna una clase (class) al contenedor y se agrega una imagen de fondo con una altura espec\u00edfica.\n<\/p>\n

Las propiedades de la clase en CSS ser\u00edan:\n<\/p>\n

<style>\r\n\/* La clase contenedor *\/\r\n.parallax {\r\n\/* La imagen usada *\/\r\nimagen-fondo: url(\"parallax.jpg\");\r\n\r\n\/* Establecer la altura *\/\r\nheight: 500px;\r\n\r\n\/* Crear el efecto parallax *\/\r\nbackground-attachment: fixed;\r\nbackground-position: center; \r\nbackground-repeat: no-repeat;\r\nbackground-size: cover; \/* escalar la imagen hasta cubrir todo el contenedor *\/\r\n}\r\n<\/style>\r\n\r\n<body>\r\n\r\n<!-- Elemento contenedor dentro del documento HTML -->\r\n\r\n<div class=\"parallax\">\r\n<div>Contenedor con contenido adicional\r\n\r\n<\/body><\/pre>\n
En este caso, el atributo \u00abbackground-attachment: fixed\u00bb fija la imagen al fondo, creando el efecto de paralaje, mientras que el resto de propiedades se usan para centrar y escalar la imagen. Alternativamente, se puede especificar la altura de la imagen de fondo con porcentajes.\n<\/p>\n
El efecto parallax no es adecuado para sitios web m\u00f3viles<\/span><\/h2>\n
Si bien el efecto parallax puede mejorar en gran medida la apariencia visual de la versi\u00f3n de escritorio de un sitio web, no es tan efectivo en dispositivos m\u00f3viles. Esto se debe a que las im\u00e1genes de los sitios web de escritorio que se emplean para generar el efecto parallax son de gran tama\u00f1o y no se pueden visualizar correctamente en smartphones o tablets.\n<\/p>\n
Adem\u00e1s, su uso en dispositivos m\u00f3viles puede incrementar los tiempos de carga web y, si una p\u00e1gina no carga r\u00e1pido, la audiencia se ir\u00e1 sin importar cu\u00e1n atractivo sea el dise\u00f1o. De hecho, el promedio de espera se sit\u00faa en torno a los 3 segundos, pasado este tiempo la mayor\u00eda de las personas abandonan la site.\n<\/p>\n
Todo esto sumado al hecho de que quienes navegan desde sus m\u00f3viles generalmente tienen periodos de atenci\u00f3n m\u00e1s cortos y un tiempo de interacci\u00f3n limitado, crea un escenario inadecuado para la integraci\u00f3n de un efecto parallax.\n<\/p>\n
Por otro lado, como el dise\u00f1o de parallax requiere c\u00f3digos avanzados, puede causar problemas de rendimiento significativos en smartphones y tablets como: movimientos entrecortados o fallos en el mismo navegador.\n<\/p>\n
Por estos motivos es que los sitios web que utilizan el desplazamiento de paralaje suelen proporcionar versiones simplificadas para dispositivos m\u00f3viles.\n<\/p>\n
Su aplicaci\u00f3n en storytelling<\/span><\/h2>\n
El desplazamiento parallax ofrece un enfoque lineal y fluido ideal para emplear en el storytelling, puesto que permite generar historias m\u00e1s v\u00edvidas e interactivas en la web. De hecho, es capaz de proporcionar una variedad de mensajes con mucha sutileza. Por ejemplo, se puede usar para visualizar la creaci\u00f3n de un producto desde el dise\u00f1o inicial hasta la fabricaci\u00f3n y su posterior uso de una manera m\u00e1s atractiva.\n<\/p>\n
Adem\u00e1s, el storytelling no resulta tan efectivo cuando se realiza a trav\u00e9s de diversas p\u00e1ginas, ya que es m\u00e1s probable que la audiencia pierda su inter\u00e9s en leer el contenido, si tienen que navegar por diversas p\u00e1ginas. En cambio, con el dise\u00f1o del efecto parallax, las personas pueden tomar el control de la lectura y disfrutar de la historia a su propio ritmo de principio a fin.\n<\/p>\n
De esta manera y, considerando que las distintas capas responden de manera diferente a la forma en que el p\u00fablico se desplaza por la p\u00e1gina, crea una sensaci\u00f3n de profundidad que sumerge m\u00e1s en la lectura a los y las usuarias y adem\u00e1s, incluso permite contar m\u00e1s de una historia.\n<\/p>\n
Ejemplo del efecto parallax<\/span><\/h2>\n
En este excelente ejemplo de efecto parallax podemos observar c\u00f3mo se suporponen las diferentes capas para crear una sensaci\u00f3n de profundidad sobre un plano que, en realidad es est\u00e1tico:\n<\/p>\n
\"Ejemplo\n<\/p>\n
Captura de pantalla de matthew.wagerfield.com<\/a>, que muestra un ejemplo de efecto parallax.\n<\/p>\n
Ampliar conocimientos<\/span><\/h2>\n