DVSTYLE.css es un estupendo archivo CSS que nos permite colocar animaciones CSS3 con solamente agregar una clase, su uso es realmente sencillo, lo que veremos es como implementar de forma fácil y rápida el efecto hover, ya que las animaciones que trae se ejecutan cuando detecta la la clase “animated”.
La forma de usarse es agregando la clase “animated” más el efecto que se quiera tener, en su sitio oficial se pueden apreciar todos los efectos que tiene.
No hay que olvidar agregar el archivo DVSTYLE.css y DVSTYLE.min.css en la cabecera de nuestro sitio web.
Por ejemplo:
|
1 2 3 |
<div style="text-align: center;"> <img src="images/sitio/logos/dvstyle.png" class="animated infinite rubberBand"> </div> |
Para agregar una aminación al iniciar la página o refrescándola “animated hinge fadeInLeft”
|
1 2 3 |
<div style="text-align: center;"> <img src="images/sitio/logos/dvstyle.png" class="animated hinge fadeInLeft"> </div> |
Para agregar una aminación podemos agregar la clase “animate infinite bounce”
|
1 2 3 |
<div style="text-align: center;"> <img src="images/sitio/logos/dvstyle.png" class="animated infinite bounce"> </div> |
El problema está en que esta animación es infinita mientras tenga las clases “animate infinite bounce”, para poder hacer el efecto hover, vamos a utilizar jQuery, en específico el evento Hover.
Es muy importante aclarar que el evento Hover de jQuery es en realidad una función que simplifica los eventos mouseenter() y mouseleave(), lo que nos facilita mucho las cosas.
También vamos a utilizar la llamada de datos con el evento DATA de jQuery lo que nos permitirá hacer una función general y poderla utlizar en donde queramos.
|
1 2 3 |
<div style="text-align: center;"> <img src="images/sitio/logos/dvstyle.png" class="animated-hover" data-efect="bounce"> </div> |
Lo que hicimos fue declarar la clase “animated-hover” y le colocamos un atributo llamado “data-efect” y le asignamos el efecto “bounce” lo que nos permitirá cambiar el efecto muy fácilmente.
*Edición no especifique que el código jQuery que muestro a continuación, será necesario agregarlo a un archivo .js de la plantilla para que el efecto hover funcione de forma correcta.
El código jQuery quedaría de la siguiente forma:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> (function($){ $.(document).ready(function(){ $('.animated-hover').hover(function(){ $(this).addClass('animated infinite ' + $(this).data(efect)); },function(){ $(this).removeClass('animated infinite ' + $(this.data(efect)); }); }); })(jQuery); </script> |
Primero encapsulamos la funcion “$” de jQuery para evitar problemas con otras librerías, después llamamos la función cuando se esté cargando el sitio web, posteriormente a nuestra clase “animated-hover” le asignamos el vento Hover, como podemos observar, hay dos funciones unidad por un coma “,”. Como ya les había mencionado antes, el evento Hover es una función reducida, pero podemos ocupar su expresión completa la cual nos permite especificar una función para el vento mouseenter() y otra para el evento mouseleave(). En el primer caso lo que se hizo fue agregar la clase “animated infinite” y también pasamos como clase el atributo “data-efect” que le hayamos asignado, en el segundo caso quitamos estas clases, así tenemos el efecto hover con DVSTYLE.css y muy poco jQuery.
Tendremos los efectos bounce y rubberBand a continuación :
|
1 2 3 |
<div style="text-align: center;"> <img src="images/sitio/logos/dvstyle.png" class="animated-hover" data-efect="bounce"> </div> |
|
1 2 3 |
<div style="text-align: center;"> <img src="images/sitio/logos/dvstyle.png" class="animated-hover" data-efect="rubberBand"> </div> |
Espero que este tutorial les haya sido de utilidad. no duden en preguntar sus dudas en la sección de comentarios y con gusto la trataré de resolverlas.
