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.
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.
Reviewed by Marcos Rivas Rojas
on
martes, mayo 15, 2012
Rating:
