jQuery Animation Shadow
jQuery Animation Shadow es un plugin 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 encima del mismo, aparezca gradualmente una sombra hacia adentro del elemento y se retire de la misma manera al sacar el puntero. Es un detalle interesante para aplicar en menús y botones.
Para su uso será necesario disponer de la librería jQuery y el plugin «jQuery Animation Shadow» que podrás descargar de aquí.
En nuestro <body> tendremos los siguiente contenedores:
<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>
Que al pasar el ratón por encima realizan un efecto de shadow box.
Y ahora faltaría añadir por debajo de estos contenedores la librería jQuery si no estuviera incluida más el plugin:
<script src="jquery.js"></script> <script src="jquery.animate-shadow-min.js"></script>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
2 respuestas a “jQuery Animation Shadow”
Deja una respuesta
43 artículos que te podrían interesar
Ver más sobre
Hola ,interesantisima tu pagina, mi pregunta es , sirve para prestashop y donde deberia instalar el archivo descrgado , saludos y gracias Jose
Si, lo puedes añadir en prestashop y alli donde quieras. Es la magia de jQuery.