Post Actualizado en julio 25, 2013


Que es el efecto parallax y como aplicarlo en tus siguientes sitios

  Muchos me han preguntado acerca de una tendencia web que se esta dando en estos momentos en muchos sitios. Esta tendencia se basa en un efecto hecho por algunos plugins y se llama parallax, y es un recurso que ha ido ganando adeptos desde ya hace algún tiempo.   Para los que no sepan […]

 

Muchos me han preguntado acerca de una tendencia web que se esta dando en estos momentos en muchos sitios. Esta tendencia se basa en un efecto hecho por algunos plugins y se llama parallax, y es un recurso que ha ido ganando adeptos desde ya hace algún tiempo.
 

Para los que no sepan el efecto Parallax se basa en mover los elementos de un sitio web a distintas velocidades mientras se hace una acción, comúnmente al hacer scroll.

 

Tal vez muchos no habian escuchado aún el término Parallax, pero era cuestión de tiempo para que lo comiencen a conocer, ya que estamos sentando las bases del futuro en cuanto al dinamismo que puede tener un sitio web si necesidad de flash, y aquí es donde entra el Parallax scrolling.


Este efecto tiene ciertas características, por ejemplo:

  • Se hace uso de múltiples backgrounds para dar el efecto de varias ventanas
  • Siempre comienza con un background fijo
  • Se pueden agregar ciertos efectos adicionales como blur o autoplay video
     

Cada día estamos observando más sitio utilizando este efecto en mayor o menor medida, según los intereses de cada uno.

 

Para los que no conozcan el efecto es básicamente cuando un sitio o animación tiene sentido de capas con diferente profundidad en cada una y con una transición de tiempo diferente, dándole un efecto de "delay" que hace que sea muy atractivo a la vista del usuario.

 

Supongo que a estas alturas ya muchos de ustedes se han enterado de la decadencia de herramientas como flash y silverlight para el desarrollo de sitios web dinámicos; las nuevas librerías y lenguajes como HTML5, jQuery, CSS3, Json, entre otros, están convirtiéndose en estándar para el desarrollo y una excelente alternativa para que los nuevos sitios sean interesantes y dinámicos sin recurrir a trabajos pesados e incluso sin tanto peso del mismo.

 

Muchas compañías como Nike, Smart y Nintendo, están recurriendo a este tipo de efectos para crear una interacción con el usuario y hacer que permanezca en la página mucho más tiempo y crear el engagement.

 

Algunos ejemplos de páginas que ya están usando esta dinámica son: NIKE, Adidas, entre otras.


Como lo comentamos anteriormente, para crear este efecto son necesarios algunos plugins para dar vida. El inconveniente que atrae este tipo de sitios es que depende en casi su totalidad de que JavaScript este activo en los dispositivos, y esto es una posible desventaja, ya que recordemos que hasta hace algunos años los propios browsers le dieron la posibilidad al usuario de activar o desactivar javascript en sus navegadores según sus necesidades.

 

Scrolling parallax – http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

jParallaxhttp://stephband.info/jparallax/index.html

jQuery Scrollhttp://www.davecranwell.com/content/jquery-scroll-parallax-plugin

Parallax Sliderhttp://tympanus.net/codrops/2011/01/03/parallax-slider/

3D Parallax effecthttp://codecanyon.net/item/freshd-3d-parallax-jquery-plugin-with-editor/625587?ref=pxcr&ref=pxcr&clickthrough_id=64931990&redirect_back=true