SummArg | Cursos y recursos para webmasters

04/04/2012

Animación de sombras con jQuery Animation Shadow

Este plugin para jQuery nos permite generar animaciones con sombras de manera muy simple. Podemos, por ejemplo, indicar a un div que cuando el usuario pase el mouse por arriba del mismo, aparezca gradualmente una sombra hacia adentro del elemento -inset- y se retire de la misma manera al sacar el puntero. Es un detalle interesante para aplicar en menús y botones.

Para utilizarlo en cualquier documento primero debemos vincular jQuery y jQuery Animation Shadow. Podemos hacerlo entre etiquetas <head> o antes del cierre de </body>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.animate-shadow-min.js"></script>

Luego podemos insertar el código de la siguiente manera (corresponde al demo ubicado aquí).

<div id="box1" onmouseover="$('#box1').stop().animate({boxShadow: '0 0 30px #44f'})" onmouseout="$('#box1').stop().animate({boxShadow: '0 0 10px #000'})">mouse over</div>
<div id="box2" onmouseover="$('#box2').stop().animate({boxShadow: '0 0 50px'}, 'fast')" onmouseout="$('#box2').stop().animate({boxShadow: '0 0 0'}, 'fast')">mouse over</div>
<div id="box3" onmousedown="$('#box3').stop().animate({boxShadow: '3px 3px 3px', top: 3}, 'fast')" onmouseup="$('#box3').stop().animate({boxShadow: '10px 10px 15px', top: 0}, 'fast')">click me</div>

Descargar | Demo

Dejar un comentario