Si hace unas semanas te hablaba en este mismo blog sobre por qué no soy muy amigo de los sliders de imágenes, hoy toca hablar de sus primas hermanas: las animaciones web.
Confiésalo: te mola cuando entras a un blog o una web ver muchas “cositas” moviéndose de un lado para otro.
Te enamora ver entrar textos o imágenes que aparecen desde distintos puntos de tu pantalla o que al ponerte encima de un botón, una frase, etc. este haga un efecto 3D chulo, aumente su tamaño, etc.
Bien, pues tengo que confesarte dos cosas:
La primera es que te reconozco que a mi las animaciones web también me parecen atractivas y me pueden llegar a embobar.
La segunda es que no soy su mayor defensor, no soy su mejor amigo ni muy partidario de utilizarlas.
Bueno, mejor dicho: no soy partidario de utilizarlas sin sentido. Es decir, sólo porque todo quede más bonito.
De hecho, escribo este post porque me veo en la necesidad de profundizar en este tema de las animaciones web generalmente por una razón.
Me ha pasado muchas veces que personas que me solicitan diseñar su blog o su web quieren introducir animaciones a todo porque sí, sólo para que su web tenga movimiento.
Así, sin ton ni son. Sin pan ni nada.
Esto es un error y quiero, explicarte, bajo mi punto de vista, por qué.
Índice de contenidos
Aviso importante acerca de este post sobre animaciones web
Quiero destacar en la última frase que he escrito antes lo de “bajo mi punto de vista”.
Y digo esto porque con el tema de los sliders hubo personas que me dijeron que no estaban de acuerdo con lo que allí decía y hasta parecían sentirse ofendidos por decir que no me parecía una buena idea utilizarlos.
No pretendo que nadie que tenga una opinión diferente a la mía se sienta atacado ni quiero imponer mis ideas, ni mucho menos. Pero tampoco quiero que a mi otra persona quiera imponerme las suyas.
Este es mi blog y, lógicamente, escribo desde mi experiencia y desde mi visión profesional. No desde la de otras personas o profesionales.
Mi única intención con él es ayudar a quién lo lea a tomar decisiones respecto al diseño o creación de su plataforma digital (en este caso, concretamente a utilizar las animaciones en su web o blog) bajo lo que yo he vivido y pienso a raíz de esas vivencias. Nada más.
Está en mano de cada uno aceptar mis consejos e implementarlos o hacerlo. Por supuesto, no soy infalible ni tengo la verdad absoluta de nada. 😉
Es más: no pretendo ser un gurú o algo similar. De hecho, yo huyo siempre de utilizar para mi mismo la palabra “experto”. No me gusta para nada, puesto que me considero un profesional especializado en constante aprendizaje.
Aclarado esto, vamos a empezar como siempre por la base…
¿Qué son exactamente las animaciones web?
Las animaciones web, como su propio nombre indica, son una serie de efectos visuales que puedes aplicar en los diferentes elementos que componen tu web (bloques de texto, botones, banners, etc.) creando una sensación en ella de movimiento.
Por ejemplo, lo que puedes ver en la siguiente imagen son varias animaciones web puestas «a saco» en un slider de imágenes. Cada diapositiva del slider contiene a su vez otras animaciones en botones, imágenes, textos, etc.
Por regla general, las animaciones web que se implementan en la actualidad se crean con una o varias de las siguientes tecnologías y/o lenguajes de programación:
- HTML5
- CSS3
- Javascript / Jquery
- Imágenes animadas (GIFS)
¡Ojo! Hay más posibilidades. Pero estas 4 se puede decir que son las que se utilizan más y con más frecuencia.
IMPORTANTE: Como puedes ver, no he incluido en ellas Flash.
Esta es una tecnología obsoleta que no debes utilizar para nada a la hora de crear tu blog o web. Existen varios motivos para decirte esto, pero los más importantes son:
- El contenido generado en flash no se muestra en algunos dispositivos móviles, los cuales en la actualidad son muy utilizados.
- No es un estándar ni cumple con los estándares web.
- El flash no es visible de cara al SEO y, en consecuencia, a los buscadores.
- Es pesado y aumentará los tiempos de carga de tu web considerablemente.
Así que ya sabes… Flash caca. 😛
Consejos para utilizar animaciones en tu web correctamente
Como te he dicho antes, no soy el diseñador web que más utiliza las animaciones. Pienso que las cosas sencillas siempre quedan mejor.
De hecho, hay una frase que me encanta relacionada con mi forma de pensar y diseñar que dice que el buen diseño es invisible.
Sin embargo, reconozco que las animaciones web son necesarias y útiles en algunos casos muy concretos.
Para reconocer estos casos, te dejo 3 consejos muy útiles que te ayudarán a decidir si insertar una animación en tu web o no:
Consejo número 1: Pregúntate por qué utilizar cada animación web
Preguntarse el por qué de las cosas siempre está bien en cualquier ámbito de la vida.
¿Por qué en las animaciones web iba a ser diferente?
Siempre que pienses en utilizar una animación web, cuestiónate primero por qué introducirla, que vas a conseguir con ella o qué te aporta de cara a los objetivos que te has propuesto alcanzar.
Como sé que dicho así, a modo general, esta afirmación puede ser muy abstracta y difícil de entender, voy a ponerte un ejemplo práctico.
Imagina que estás pensando en meter en una página de un servicio que quieres vender en tu web una serie de animaciones que son:
- Una imagen de una mariposa de colores muy “cuqui” volando por toda tu web.
- Una animación en un texto en el que hablas del problema que afecta a tu cliente y la solución que tú le aportas para arreglar este problema.
- Una animación en el botón de compra de tu servicio.
Ahora te tienes que preguntar…
¿Por qué razón meter la mariposa de colores?
¿Por qué motivo meter una animación en el texto?
¿Qué conseguiré introduciendo una animación en el botón de compra?
Automáticamente, al responderte esta pregunta empezarás a aplicar el segundo consejo que voy a darte a continuación…
Consejo número 2: Utiliza las animaciones web con criterio y sentido.
Ahora que has respondido a la pregunta de por qué meter esa animación web que tienes en mente, ya tienes un análisis en tu poder de lo que dichas animaciones pueden aportar.
Por tanto, ahora puedes decidir siguiendo un criterio lógico qué animaciones web utilizar en el diseño de tu blog o web y cuáles debes desechar.
O lo que es lo mismo: puedes utilizarlas con sentido para conseguir un objetivo concreto o mini objetivos que te ayuden a lograr tu objetivo principal.
Vamos a seguir con el ejemplo anterior…
La mariposa de colores puede ser muy bonita a nivel estético, pero pensándolo detenidamente no aporta nada más que eso: estética. A nivel de objetivos…cero patatero.
Por tanto, yo en principio la descartaría.
La animación de entrada en el texto sí que parece más importante.
Quieres que la persona que entra en esta página de tu servicio lea este texto sí o sí para que sea consciente tanto del problema que tiene como de la solución que tú le ofreces.
Al meter una animación de entrada en este texto concreto, si esa persona hace scroll y ve un texto que entra moviéndose, casi inconscientemente se parará a ver que pone.
Tiene todo el sentido del mundo utilizar esa animación web, ¿no crees? 😉
En cuanto a la animación del botón, al igual que ocurría con el texto, también puede ser importante introducirla para que este sea más visible de cara al usuario que está leyendo la página de tu servicio.
Sin embargo, por otro lado, puedes destacar este botón de otra manera en un primer punto de vista (por ejemplo, con un color diferente que destaque) y luego utilizar la animación cuando el usuario pase el ratón por encima de él (dejando más claro aún que es un botón, una llamada a la acción).
En este caso, queda un poco más a criterio personal.
Si quieres destacar el botón desde el primer momento, mete la animación directamente al cargarse el botón.
Si en cambio, crees que no es tan importante esta animación de entrada y puedes destacarlo con el color, la segunda opción es mejor. Además, con ella conseguirás ahorrar un poco de tiempo de carga, que nunca viene mal. 😉
Por supuesto, también puedes meter ambas animaciones a la vez. Como te digo, es un caso que queda más a tu criterio.
¡Genial! Ya sabes qué animaciones utilizar y cuáles no. 😀
Pero aún tengo que darte un último consejo…
Consejo número 3: No abuses de ellas
Quizás al hacer el análisis, bajo tu criterio, te parece que hay muchas animaciones importantes.
Como resultado, al implementarlas en tu web o blog… eso parece un tiovivo que no para de moverse.
Bien, pues aquí te recomiendo hacer un segundo filtro y dejar sólo las imprescindibles.
Abusar de las animaciones web puede generar el efecto contrario que buscas.
No sólo puedes hacer que la experiencia de usuario dentro de tu plataforma sea peor, sino que además puedes conseguir que con tanta animación realmente nada destaque.
Piénsalo: en un tiovivo en constante movimiento…¿destaca algún caballito del resto?
Pues no. Todo se mueve y no te quedas mirando ningún caballito en concreto. Si no que miras a todos, al infinito.
Así que no te pases poniendo animaciones web a todo lo que tú consideras importante. Una vez más, simplificar todo lo máximo posible es la clave. 😉
Cómo hacer animaciones web sencillas en WordPress con Elementor
Para cerrar esta guía sobre las animaciones web, quiero enseñarte cómo puedes fácilmente implementar algunas animaciones básicas en tu WordPress utilizando ese maquetador del que tan enamorado estoy llamado Elementor.
En realidad, es algo muy sencillo de llevar a cabo. Sólo tienes que saber dónde buscar. 🙂
¡Vamos a verlo! Para introducir una animación web de entrada sigue estos pasos:
1. Selecciona con el ratón el elemento de tu diseño que quieres animar. Ten en cuenta que no sólo puedes hacerlo con textos, botones, etc. sino que también tienes la posibilidad de meter una animación web en secciones o columnas enteras.
2. Una vez seleccionado, en la parte de la izquierda ve a las opciones avanzadas de dicho elemento. Es el botón que pone “Avanzado” y tiene el icono de un engranaje.
3. Localiza la opción “Animación de entrada”, que se encuentra justo debajo de las opciones de margen y relleno.
4. Pulsa en dicha opción y te aparecerá un desplegable con un montón de animaciones web que puedes implementar. Selecciona la que quieras y guarda los cambios. 🙂
Desde Elementor también puedes animar los botones al ponerte encima de ellos (lo que se conoce en CSS como la pseudoclase Hover).
Para ello, debes seguir un proceso parecido al anterior:
1. Selecciona el botón que quieres animar haciendo click en él con el ratón.
2. Esta vez no vayas a la opción “Avanzado”, sino que debes ir a “Estilo”.
3. En las opciones del botón, debes encontrar una en la que pone “Hover” . Púlsala.
4. Ahora, justo debajo de las opciones de “Color de fondo” y “Color de texto” del botón, debes localizar la opción que se llama “Animación”.
5. Haz click en la opción mencionada en el paso anterior y selecciona la animación que quieras para tu botón.
Como ves, es bastante sencillo. Pero te dejo también un vídeo cortito explicándote el proceso para que te sea más fácil.
Adicionalmente, si adquieres Elementor Pro (puedes hacerlo desde este enlace) puedes incluir en tus páginas o entradas otras animaciones más avanzadas como pueden ser:
– Sliders de imágenes.
– Portfolios utilizando filtros.
– Flip Box (cajas animadas con dos caras de contenido).
– Animaciones de Cuenta Atrás.
Pero estas no te las explico hoy una a una porque esto alargaría demasiado este artículo y no quiero que te quedes pegado al PC todo el día con este calor infernal que hace.
Otro día te hablo de ellas más detalladamente si quieres. Puedes decirme si estás interesado en los comentarios. 🙂
Conclusión
Hemos llegado al fin de esta guía para usar correctamente las animaciones web.
Espero y deseo que a partir de ahora veas este recurso de diseño como algo más que algo estético o “que queda bien” y que apliques dichas animaciones siempre con un fin concreto.
En resumen: que está muy bien que tu web tenga una buena estética. Pero una buena estética con sentido está mucho mejor.
[piopialo vcboxed=»1″]Una web con buena estética está bien. Una buena estética con sentido está mucho mejor.[/piopialo]
Y, por supuesto, también con mesura. Que tu web no siga el camino de esta otra que mencioné en el post sobre errores que debes evitar cometer en la web de tu negocio.
Como siempre, puedes dejarme tu punto de vista, tu experiencia o tu aporte en los comentarios. Ya sabes que me encanta hablar contigo. 🙂 Nos vemos en el próximo post.
10 comentarios en «Animaciones web: guía para usarlas correctamente e implementarlas con Elementor»
Buenas Jose Antonio!
Coincido totalmente contigo, yo también soy partidario de usarlas tan solo cuando son necesarias. Por ejemplo para algunos bloques de call to action ( llamadas a la acción ) o en botones por dar dinamismo. Me vuelven un poco loco algunas de esas páginas en las que absolutamente todo va apareciendo desde diferentes partes, deslizándose de un lado a otro, cómo si de un puzzle se tratase. Me pregunto si lo que buscan es provocar mareos intencionados a sus lectores, para luego venderles algún tipo de medicamento jajaj
Muy bueno tu artículo!
Saludos!
Hola Adrián,
Así es, no se puede describir mejor: el abuso de animaciones web produce mareo. Un mareo en el que no te centras en nada, te vuelves loco viendo cosas moverse de un lado para otro. En resumen: un caos total.
Los dos ejemplos que has puestos son muy buenos en cuanto a elementos del diseño que sí merece la pena animar para que destaquen más. Como en casi todo, utilizar las cosas en un termino medio es lo ideal.
Gracias por pasarte por el artículo y comentar. ¡Un saludos!
Da gusto cómo te explicas chiquillo!
Gracias porque parece que me has leído el pensamiento pero creo que por ahora tendrán que esperar estas parafernalias, jejeje.
De todos modos me guardo esta información porque igual la necesito más adelante.
Un abrazo
Hola Tania, ¿qué tal estás? 😀
Que esperen esas animaciones si quieres, pero al menos ya sabes como lo puedes implementar. Otro pasito más para que llegues a ser una «pro» de Elementor mejor que yo. 😉
Un fuerte abrazo!
las he empezado a usar y son super faciles de usar y super rápidos y quedan geniales, los use en la pagina de una distribuidora y me ahorre varios plug ins y galerías.
desde que lei tu primer post de elementos lo vengo usando cada día estoy mas contento
gracias crak
Hola Mario,
Genial lo que me dices. La verdad es que sí, estas animaciones son muy sencillas de implementar, muy vistosas y te ahorran plugins o incluso tiempo de carga adicional en el caso de que no estés interesado en implementarlas. Es lo bueno de Elementor (y su combinación con Generatepress): que al final eres tú el que decide que introduces en tu diseño y qué descartas sin estar ceñido a la demo de una plantilla o a elementos que se cargan de manera predeterminada en un tema aunque no los vayas a utilizar. 😉
Gracias a ti por tu comentario. Un fuerte abrazo y feliz lunes. 🙂
Buenos días José Antonio.
He seguido tus indicaciones para crear una animación a un objeto, en este caso una imagen con «Fade in Left» y ocurre que, una vez aplicado y actualizado cuando visualizo la página deja de mostrar la imagen, no aparece.
Gracias
Madre mia, vaya contenido pobre en demostraciones y explicaciones.
Lo siento, no me ha gustado nada
Siento que haya sido así. No se puede gustar a todo el mundo.
Saludos.
Que año de publicación es este articulo. Excelente contenido