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

Scroll-Effects

Esto es algo que vi hace unas horas y que quiero compartir con todos los desarrolladores Web que les gusta hacer algo diferente, y es que encontré una sorprendente, librería llamada Scroll-Effects para aplicar efectos visuales muy lindos  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 tiene como colaborador a  Paul Irish y Felix Gnass. Han publicado en una página de demostración donde pueden verse en directo los 11 efectos que hay implementados hasta ahora.

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:  CURL (CSS 3D), WAVE,  FLIP (CSS 3D),  FLY (CSS 3D)

El proyecto consta de tres Factores:

  • 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.

Algo bueno es que el CSS está muy bien organizado. hay que especificar el comportamiento de los elementos de la lista en sus tres estados: normal, past y future.te dejo la fuente de donde se puede conocer más sobre este Scroll-Effects

Fuentes: