DIA 5 / 2015

Técnicas para Efectos y Animaciones CSS3

Para que los efectos y animaciones de tu web sorprendan a los usuarios tenemos que saber ocultarlos. En este artículo veremos 3 Técnicas de Camuflaje y un ejemplo de cada una de ellas. Esto servirá como modelo para otras formas de implementar animaciones.


Trucos de magia. Pierden la gracia cuando se sabe el truco. Los vive muy diferente quien lo hace y quien lo ve hacer. Para uno hay cierto misterio, curiosidad por saber cómo se ha hecho, en qué momento se ha producido algo capaz de sorprenderle, algo que no esperaba, algo que aparecía de dónde y cómo menos pensaba. Para el otro no hay fantasía ninguna, simplemente sabe el secreto, y cuando un secreto se sabe deja de tener gracia, se vive diferente, no provoca ese grado de fascinación.

Y luego están los que ven el show de magia con el único fin de descubrir el truco, de averiguar cómo se ha hecho, que técnica se ha usado. Para eso hay que saber, hay que ser mago también.

magia_css3

No sé si darte la noticia, y no sé si te parecerá buena o mala, pero…en esto de las animaciones web, tú no eres el que se tiene que fascinar, ni el que tiene que sorprenderse. Tú tienes que ser el mago, tienes que ser quien invente el truco, o en su defecto el que vea trucos de otros y sepa adaptarlos e incluirlos en sus números. Tu eres el desarrollador.

Mira los siguientes efectos:

Nota: los 2 primeros están diseñados para activarse cuando el ratón pasa por encima usando mozilla firefox, para otros navegadores solo necesitas poner el prefijo correspondiente.

See the Pen jbMYdB by Jose Javier (@jotajotavm) on CodePen.

See the Pen VvKyRO by Jose Javier (@jotajotavm) on CodePen.

See the Pen xwEYRe by Jose Javier (@jotajotavm) on CodePen.

¿Te han molado? Genial. ¿Te han intrigado? Entonces…eso no es tan genial, significa que estás en fase de espectador, y tienes que comenzar a ser un mago. Así que ahora cuando sepas el truco y, lo que es más importante aún, las técnicas empleadas, es probable que esos mismos efectos dejen de despertar curiosidad en tí, porque ya sabes cómo se han hecho, y habrán dejado de tener gracia para tí.

Pero NUNCA olvides esto: la sensación que provocarán tus animaciones en los demás SIEMPRE será mejor que la que provocará en tí (si están hechas con estilo, por supuesto). Porque para tí no tendrá tanta emoción ni causará impacto, tú eres quien las has creado, y ellos son los que se sorprenden. No caigas en el error de menospreciar tus animaciones por el hecho de que a tí no te provoquen tanta fascinación. Recuerda que desde ahora tú lo vivirás de forma diferente.

Técnicas de camuflaje

Aquí viene lo bueno: las técnicas empleadas. Como esconder el truco. La distracción. La tía buena.

  • Camuflaje por tamaño: consiste en asignarle una altura y anchura de 0px al elemento que provocará la animación, y luego darle un tamaño mayor para hacerlo visible. El elemento siempre estuvo ahí, reducido a nada, a 0, pero luego ampliado, no lo viste venir.
  • Camuflaje por transparencia: consiste en iniciar el elemento con el opacity a 0, y luego mostrarlo aumentándole su opacidad a 1, o incluso a algo menos como 0.8. Es como si se revelará de la nada, como un objeto invisible que se manifiesta ante nuestros ojos, que siempre se había encontrado ahí pero nunca lo vimos.
  • Camuflaje por color: consiste en darle al elemento sorpresa el mismo color que el fondo, para que parezca que no hay nada. A modo de camaleón. Ahí está pero camuflado con su entorno, cuando se mueva es cuando se notará el efecto, y cuando provocará la sorpresa.

Estas 3 técnicas son las empleadas en cada uno de los anteriores efectos, pero no significan que sean las únicas. Hay más. Muchas más. Pero te tocará a ti fijarte en los trucos de otros diseñadores web para crecer como mago ;)

Aviso: el código de los ejemplos lleva el prefijo para Mozilla Firefox, en caso de que uses otro navegador tenlo presente para reemplazarlo por el correspondiente.

Camuflaje por Tamaño – Esquina de Página

See the Pen jbMYdB by Jose Javier (@jotajotavm) on CodePen.

Este efecto es muy vistoso, cuando el ratón se posa sobre el elemento aparece una esquina con un aspecto visual que da la sensación de que se esté doblando como si fuera una página real.

Código HTML

