Linwind

Gracias al framework jQuery que nos permite interactuar con el código HTML de forma mucho más sencilla, crear efectos para la web se ha convertido en algo relativamente sencillo y han aparecido magnificos scripts como jqFancyTransitions.

jqFancyTransition es un Slideshow que utiliza jQuery para crear un slider(deslizador) de imágenes con diferentes efectos cortina muy vistosos en las transiciones de imágenes, puedes ver la siguiente demo para hacerte una idea.

Utilizar este slider es realmente sencillo, tienes que realizar los siguientes pasos:

Lo primero será crear un div donde interiormente introducirás el código de las imágenes de la siguiente manera:

<div id=’Slider’>
<img src=’imagen1.jpg’ alt=imagen1′ />
<img src=’imagen2.jpg’ alt=’imagen2′ />
<img src=’imagen3.jpg’ alt=imagen3′ />
</div>

Añadirás a la cabecera de tu página web los scripts jQuery y jqFancyTransitions que tendrás que descargar y después agregar de la siguiente manera:

<script src=»js/jquery.js» type=»text/javascript»></script>
<script src=»js/jqFancyTransitions.js» type=»text/javascript»></script>

Finalmente harás una llamada a la función jqFancyTransition:

<script>

$(‘#Slider’).jqFancyTransitions({ variables });

</script>

Las variables que tendrás que modificar para generar el efecto deseado son las siguientes:

effect: », // efectos : wave, zipper, curtain
width: 500,
height: 332,
strips: 20, // número de tiras
delay: 5000, // retardo entre las imágenes en ms
stripDelay: 50, // retardo entre tiras en ms
titleOpacity: 0.7, // opacidad del título
titleSpeed: 1000, // velocidad de aparicion del título en ms
position: ‘alternate’, // top, bottom, alternate, curtain
direction: ‘fountainAlternate’, // left, right, alternate, random, fountain, fountainAlternate
navigation: false // botones de siguiente y anterior (true y false)
links: false // mostrar imágenes como enlaces

Olvídate del flash cuando tengas que hacer un slider de imágenes, con este script conseguirás un efecto similar que podrá ver todo el mundo y además que pesará mucho menos.