Cada vez más sitios web utilizan efecto de paralaje, una característica basada en animaciones que responden al desplazamiento del usuario por la pantalla (de arriba abajo, de izquierda a derecha y al revés). Muchos desarrolladores web quieren sumarse al furor, pero la implementación de este efecto no es sencilla. Afortunadamente, existen herramientas como Skrollr que facilitan enormemente la tarea.

Skrollr es una biblioteca desarrollada en JavaScript para crear sitios web con paralaje que funcionen tanto en dispositivos de escritorio como móviles. Para hacerlo funcionar, sólo tenemos que indicarle cuándo y cómo animar los elementos HTML que deseemos a través del atributo  data-*. Por ejemplo, cuando el usuario haya bajado 500 píxeles desde el tope de la página le aparecerá una imagen, pero cuando baje 200 píxeles más, la imagen desaparecerá. Este efecto se codificaría así:

<img src="imagen.jpg" alt=”Imagen” data-500="display: block;" data-700="display: none;" >

Naturalmente, se pueden obtener animaciones más complejas, como las que se enseñan en un recomendable tutorial de Dev.Opera. Conozcamos las ventajas y las desventajas de esta herramienta.

Ventajas

• Facilidad de uso.
• Compatibilidad con versiones antiguas de Internet Explorer (ver skrollr-ie).
• Posibilidad de definir animaciones desde CSS en lugar de hacerlo desde HTML (ver skrollr-stylesheets).
• Compatibilidad con dispositivos móviles.

Desventajas

• En ciertos casos, puede ser difícil integrar las animaciones a un sitio web responsivo y que estas se vean bien en cualquier resolución. La solución ideal sería implementar las animaciones de Skrollr en CSS y aplicarles media queries, pero esto no es posible. Sí podemos generar varias hojas de estilo, con diferentes animaciones, y que el navegador cargue la correspondiente de acuerdo con las características del dispositivo; sin embargo, las propiedades CSS condicionales se aplican ante cada recarga de la página y no mientras vamos modificando el tamaño de la ventana (el comportamiento habitual en los sitios responsivos).
• No permite activar animaciones en función de desplazamiento horizontal.
• Requiere la instalación de jQuery, agregando más peso a nuestro sitio web.

Incluso con sus desventajas, Skrollr es una excelente solución para crear asombrosos sitios web animados.