ShakeBorder efectos con jQuery, gracias al uso de css3

DESCARGA : ShakeBorder

ShakeBorder efectos con jQuery, gracias al uso de css3, es una de las demostraciones que se puede hacer con css3 y jQuery, sin duda el efecto que logra este plugin es el de vibrar y tener un color de borde, esto se logra con el plugin sobre una imagen con una etiqueta img  de tú codigo html.

Demo:http://oscaruhp.github.io/ShakeBorder/

La implementación es muy sencilla ya que solo tienes que hacer referencia a los elementos que deseas transformar, lo primero que tienes que hacer es referencias la librería de jQuery

1.- Incluir los archivos del plugin

<!-- Bootstrap and JQuery -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"> </script>

<!-- Plugin -->
<link rel="stylesheet" href="ShakeBorder.css">
<script src="ShakeBorder.js"></script>

2.- Create los elementos HTML que tendrán el efecto.

<img class="ShakeAndBorder" alt="Cubexy.js" src="img/jquery-html5-avtargenerator-Cubexy.png" />

<img class="ShakeAndBorder" alt="SimpleCalculadora" src="img/jquery-bootstrap-calculator.png" />

<img class="ShakeAndBorder" alt="3dCover" src="img/jquery-css3-cover3d.jpg" />

3.- A continuación colocar el script del plugin que convertirá tú imagen y le pondrá efectos.

$('.ShakeAndBorder').ShakeBorder();

Este plugin puedes usarlo en algún portafolio o  proyecto donde presentes imágenes, también puedes agregar enlaces a esas imágenes como por ejemplo el siguiente código donde los elementos html se cambian.

<a href="http://oscaruhp.github.io/CubexyJSAvatarGenerator/">
<img class="ShakeAndBorder" alt="Cubexy.js" src="img/jquery-html5-avtargenerator-Cubexy.png" />
</a>
<a href="http://oscaruhp.github.io/SimpleCalculadora/">
<img class="ShakeAndBorder" alt="SimpleCalculadora" src="img/jquery-bootstrap-calculator.png" />
</a>

<a href="http://oscaruhp.github.io/3DCoverjQuery/">
<img class="ShakeAndBorder" alt="3dCover" src="img/jquery-css3-cover3d.jpg" />
</a>

You may also like...