Animar bordes a nuestras imágenes en jQuery

miércoles, agosto 11, 2010
COMPARTE EL POST

borderVengo enterándome desde Kabytes sobre un tutorial muy bueno sobre bordes añadidos a las imágenes con jQuery, pero lo asombroso no es que las imágenes tengan un borde muy sencillo, sino que es el mismo efecto el que lo hace sorprendente, y en este tutorial vamos a ver como animar bordes a nuestras imágenes en jQuery.

Se trata básicamente de un plugin que podemos configurar en un sitio web para que genere el código automáticamente, pero la verdad es que tienen que ver el efecto para impresionarse, así que les dejo la página con ejemplos y después del salto el tutorial para manipular los efectos.

InsetBorder funciona en gran medida gracias a la manipulación de la propiedad overflow:hidden de CSS obviamente utilizando jQuery para crear los curiosos efectos

La utilización es simple, basta asignar a todas las tags de imágenes la función:

$("img").insetBorder();



Las opciones disponibles son:




$("img").insetBorder({
speed : 1000, // 1000 = 1 second, default 250
borderColor : "orangered", // Default white (#ffffff)
inset : 10, // Border width, default 10px
borderType : "solid", // Border type, e.g. dashed
outerClass : "ibe_outer", // Class name of outer wrap
innerClass : "ibe_inner" // Class name of inner border
});



Basta con seguir este código o en la misma página que nos lo puede generar modificando en cajas de texto y de opciones los valores que nosotros queramos, así de sencillo.



Plugin: InsetBorder

¡Síguenos en Twitter!


Deja tu comentario