<div class="esquina_pagina">
  <p>Efecto Esquina Pagina</p>
</div>

Código CSS

.esquina_pagina {
  -moz-transform: translateZ(0);
  height: 100px;
  width: 300px;
  background: #F2EA6C;
  font-size: 18px;
  padding: 20px;
}

.esquina_pagina:before {
  content: '';
 /* Posicionamiento de la esquina */
  position: absolute;
  bottom: 0;
  left: 0;

 /* Características del cuadrado que da efecto de esquina doblada */
  width: 0;
  height: 0;
  background: -moz-linear-gradient(45deg,
      white 45%, #aaaaaa 50%, #cccccc 60%, white);
  box-shadow: 1px -1px 1px rgba(0,0,0, 0.4);

  -moz-transition-duration: 0.3s;
}

.esquina_pagina:hover:before{
  width: 60px;
  height: 60px;
}

En el :before del elemento hemos creado un cuadrado con un fondo degradado con inclinación de 45 grados, para que la primera parte sea blanca y parezca que se dobla la página, y luego se hace un sombreado de colores oscuros, además del borde sombreado que se le da simulando al que haría sobre el papel su propia esquina doblada. Y después en el :hover … abracadabra… se le aplica al :before un alto y ancho de 35px y ahí es donde ese cuadrado con aspecto de esquina aparece con esas dimensiones.

Si quieres una explicación más detallada mira este videotutorial donde explico este efecto paso a paso.

Camuflaje por Transparencia – Sombra

See the Pen VvKyRO by Jose Javier (@jotajotavm) on CodePen.

Este es un ejemplo de camuflaje con opacity. Consiste en elevar una caja y hacer aparecer abajo un fondo de degradado elíptico que simulará la sombra.

Código HTML

<div class="sombra_fija">
  <p>Efecto de Sombra</p>
</div>

Código CSS

.sombra_fija {
  -moz-transform: translateZ(0);
  width: 300px;
  padding: 20px;
  heigth: 100px;
  background: #F2EA6C;
}

.sombra_fija:hover {
  -moz-transform: translateY(-5px);
}

.sombra_fija:before {
  position: absolute;
  content: '';
  width: 90%;
  left: 5%;
  top: 100%;
  height: 10px;
  opacity: 0;
  background: -moz-radial-gradient(center,
    ellipse,  rgba(0, 0, 0, 0.35) 0%,
              rgba(0, 0, 0, 0) 80%);
  -moz-transition-duration: 0.3s;
}

.sombra_fija:hover:before {
  opacity: 1;
  -moz-transform: translateY(5px);
}

Puesto que el :before acompaña siempre al elemento al que pertenece, cuando se eleva la caja, también se eleva la sombra que hemos creado. Por eso el :before se baja, pero aun así no se ve, porque está transparente, de modo que se le quita la transparencia con opacity:1 y ya es visible esa sombra elíptica que siempre estuvo presente pero nunca vimos… tachán!

De nuevo, para un análisis más en detalle de este efecto puedes mirar este video.

Camuflaje por Color – Arrow

See the Pen xwEYRe by Jose Javier (@jotajotavm) on CodePen.

Este efecto combina el patrón de los anteriores, en los que jugábamos a ocultar el :before de un elemento, con keyframes, el modo en que CSS nos permite “programar” animaciones.

En este caso el :before se oculta asignándole el mismo color que hay como fondo, así queda camuflado e irreconocible para el usuario. Después con keyframe establecemos el movimiento que tendrá el :before en sentido lineal y rotativo, para dar la sensación de esa flecha que sale de la caja, gira, apunta y regresa

En esta ocasión te toca pensar qué código habrá hecho posible ese acabado, pero si quieres salir de dudas y ver el código completo de esta animación desde cero con todas las explicaciones correspondientes, mira este tutorial.

Conclusión

El mundo de las animaciones es inmenso, aquí solo hay 3 ejemplos sencillos, ni siquiera hemos entrado en el mundo del 3D, ni uso de JavaScript, ni en keyframes avanzadas, solo CSS básico. Con simple CSS puedes hacer muchísimos efectos. Así que trastea, prueba cosas, inventa.

Úsalos con cautela, una página muy cargada tampoco es recomendable. Y úsalos de forma práctica, no hagas efectos que resten atención al contenido principal de la web, asegúrate de que, más bien, lo potencian.

Jose Javier Villena
Jose Javier Villena

Analista-Programador encantado de compartir lo que sepa. Actualmente soy Tutor Premium de CodigoFacilito y ando empeñado en crear cursos gratuitos de mil temas en mi canal propio de YouTube, patrocinado por Anaya.