Animando listas con Stroll

stroll es un script experimental creado por Hakimel que no pretende tener ningún uso práctico, simplemente, se trata de un efecto visual que funcionará sólo en los navegadores más modernos ya que hace un uso intensivo de las nuevas propiedades de estilo tales como transiciones, transformaciones y perspectivas.

Lo que permite es aplicar una serie de efectos a las listas que utilizan la propiedad overflow para mostrar sólo una parte del contenido y que el resto sea accesible mediante el uso de una barra de scroll vertical.

No tiene muchas explicaciones y en realidad, no son necesarias, podemos descargar el demo desde github y allí tendremos todo lo necesario para aplicarlo en nuestros propios proyectos. Para eso, basta tener dos cosas: los estilos y el script.

Los estilos se encuentran en el archivo stroll.min.css o stroll.css (son iguales) y no es necesario agregarlos todos, basta seleccionar el efecto deseado y descartar el resto. Lo más simple es copiar las reglas y agregarlas a nuestra plantilla.

El script también tiene dos versiones stroll.min.js y stroll.js; podemos usar cualquiera de ellas y la agregamos como siempre, antes de </head>

¿Y cómo lo usamos? Basta colocar la lista dentro de algún DIV contenedor al que identificamos mediante un ID y luego, llamar a la función:

<div class="demo">
  <ul class="zipper">
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
  </ul>
</div>
<script>stroll.bind('#demo ul');</script>

Todos los efectos funcionan de la misma manera y se distinguen estableciendo el atributo class en al etiqueta UL; en esta entrada, hay tres ejemplos distintos: curl, helix y zipper.

Un último detalle extra a tener en cuenta: establecer las propiedades mínimas de las etiquetas UL y LI de la lista a la que vamos a aplicar el efecto; un ejemplo:

#demo ul {
  height: 280px;
  list-style-type: none;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
  position: relative;
  width: 190px;
}
#demo ul li {
  background-color: #B0B9C1;
  color: #000;
  font-size: 20px;
  padding: 10px;
  position: relative;
  z-index: 2;
}
#demo ul li:nth-child(odd) {
  background-color:#EEE;
}