Publicado el Lunes, 24 de Septiembre del 2007 por MyR

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:

PLAIN TEXT

HTML:

<script src="javascripts/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/effects.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/glider.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="stylesheets/glider.css" type="text/css">

Luego creamos la estructura html entre body /body:

PLAIN TEXT

HTML:

<div id="my-glider">
<div class="controls">
<a href="#section1">Section 1</a> |
<a href="#section2">Section 2</a> |
<a href="#section3">Section 3</a> |
<a href="#section4">Section 4</a> |
</div>
<div class="scroller">
<div class="content">
<div class="section" id="section1">
Section 1
<p>You can put any kind of HTML in here:</p>
<img src="http://www.curbly.com/images/header_logo.gif" />
</div>
<div class="section" id="section2">
Section 2
<p>Style the sections however you want</p>
</div>
<div class="section" id="section3">
Section 3
<p>I-frames? Yes, but only if scrollbars are hidden:</p>
<iframe src="http://www.example.com" style="overflow:hidden"></iframe>
</div>
<div class="section" id="section4">
Section 4
<p>Flash? Sort-of works:</p>
<object width="200" height="150"><param name="movie" value="http://www.youtube.com/v/Ef-f7EeDpYI"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Ef-f7EeDpYI" type="application/x-shockwave-flash" wmode="transparent" width="200" height="150"></embed></object>
</div>
</div>
</div>
</div>
<a href="#" onClick="my_glider.previous();return false;">Previous</a> | <a href="#" onClick="my_glider.next();return false">Next</a>
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('my-glider', {duration:0.5});
</script>

Y la estructura de la hoja de estilos:

PLAIN TEXT

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

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

Comparte este articulo: