Cómo añadir animaciones a tu web

Video tutorial

Primeros pasos

Para empezar debemos darle un ancho completo a la sección de esta manera ocupara toda la pantalla. En la opción de alto seleccionamos «ajustar a la pantalla»

Lo siguiente sera insertar una sección interior con las columnas que necesitemos, aquí es donde va a ir el contenido.

¡Ahora viene lo bueno! buscamos el widget de Lottie y lo colocamos al final de la sección, esta animación será la que nos llevará a la siguiente diapositiva.

Podemos añadir animaciones Lottie de dos maneras, la primera desde un archivo JSON y la segunda desde una Url externa, esta ultima es la mas recomendable, ya que así no consumirás recursos de memoria de tu dominio.

Widged Loottie

El siguiente paso sera buscar una animación de scroll. Una página estupenda donde encontraras muchas animaciones gratuitas es esta: “Free Lottie Animation Files” solo necesitaras registrarte para acceder a su extensa biblioteca de medios.

Una vez encuentres la animación que mas te guste, copia su Url y la pégala en la opción “External URL ” de las opciones de contenido del widget Lottie.

Para que al hacer click en el lottie, nos lleve hasta la siguiente diapositiva, lo que debemos hacer es identificar cada sección con un ID de CSS, esta opción esta en los ajustes avanzados al editar la sección.

Una vez hayas puesto un identificador a la sección, nos vas de nuevo al widget de lottie, y en la pestaña de contenido, en la opción de “Enlace” escogemos “URL personalizada” aquí escribimos el ID de CSS de la sección a la que queremos que nos lleve. Tienes que escribirla de esta forma: #nombre del ID de CSS.

¡¡Ya Esta!!

Así de fácil es diseñar tu web en forma de diapositivas, con una animación de scroll.

Y como sabemos que una imagen vale mas que mil palabras, también te dejamos un video donde podrás ver todos los pasos anteriores.

Espero que este tutorial te sirva para que le des a tu página un diseño diferente y dinámico.

Y si necesitas ayuda para diseñar tu web profesional, estaremos encantados de trabajar junto a ti. Puedes conocer al equipo de la Nube y preguntarnos lo que quieras.

©2020 LaNube Marketing Todos los derechos reservados

Diseño web y SEO para pequeños negocios en Madrid