Clicky

Sencillo slide con efectos de iconos animados girando

iconos animados

Tres ejemplos, cada uno con un efecto diferente para los iconos

En este artículo nos gustaría mostrar algunos iconos animados para tu sitio web. Hemos preparado tres ejemplos, cada uno con un efecto diferente para los iconos. Se utilizó un hermoso conjunto de iconos, que pueden verse en la plantilla JM-Hot-News de Joomla Monster.

Echemos un vistazo a los ejemplos.

Ejemplo 1

En el primer ejemplo, cuando pasamos el ratón sobre el icono se puede observar que el fondo cambia de color de blanco a oscuro, aparece un borde gris alrededor del círculo y, finalmente, un icono blanco, mientras que desaparece la oscuridad de los slides situados a la izquierda.

Ejemplo 2

El segundo ejemplo es muy similar al primero. La única diferencia es que los iconos blancos flotan desde la parte superior del slide, mientras la oscuridad del slide desaparece.

Ejemplo 3

El tercer ejemplo es un poco diferente de los dos anteriores. En movimiento estacionario en el icono oscuro se sustituye por el blanco mientras que hace una rotación completa de 360.

Para una mejor comprensión de todos estos efectos, mira los ejemplos de demostración en vivo.

iconos animados

Código HTML

Echemos un vistazo a código HTML.

<div class="jm-icon-wrap">
    <a class="jm-link info" href="#">
        <span class="jm-icon"> </span>
        <span class="jm-icon-title">Information</span>
    </a>
    <a class="jm-link parking" href="#">
        <span class="jm-icon"> </span>
        <span class="jm-icon-title">Parking</span>
    </a>
    <a class="jm-link hotel" href="#">
        <span class="jm-icon"> </span>
        <span class="jm-icon-title">Hotel</span>
    </a>
    <a class="jm-link restaurant" href="#">
        <span class="jm-icon"> </span>
        <span class="jm-icon-title">Restaurant</span>
    </a>
    <a class="jm-link post" href="#">
        <span class="jm-icon"> </span>
        <span class="jm-icon-title">Post</span>
    </a>
    <a class="jm-link pub" href="#">
        <span class="jm-icon"> </span>
        <span class="jm-icon-title">Pub</span>
    </a>
</div>

En primer lugar, es necesario crear un contenedor con la clase "jm-icon-wrap". Por ejemplo, en el primer efecto es necesario agregar la clase "first" a este elemento de la siguiente manera:

<div class="jm-icon-wrap first">
<!-- -->
</div>

Para el efecto del segundo ejemplo es necesario agregar la clase "second" de este modo:

<div class="jm-icon-wrap second">
<!-- -->
</div>

Para el tercer efecto ejemplo, usted tiene que agregar la clase "third" de la siguiente manera:

<div class="jm-icon-wrap third">
<!-- -->
</div>

En el interior, hay que poner un código para todos los iconos. Tomemos el icono de información como ejemplo. Es necesario agregar una etiqueta de ancla con la clase "info jm-link". En el interior hay que poner dos spans. El primero de ellos con la clase "jm-icon", el segundo con la clase "jm-icon-title" clase. Es necesario repetir esta operación para todos los iconos, lo único es reemplazar la clase "info jm-link" a una de las siguientes clases:

<a class="jm-link info" href="#">
<!-- -->
</a>
<a class="jm-link parking" href="#">
<!-- -->
</a>
<a class="jm-link hotel" href="#">
<!-- -->
</a>
<a class="jm-link restaurant" href="#">
<!-- -->
</a>
<a class="jm-link post" href="#">
<!-- -->
</a>
<a class="jm-link pub" href="#">
<!-- -->
</a>

Veamos el código HTML en detalle

Si deseas cambiar el vínculo icon, necesitas editar una ruta:

<a class="jm-link" href="#">

Para cambiar el título del icono, necesitas editar esta sección:

<span class="jm-icon-title">Information</span>

Estilos CSS

Estilos CSS del contenedor principal:

.jm-icon-wrap {
    text-align: center;
}

Estilos CSS del anchor del icono:

.jm-link {
    text-decoration: none !important;
    display: inline-block;
    margin: 10px 0;
}

Estilos CSS relativos al spans del icono:

.jm-link .jm-icon {
    display: inline-block;
    font-size: 0px;
    cursor: pointer;
    margin: 0 10px 10px;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    z-index: 1;
    border: 3px solid #172b48;
}
.jm-link .jm-icon-title {
    display: block;
    font-size: 14px;
    line-height: 1.3em;
}
.jm-link:hover .jm-icon {
    background-color: #172b48;
    border: 3px solid transparent;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(23,43,72,0.15);
    -moz-box-shadow: 0px 0px 0px 5px rgba(23,43,72,0.15);
    box-shadow: 0px 0px 0px 5px rgba(23,43,72,0.15);
}

