Con esta librerÃa podremos hacer webs o portafolios dándoles un bonito efecto de slide entre sección y sección. Está basado en prototype y scriptaculous y es bastante simple de entender como funciona, para implementarla primero descargamos el .rar dentro del cual se encuentra un ejemplo de cómo funciona, con el código html, css y las tres librerÃas necesarias. Aquà tenéis una demo.
Para ponerlo en funcionamiento primero llamaremos a las tres librerÃas y la hoja de estilos:
[html]
[/html]
Luego creamos la estructura html entre body /body:
[html]
You can put any kind of HTML in here:
Style the sections however you want
I-frames? Yes, but only if scrollbars are hidden:
Flash? Sort-of works:
Y la estructura de la hoja de estilos:
[css]
div.scroller {
width: 635px;
height: 300px;
overflow: hidden;
border:1px solid #cccccc;
}
div.scroller div.section {
width:635px;
height:300px;
overflow:hidden;
float:left;
padding:1em;
}
div.scroller div.content {
width: 10000px;
}
[/css]
Si quisiéramos cambiar el tamaño del cajon modificamos div.scroller, dando más o menos ancho (width) o más o menos alto (height). Si modificamos width o height de div.scroller div.section cambiaremos el ancho o alto de cada sección. Por ultimo, para que el paso entre pestañas se haga en vertical en vez de horizontal, quitar el flota de div.scroller div.section.
Enlace: glider.js
