jQuery: realizar transiciones en imágenes con css background

jQuery es una biblioteca o framework de JavaScript. Básicamente, incorpora código que podemos implantar en nuestras webs para hacernos la vida un poco más fácil. No me extiendo más. Hablar de jQuery requeriría un post entero.

Al grano: crear transiciones de fotos en jQuery es algo muy fácil. Lo que cuesta un poco más es conseguir un efecto de transición de fotos con fotos etiquetadas como background en sus propiedades css.

El plugin de jQuery a usar en cuestión es BgImageTransition.js.

Una vez obtenido, los pasos son los siguientes:

1º-Carga tu jquery como haces habitualmente, bien desde su web, bien desde la tuya.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.2/jquery.min.js"></script> 

2º-Carga el plugin comentado antes.

<script type="text/javascript" language="javascript" src="Scripts/jquery.BgImageTransition.js"></script> 

3º-Crea una función que va a manejar el id en el que vas a aplicar la transición. En nuestro caso, lo aplicaremos sobre un div llamado banner.

<script language="JavaScript" type="text/javascript"> $( function(){var bgImages = [ 'banner_1.jpg', 'banner_2.jpg', 'banner_3.jpg', 'banner_4.jpg', 'banner_5.jpg' ]; var currImage = 'banner_2.jpg'; setInterval( function(){ do{ var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))]; }while( randImage == currImage ) currImage = randImage; $('#banner').BgImageTransition( 'images/'+currImage ); }, 5000) }) </script> 

Como podéis intuir viendo el código, hay que introducir todos los nombres de las imágenes en el array bgImages. Las imágenes estarán alojadas en la carpeta images. La rapidez de la transición la podemos modificar toqueteando el valor 5000.

4º-Acto seguido, ya podemos usar el id en nuestro html para insertar la imagen


<div id="banner">
</div>

Podéis ver un ejemplo de funcionamiento en www.crein.com

Escribe un comentarios

Copyright © Crein Blog
Otro sitio realizado con WordPress

Built on Notes Blog Core
Powered by WordPress