Parallax y Materialize 2
- Autor: Moisés Yanes Carballo
- Fecha: 15/12/2016
Introducción
El parallax scrolling es una técnica de diseño web que permite animar con movimientos todos los elementos de una página, al mismo tiempo o por separado, mientras te desplazas en ella haciendo scroll. Este efecto se logra colocando todos los elementos de una web por capas, así si quieres mover solo el texto y dejar estático el fondo lo puedes hacer. Además, ofrece al usuario una experiencia mucho más enriquecida y atractiva a la vista mientras navega por la web reteniéndolo más tiempo que quizá una web habitual. Sin embargo, hay que tener en cuenta que esta tecnología suele utilizar imágenes grandes, con lo cual hay que saberlas comprimir bien para mantenerla ligera de carga. Por otro lado, dado que existen dos tipos de scroll, el vertical y el horizontal, nos encontramos con dos tipos de parallax, aquellas en el que la transición de pantallas se hace a través de un movimiento vertical y las que se suceden en movimiento horizontal. La más común es el efecto de scroll vertical.
Factores a tener en cuenta
Para que una web con parallax scrolling funcione correctamente, debemos tener en cuenta varios factores:
Usabilidad
Este tipo de webs suelen tener más elementos que las páginas creadas tradicionalmente, ya que por norma general engloban todas las secciones dentro de una única página, y por lo tanto, éstas tardan bastante en cargarse dentro de la misma web. Para solucionar este problema, recientemente se ha creado una forma de hacer una primera carga de la página donde se muestra la parte inicial del contenido, y mientras se hace scroll, se va descargando el resto en segundo plano.
Analítica
El hecho de que las webs con efecto parallax se estructuren en una única página, hace difícil que se saquen análisis de calidad en cuanto a las visitas, secciones más relevantes, porcentaje de rebote, etc…, ya que el único de estos indicadores de “calidad web” que podría ser medido es el de tiempo de permanencia en la web. Pero no todo son malas noticias, pues hay varios puntos clave dentro de una web que sí pueden ser medidos y que en este tipo de páginas se suelen incluir, como pueden ser los formularios, tanto de descarga de materiales como de contacto, o los vídeos, los cuales pueden ser una fuente de publicidad viral muy importante que nos haga llegar mucho tráfico a nuestra página web.
Enlaces Tutoriales
A continuación tenemos los enlaces al tutorial presentado en clase, así como a las demos realizadas. En ellos se describen los pasos necesarios a seguir para poder llevar a cabo el efecto parallax en cada una de sus formas:
Tutorial Completo Parallax
Ejemplo ParallaxVertical
Ejemplo ParallaxHorizontal
Ejemplo Parallax y Materialize