Cómo crear efectos de scroll animados con CSS

martes, mayo 15, 2012
COMPARTE EL POST

Cómo crear efectos de scroll animados con CSS

El usuario de github hakimel ha creado una forma de hacer scroll a una serie de elementos para darle un efecto conforme vamos bajando o subiendo. El efecto, o más bien, los efectos que ha creado los pueden checar en su demo.

Nosotros vamos a usar sus librerías para darle un toque diferente, ya que si pueden ver el el efecto lo ha implementado como lista de elementos, así que nosotros vamos a centrarnos en efectos de scroll animados con CSS pero aplicado a páginas completas, como lo que vamos a ver a continuación.

Demo de este tutorial

Descargar archivos

HTML

Lo que tenemos que saber es que para la implementación usaremos el elemento <li> para seguir la estructura que creó el autor, aunque en realidad ya que está todo en css podríamos usar propiamente capas para contener cada página, y no un <li>.

Para nuestro caso lo que tenemos es un <ul> con una clase que lleva por nombre el nombre del efecto que queremos aplicar. Para el tutorial y le añadí una capa al contenido para que saliera centrado, y que no se esparza en todo el ancho de nuestra página.

CSS

En cuanto a CSS tenemos en los archivos que hay dos partes de código, la que uso para armar el tutorial y la que uso para construir en si el sistema de páginas para que el efecto funcione. Recordemos que en teoría se usa el efecto para una lista de elementos, pero podemos ampliar esta abstracción y haciendo que la navegación sea llamativa igualmente.

Lo que quiero recalcar es que el último estilo es para poder aplicar los estilos a aquellos elementos que sean pares e impares, como una forma de cambiar el color de fondo alternándolos, lo que podrían hacer ustedes sería tener un estilo para cada página que tuvieran. Otra cosa, podemos cambiar el efecto de nuestro scroll en la etiqueta <ul>, así que podemos colocarle cualquier efecto que esté disponible tan sólo cambiando la clase referenciada.

En esta ocasión no usamos jQuery para hacer nada, sin embargo tenemos que añadir el archivo para que el efecto sirva, así como un pequeño script para poder echar a funcionar todo.

Lo primero es una referencia a un archivo css por lo que necesitamos ponerlo en nuestro header

Y por último hasta el final de nuestro documento, antes de que empiece el cierre de nuestra etiqueta body tenemos que añadir un pequeño script, para decirle qué capa es la que va a tener el efecto.

Demo de este tutorial

Descargar archivos

¡Síguenos en Twitter!


Deja tu comentario