HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Scroll-Effects: librería de efectos CSS3 para el desplazamiento en listas

Acabo de descubrir, por un retweet de @minid, una espectacular librería llamada Scroll-Effects para aplicar efectos visuales muy guapos a listas de elementos que tienen barra de desplazamiento, utilizando CSS3 y un poquito de Javascript.

Su autor es Hakim El Hattab, aunque también han echado una mano Paul Irish y Felix Gnass. Han publicado una página de demostración donde pueden verse en directo los 11 efectos que hay implementados hasta ahora.

Scroll-Effects Demostración de algunos efectos creados con Scroll-Effects.

La idea es, dada una lista de elementos que tiene una barra de desplazamiento (o scroll), conseguir que el usuario pueda moverse por ella y los elementos aparezcan/desaparezcan con efectos visuales. Los hay de todo tipo: distorsiones, volteos, apariciones, 3D…

El proyecto consta de tres partes:

  • El HTML, con las correspondientes listas de elementos sobre las que aplicar los efectos visuales.
  • Un fichero Javascript. Es un script de apenas 70 líneas de código que se encarga de aplicar diferentes clases a los elementos de las listas, dependiendo de su posición relativa al scroll.
  • El código CSS, el encargado de aplicar el estilo, los efectos y las transiciones a los elementos.

Por si te da por probarlo, verás que el CSS está muy bien organizado. Tiene algunos estilos generales aplicables a cualquier lista y después la definición de cada uno de los efectos. Para cada uno de ellos, hay que especificar el comportamiento de los elementos de la lista en sus tres estados: normal, past y future.

Enlaces: