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

3 Comentarios

  1. Ola saludos diario thc tengo una duda:

    Lo que pasa sq ya tengo todo en orden pero los scripts no jalan.. intente ponerlos antes de pero no veo los efectos deslizantes en el glider.

    Xfavor spero una respuesta de como poner los scripts me urge mucho.

    de antemano gracias lindo dia..!! :)

Dejar respuesta

Please enter your comment!
Please enter your name here