glider, efecto slide entre pestañas

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]

Section 1

You can put any kind of HTML in here:

Section 2

Style the sections however you want

Section 3

I-frames? Yes, but only if scrollbars are hidden:

Section 4

Flash? Sort-of works:

Previous | Next

[/html]

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

Ir arriba