Hola, hoy quiero enseñarte como poner animaciones en una página web de una manera muy sencilla, muy rápida, con la ayuda de una página de animación gratis y los cursos de diseñador web con los que me formé.
Es la que yo utilizo siempre para crear páginas con animaciones, no obstante, si todavía no la has visto puedes echar un vistazo a esta divertida página web.
Índice de contenidos
1.¿Qué son las animaciones web?
2. 3 ventajas de usar animaciones web de LottieFiles.
- 2.1. Insertar animaciones web en WordPress.
- 2.2. Es de las mejores páginas de animaciones gratis.
- 2.3. Es una página de animaciones web fácil de usar.
3.¿Cómo poner animaciones en una página web? Paso a paso
- 3.1. Lottie free
- 3.2. Animaciones de Lottie free
- 3.3. Como usar la animación elegida
- 3.4. Animación web en HTML
¿Qué son las animaciones web?
Las animaciones web son efectos visuales que crean una sensación de movimiento. Aunque estamos acostumbrados a verlas en diferentes elementos dentro de numerosas páginas web, ya sea en botones, sliders, imágenes…
Pero en este tutorial de Lotties Files en español vamos a ir un paso más allá, porque este tipo de animaciones te permiten contar historias, incluso sirviendo de guía para que el usuario tenga una navegación fácil y divertida dentro de tu web.
3 ventajas de usar animaciones web de Lottie Files
En primer lugar debes saber que seguramente existan muchas otras ventajas de Lottie files, y dependiendo del caso de cada uno, pues valoraremos unas cosas u otras.
Yo he querido compartir contigo tres, que para mí, han sido fundamentales para interesarme por esta herramienta de trabajo.
1. Insertar animaciones web en WordPress
En primer lugar, debes saber que funciona muy bien con nuestro querido WordPress, y también con el tema Divi de elegant themes, que es con el que te mostraré la manera de insertar animaciones dentro de tu página.
2. Es de las mejores páginas de animaciones gratis
Lottie files tienen miles de animaciones gratuitas y también animaciones premium, incluso puedes contratar animadores que crearán animaciones personalizadas para ti.
Puedes elegir animaciones destacadas, populares, recientes, como por ejemplo, imágenes animadas COVID-19.
3. Es una página de animaciones web fácil de usar
Una de las cosas por las que me encanta Lottie files es por ser una página web intuitiva, de fácil navegación y por supuesto se puede traducir al español ¡¡¡No se puede pedir más!!!
¿Cómo poner animaciones en una página web?
Hay varias maneras para poner animaciones en una página web. Puede ser a través de un plugin, a través de una librería enlazando un código, o como vamos a hacer en este tutorial Lottie files, de forma un poco más manual.
Ahora que ya sabes lo que es una animación para páginas web y también como insertarlas, vamos a comenzar con la práctica.
1. Lottie free:
lottiefiles.com – discovery (pestaña superior del menú) – free animations
2. Animaciones de Lottie free
Simplemente haz clic en la animación web que más te guste.
3. Como usar la animación elegida
Haz scroll – clic en HTML
4. Animación web en HTML
Haz scroll (hasta dónde te indico en la imagen) – desactiva controls – copia código HTML
En mi caso desactivo siempre “controls” para que no aparezca la barra que ves debajo de la animación en la imagen. Este paso por supuesto es opcional.
¿Cómo poner animaciones en WordPress con Divi?
Por último, para hacer animaciones en tu WordPress con Divi, tienes que seguir unos sencillos pasos, que no te llevarán más de un minuto.
1. Elige el módulo código de Divi.
2. Pega el código que copiaste anteriormente en la página Lottie files.
3. Guardar cambios y salir del constructor visual.
De esta forma tan sencilla podrás poner animaciones dentro de tu sitio. Por último, debes tener en cuenta que para ver la animación debes salir del constructor visual, no podrás verlo mientras estés dentro del constructor visual de Divi.
Consejo de amigo
Un último consejo antes de terminar con el tutorial Lottie file y es que no te vuelvas loc@ poniendo animaciones en cada sitio de tu página . En mi caso, he insertado una animación cómo máximo en cada página de mi web.