Los estilos CSS adicionales para el "Ejemplo 1" son precedidos por la clase "first" utilizada para el elemento "jm-icon-wrap".

.jm-icon-wrap.first .jm-link .jm-icon {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    background-position: -60px 0;
}
.jm-icon-wrap.first .jm-link:hover .jm-icon {
    background-position: 0 0;
}
.jm-icon-wrap.first .jm-link.info .jm-icon {
    background-image: url('../images/example1/icons-info.png');
}
.jm-icon-wrap.first .jm-link.pub .jm-icon {
    background-image: url('../images/example1/icons-pub.png');
}
.jm-icon-wrap.first .jm-link.post .jm-icon {
    background-image: url('../images/example1/icons-post.png');
}
.jm-icon-wrap.first .jm-link.restaurant .jm-icon {
    background-image: url('../images/example1/icons-restaurant.png');
}
.jm-icon-wrap.first .jm-link.hotel .jm-icon {
    background-image: url('../images/example1/icons-hotel.png');
}
.jm-icon-wrap.first .jm-link.parking .jm-icon {
    background-image: url('../images/example1/icons-parking.png');
}

Los estilos CSS adicionales para el "Ejemplo 2" son precedidos por laspans clase "second" utilizada para el elemento "jm-icon-wrap".

.jm-icon-wrap.second .jm-link .jm-icon {
    background-position: 0 -60px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.jm-icon-wrap.second .jm-link:hover .jm-icon {
    background-position: 0 0;
}
.jm-icon-wrap.second .jm-link.info .jm-icon {
    background-image: url('../images/example2/icons-info.png');
}
.jm-icon-wrap.second .jm-link.parking .jm-icon {
    background-image: url('../images/example2/icons-parking.png');
}
.jm-icon-wrap.second .jm-link.hotel .jm-icon {
    background-image: url('../images/example2/icons-hotel.png');
}
.jm-icon-wrap.second .jm-link.restaurant .jm-icon {
    background-image: url('../images/example2/icons-restaurant.png');
}
.jm-icon-wrap.second .jm-link.post .jm-icon {
    background-image: url('../images/example2/icons-post.png');
}
.jm-icon-wrap.second .jm-link.pub .jm-icon {
    background-image: url('../images/example2/icons-pub.png');
}

Los estilos CSS adicionales para el "Ejemplo 3" son precedidos por la clase "third" utilizada para el elemento "jm-icon-wrap".

.jm-icon-wrap.third .jm-link .jm-icon {
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
    background-position: 0 0;
}
.jm-icon-wrap.third .jm-link:hover .jm-icon {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}
.jm-icon-wrap.third .jm-link.info .jm-icon {
    background-image: url('../images/example3/icons-info.png');
}
.jm-icon-wrap.third .jm-link.info:hover .jm-icon {
    background-image: url('../images/example3/icons-info-hover.png');
}
.jm-icon-wrap.third .jm-link.parking .jm-icon {
    background-image: url('../images/example3/icons-parking.png');
}
.jm-icon-wrap.third .jm-link.parking:hover .jm-icon {
    background-image: url('../images/example3/icons-parking-hover.png');
}
.jm-icon-wrap.third .jm-link.hotel .jm-icon {
    background-image: url('../images/example3/icons-hotel.png');
}
.jm-icon-wrap.third .jm-link.hotel:hover .jm-icon {
    background-image: url('../images/example3/icons-hotel-hover.png');
}
.jm-icon-wrap.third .jm-link.restaurant .jm-icon {
    background-image: url('../images/example3/icons-restaurant.png');
}
.jm-icon-wrap.third .jm-link.restaurant:hover .jm-icon {
    background-image: url('../images/example3/icons-restaurant-hover.png');
}
.jm-icon-wrap.third .jm-link.post .jm-icon {
    background-image: url('../images/example3/icons-post.png');
}
.jm-icon-wrap.third .jm-link.post:hover .jm-icon {
    background-image: url('../images/example3/icons-post-hover.png');
}
.jm-icon-wrap.third .jm-link.pub .jm-icon {
    background-image: url('../images/example3/icons-pub.png');
}
.jm-icon-wrap.third .jm-link.pub:hover .jm-icon {
    background-image: url('../images/example3/icons-pub-hover.png');
}

Ejemplos de demostración en vivo

Jesus_Caceres