SummArg | Cursos y recursos para webmasters

30/04/2011

diagonalFade para imágenes y otros elementos

diagonalFade es un plugin para jQuery que nos permite aplicar un efecto fade in y fade out a un conjunto de imágenes, u otros elementos, en muy pocos pasos. Se puede personalizar la dirección del efecto y el tiempo, y resulta un recurso muy vistoso que vale la pena que vean en acción.

Para utilizar el plugin debemos vincular jQuery a nuestro documento y el archivo de diagonalFade:

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

Luego inicializamos el script y le indicamos a que elemento habrá de aplicarse:

<script type="text/javascript">
$("#container").diagonalFade({
time: 100,
fadeDirection_x: 'left-right', // "left-right" || "right-left"
fadeDirection_y: 'top-bottom', // "top-bottom" || "bottom-top"
fade: 'out',                   // "in" || "out"
complete: null                 // callback function
} });
</div>

Y finalmente colocamos las imágenes dentro de un div con ID container.

<div id="container">
		<!-- es obligatorio definir el alto y ancho de cada imagen -->
		<!-- todas las imágenes deben tener las mismas dimensiones -->
		<img src = "i/1.jpg"  height = "125" width = "125" alt = "Shoes" />
		<img src = "i/2.jpg"  height = "125" width = "125"  alt = "Shoes" />
		<img src = "i/3.jpg"  height = "125" width = "125" alt = "Shoes" />
		<img src = "i/4.jpg"  height = "125" width = "125"  alt = "Shoes" />
		<img src = "i/5.jpg"  height = "125" width = "125" alt = "Shoes" />
		<img src = "i/6.jpg"  height = "125" width = "125"  alt = "Shoes" />
		<img src = "i/7.jpg"  height = "125" width = "125" alt = "Shoes" />
		<img src = "i/8.jpg"  height = "125" width = "125"  alt = "Shoes" />
</div>

Dejar un comentario