4 feb. 2017

Efectos para el Blog, imágenes Giratorias

Hace unos días, implante un nuevo diseño al blog, tarde un poco en crear los efectos y demás artilugios que use, si puedes notar, en mi cabecera, mas específicamente en mi logo, tengo las "o" girando constantemente, pues bien, ese es el gatillo del tema de esta entrada, te mostrare como poner efectos de giro o rotación en las imágenes del blog. Esto se puede aplicar a otras cosas, no necesariamente imágenes.

Efectos de imágenes que giran


Los efectos los hacemos fácilmente haciendo uso de CSS, para esto usaremos keyframes y transform:rotate, por supuesto explicare como implementarlas para blogs de blogger, no siendo mas te dejo los ejemplos para que implementes los que quieras.

Rotación al pasar el cursor

Al pasar el ratón sobre la imagen esta girara en 360 grados

imágenes que rotan

Para que se aplique a todas las imágenes en las entradas del blog, ve a Personalizar, Avanzado, Añadir CSS pega el código y guarda, o si no ve Plantilla, Editar HTML busca ]]></b:skin> y pegalo justo arriba de este y guarda los cambios.

.post-body img:hover {
-webkit-transform: rotate(360deg); /* Rotacion */
-moz-transform: rotate(360deg);
transform: rotate(360deg);
transition:all 0.7s ease-out; /* Tiempo que tarda en girar */
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}

Puede jugar con el tiempo en que tarde en girar cambiando lo que esta en color verde . Si lo que quieres es poner este efecto pero solo para alguna imagen en particular, entonces lo que tienes que hacer es usar este código junto al anterior:

<img class="imagen1" src="URL de la imagen" />
<style>Aqui pega el codigo anterior</style>

Solo cambia lo que esta en color anaranjado por lo de color morado.

Ahora si queremos que al quitar el raton, la imagen se devuelva como en la siguiente, en vez del primer código agregamos este en su lugar:

imágenes que giran

.post-body img {
transition:all 0.7s ease-out; /* Tiempo que tarda en girar */
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}
.post-body img:hover {
-webkit-transform: rotate(360deg); /* Rotacion */
-moz-transform: rotate(360deg);
transform: rotate(360deg);
transition:all 0.7s ease-out; /* Tiempo que tarda en girar */
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}

Puedes hacer que en vez de girar hacia la derecha gire hacia la izquierda, cambiando 360deg por -360deg.

imágenes giratorias


Igualmente puedes cambiar este valor para que la imagen no gire en su totalidad si no un poco, colocando por ejemplo 60deg tendremos:

efecto de rotar imagenes


El efecto de rotación es vistoso, pero con esa forma cuadrada se ve un poco raro, si quieres puedes redondear los bordes, solo agrega justo despues de .post-body img { el siguiente código:

border-radius:150px;

efecto de girar imagenes

Efecto de rotación continua

Para seguir, ahora haremos que la imagen gire eternamente sin tener que pasar el cursor sobre ella si quieres el efecto solo agrega este código:

girar imagenes con css
.post-body img {
-webkit-animation:spin 6s infinite linear; /* Animación y Tiempo que tarda en girar */
-moz-animation:spin 6s infinite linear;
animation:spin 6s infinite linear;
}
@-webkit-keyframes spin {
    from {-webkit-transform:rotate(360deg)}
    to {-webkit-transform:rotate(0deg)}
}
@-moz-keyframes spin {
    from {-moz-transform:rotate(360deg)}
    to {-moz-transform:rotate(0deg)}
}
@keyframes spin {
    from {transform:rotate(360deg)}
    to {transform:rotate(0deg)}
}

Lo que esta en color verde es la velocidad, mejor dicho, el tiempo que tarda en dar una vuelta, puede hacer que sea mas rápido o mas lento cambiado el valor, lo que esta en color morado da la dirección, si quieres que gire hacia la izquierda intercambia los 360deg y 0deg.

Lo mas probable es que queramos poner este efecto pero solo para alguna imagen en particular,  pues no me imagino todas las imágenes girando continuamente, entonces lo que tenemos que hacer es usar este código junto al anterior:

<img class="imagen1" src="URL de la imagen" />
<style>Aqui pega el codigo anterior</style>

Simplemente reemplazando lo que esta en color naranja por lo de violeta.

A lo demás podemos hacerle que al pasar el cursor se detenga agregando el siguiente código:

girar imagenes con css

.post-body img:hover{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}

2 comentarios:

  1. Esneider muy buen post, gracias por compartir tu conocimiento, una pregunta mano tengo 3 meses con mi blog sin embargo aun no comienzo a recibir una buena cantidad de visitas, apenas recibo entre 15 a 30 visitas al día; lo que me parece raro es que mi contenido es original, amplio y esta optimizado para SEO pero aun no logro obtener una mayor cantidad de visitas, según tu experiencia como blogger cuando comenzare a recibir un buen trafico en mi blog? a partir de cuantos meses? yo publico una o dos entradas todas las semanas pero aun mis visitas están muy bajas.

    ResponderEliminar
    Respuestas
    1. La clave es la difusión, hay que regarlo, aprovecha la redes sociales para eso.

      Eliminar

2017 © Inovablog