JMiur [E]

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.

  • uno
  • dos
  • tres
  • cuatro
  • cinco
  • seis
  • siete
  • ocho
  • nueve
  • diez
  • once
  • doce
  • trece
  • uno
  • dos
  • tres
  • cuatro
  • cinco
  • seis
  • siete
  • ocho
  • nueve
  • diez
  • once
  • doce
  • trece
  • uno
  • dos
  • tres
  • cuatro
  • cinco
  • seis
  • siete
  • ocho
  • nueve
  • diez
  • once
  • doce
  • trece

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;
}

3 comentarios:

Emanuel  

ESTA MUY BUENO!!!!!
Se ve genial y divertido

lastima que no funcione en internet explorer

Responder
mariela cosme  

holaa recien me a pasado una ayudaa
:( puse en mi blog en practica tu post que desia de incrustar el buscador de youtbe pero siempre que entro mi blog me lleva a casi el final y siempre que recargo el blog me lleva al final :(

porfis ingresas a mi blog ahi te llevara al finl :(

http://pdulceamor.blogspot.com/

JMiur  

No veo ningún buscador de YouTube.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR