Las webs con alto contenido visual son cada vez más utilizadas por las empresas, optan por dar un toque publicitario y creativo a sus páginas, independientemente de su contenido.
¿Qué son las webs con parallax, o mejor dicho, el “efecto Parallax»?
El efecto Parallax es un efecto que se produce cuando realizamos scroll (o desplazamiento) en la ventana del explorador, y tenemos una sensación de movimiento y casi de vida de los elementos, creando una ilusión de profundidad.
Este efecto se consigue moviendo diferentes capas e imágenes a distintas velocidades, a través de código javascript, HTML5 y CSS3. Los objetos más cercanos se mueven un poco más rápido.
El efecto Parallax se produce con cualquier scroll vertical, horizontal e incluso multidireccional (vertical y horizontal).
Hay que destacar que los orígenes de este efecto los encontramos en las interfaces de los videojuegos de los años 80, popularizados por empresas como Nintendo con juegos tan familiares como ‘Super Mario Bross’ o ‘Donkey Kong’.
A la derecha ‘Final Fight’ de la empresa Capcom.
¿Qué mejoras o ventajas tiene este efecto?
Por un lado, aumenta la interactividad con el usuario, mejora la presentación y creatividad de los contenidos en las páginas, y se hace más divertida la experiencia en el navegador.
Además algo muy importante, consigues que el usuario de un vistazo pueda comprobar los contenidos existentes de la web, obteniendo una visión global mucho más rápida sin necesidad de clics.
No hay nada mejor que un ejemplo, y aquí te dejamos tres desarrollos de empresas que además se adaptan a cualquier plataforma. Haz clic sobre la imagen para ver su funcionamiento.
-
- Con SCROLL VERTICAL Stardust de qodeinteractive
-
- Con SCROLL HORIZONTAL Acid de themevillage
-
- Con SCROLL MULTIDIRECCIONAL (vertical y horizontal) Multidreccional de designova
¿Qué desventajas puedo encontrar?
Una muy simple, el tiempo de carga. Al utilizar imágenes e incluso vídeos de fondo (background), tienes que tener muy claro que debes utilizarlos los más optimizado posible para ajustar este tiempo de carga.
¿Cómo puedo integrar el efecto parallax en mi web?
Si quieres aprender a usarlo, a modo resumen tienes que desarrollar y diseñar tu web en bloques, utilizar CSS3 y javascript.
En este enlace (haz clic en la imagen) te puedes descargar un ejemplo (GNU GPL de Licencia libre) y usar los javascripts del autor citando las condiciones.
SCROLLORAMA de @johnpolacek
También puedes usar plugins para implementar en tu wordpress, y crear sliders con el mismo efecto de parallax.
Algunos como WP Parallax Content Slider (haz clic en la imagen) son muy sencillos de usar.
Y QUIZÁS TAMBIÉN TE INTERESE: Proteger su Wordpres… al menos un poco.
