The image transition manager, una biblioteca javascript basada en scriptaculous y prototype, que nos brinda otra opción para lograr bonitas transiciones en nuestras imágenes. Soporta transiciones como fading( desvanecimiento), appearing (que aparecen de la nada), Sliding (deslizamiento), growing and shrinking (reducción o viceversa).
Características:
- 8 (más por venir), efectos de transición
- Imagen de precarga visible
- Unobstrusive javascript
- Fácil de implementar cada Transición
- Probado en Firefox, Opera y IE6 / 7
- No usa CSS, pero claro, será útil para darle un estilo mas agradable.
VER DEMO - DESCARGA
Comenzar a Usar:
Como este javascript se basa en prototype y script.aculo.us, es necesario que realicemos las llamadas a ellos desde nuestro encabezado. < head >…
Nota: ya que existen algunos problemas con la compatibilidad de scriptaculous 1,7 y prototype 1.5.1.1, se ha utilizado la versión 1.5.1.1 de prototype y 1.7.3 beta de scriptaculous. Se incluyen en el paquete de descarga.
<script src="javascript/scriptaculous.js?load=effects" type="text/javascript"></script>
Después de esto, es hora de incluir nuestro javascript que nos permitirá lograr las transiciones.
Agregamos la navegación para nuestras imágenes mediante hipervínculos, y añadiremos también el atributo “rel” donde especificaremos que transición deseamos para cada una de ellas Ej: rel="transition[blinddown]"
<li><a href="image1.jpg" rel="transition[switchoff]">image1.jpg</a></li>
<li><a href="image2.jpg" rel="transition[slidedown]">image2.jpg</a></li>
<li><a href="image3.jpg" rel="transition[blinddown]">image3.jpg</a></li>
<li><a href="image4.jpg" rel="transition[slideright]">image4.jpg</a></li>
<li><a href="image5.jpg" rel="transition[appear]">image5.jpg</a></li>
<li><a href="image6.jpg" rel="transition[switch]">image6.jpg</a></li>
<li><a href="image7.jpg" rel="transition[blinddown]">image7.jpg</a></li>
<li><a href="image8.jpg" rel="transition[grow]">image8.jpg</a></li>
<li><a href="image9.jpg" rel="transition[shrink]">image9.jpg</a></li>
</ul>
Creamos un div-elemento en el que tendrán lugar las transiciones
<img src="image1.jpg" />
</div>
<script type="text/javascript">
oTransition = new Transition( 'holder', 'image1.jpg' );
</script>
Loading ...
toni
29-02-2008
Permalink
He visto el demo y está muy bien, yo quisiera hacer unas transiciones de imágenes con efecto fading( desvanecimiento) y que sea automàtico dentro de una pàgina web (la pagina que he puesto en el website, és posible?, me vale el ejemplo que has puesto o es mas complicado?
gracias por todo
Toni