Cómo agregar animaciones Lottie a un sitio web Oxygen Builder

Lottie es un tipo de animación que se crea para reemplazar GIF y videos. Es muy fácil y es una nota moderna y profesional para cualquier sitio web. En esta publicación de blog, discutiremos cómo agregar lotes a su sitio de oxígeno.

A diferencia de otros generadores de páginas, Oxygen Builder no tiene una integración nativa, agrega mucho fácilmente a su sitio. En cambio, usaremos un bloque de código, dos bibliotecas JavaScript y una copia y pegado simples para integrar lotes en nuestro sitio. Este artículo tratará cómo agregar una animación básica al bucle, hacer la animación interactiva en términos de posición del desfile en su página, reproducirla solo cuando pase con el mouse sobre él e incluso cambie la animación de la lotería para hacer clic.
Como puede ver, es relativamente fácil agregar mucho a su sitio web de oxígeno y agregar una nota única que hace que el producto final sea más profesional e interesante para sus usuarios. Con un video y un regalo, el impacto en el rendimiento es totalmente insignificante . El video tutorial continúa leyendo para el tutorial escrito. Además, consulte la hoja de trucos (actualización: Desafortunadamente, perdí la hoja de trucos. Así que sin la hoja de trucos, no importa cuánto lo conecto en este artículo y video, ¡lo siento!). Es por eso que el video no figura en la lista.
¿Te gusta este contenido? ¡Suscríbase a nuestro canal!
Suscribirse a isotrópico
Nota: Utilizamos el método web de reproductor para la mayoría de este artículo, no las bibliotecas Bodymovin JS, que es la forma oficial de agregar una lotería a una propiedad web. Esto se debe a que ese método es mucho más complejo, y si simplemente busca una forma de agregar una lotería al constructor de oxígeno, hay formas más fáciles. El método web del reproductor también permite efectos interactivos simples. Sin embargo, si está buscando más funciones, desplácese hacia abajo hasta la última sección de este artículo, que le presentará el método de integración Bodymovin. Usando una biblioteca JavaScript simple y fácil de implementar HTML. Paso 1: Agregue JavaScript El primer paso es agregar bibliotecas aplicables a su sitio de WordPress. Esto se hace de la misma manera que cualquier biblioteca de JavaScript de terceros se incluye en WordPress. Este ejemplo usa un CDN, así que simplemente ingrese este enlace de script CDN en el encabezado de su sitio de WordPress. Recomendamos usar scripts avanzados para hacer esto, pero también puede usar fragmentos de código.
La primera biblioteca es obligatoria y es la biblioteca WebPlayer, que registra un nuevo elemento HTML utilizado para agregar lotes a su sitio <script src = "https://unpkg.com/@lottiefiles/[correo electrónico protegido] /dist/lottie-player.js “> La segunda biblioteca solo es necesaria si implementa efectos interactivos, como animar el lote a medida que el usuario ejecuta la página. <script src = "https://unpkg.com/@lottiefiles/oigemail protegido] /dist/lottie-interactivity.min.js”> puede Copie e inserte estos scripts de Cheatsheet Lottie para Oxygen Builder. Si está buscando rendimiento, alojando el script solo descargándolo a su sitio web de WordPress y luego usando una etiqueta de script o introduciéndolo en el sitio. Es la mejor manera de hacer. este. Una vez que haya instalado estos scripts, es hora de agregar una loción a su sitio. Paso 2: agregar un lotie al constructor de oxígeno si simplemente busca agregar una lotería básica o con efectos flotantes, en realidad es relativo simple. Primero, tome el archivo JSON y cárguelo a su sitio web de WordPress. Tendrá que activar las cargas de JSON: aquí está cómo.
Luego, en una sección html con bloque de código, inserte lo siguiente: src puede ser url de cualquiera JSON Lottie. El sitio web de Lotties.com tiene una función CDN que le permite copiar la URL JSON directamente en lugar de descargarla. Esto es más fácil, pero resulta en el uso de un tercer recurso en su sitio. El sitio web tiene un generador que creará ese código para usted. Es importante comprender cómo integrar realmente la animación en su sitio web, pero el uso del generador puede ahorrarle tiempo. Para hacer esto, haga clic en el botón HTML debajo de una sola lista de Lottie en el sitio y acceda al generador.
Establezca los diferentes efectos y copie solo la segunda línea del resultado en la sección HTML de un bloque de código en su sitio de constructor de oxígeno (ya ha integrado una tercera parte por un CDN y se agrega al encabezado del sitio de WordPress).
Guarde la página y navegue en la parte delantera de su sitio de oxígeno. El lobby ahora se mostrará en la página y reproducirá automáticamente un bucle a través de sus marcos. Si desea agregar una animación muy simple, esta es la forma de hacerlo. Una sola línea de código y una sola biblioteca de JavaScript de terceros. Ahora, puede ir un paso más allá llevando esta animación interactiva. Solo puede configurarlo para jugar cuando un visitante pasa con el cursor del mouse sobre él o cambiar entre los marcos a medida que el visitante se ejecuta a través de su sitio web. Por esto se conocen a los lotes y estableceremos este efecto ahora.

Paso 2.5: Hacer que Lottie interactúe mucho y la interactividad va de la mano. Usando la biblioteca JavaScript del reproductor web, podemos usar la segunda biblioteca que hemos instalado, que está diseñada para ayudarlo a implementar fácilmente efectos interactivos. Necesita JavaScript adicional de terceros. Simplemente establezca los atributos Loop y Hover (omitiendo la reproducción automática) en el HTML original, que está atascado en un bloque de código: en Parade (cuerpo) Este es uno de mis efectos favoritos, que reproduce loto, marco con un marco, ya que el usuario se desplaza en toda la altura de la página web. Esto es realmente único, porque sincroniza la animación con la rapidez con que se ejecuta el usuario y con la dirección en la que se ejecuta el usuario. Para ver un ejemplo real a este respecto, recomiendo descargar nuestra prueba de trucos.

Para hacer esto, agregue Lottie como normalmente continuaría.Especifique una identificación para ello.! .create ({Modo: “Scroll”, Player: ‘ # Lottie’, Acciones: [{Visibilidad: [0.1], Tipo: “Seek”, [0, # total de marcos],},}); Asegúrese de que la ID especificada aquí se ajuste a la ID del elemento de reproductor HTML Lottie. Este código hará que su anime de LOTO se ejecute en la página. Asegúrese de establecer el número total de cuadros para que coincida con el número total de cuadros en el Animación. Puedes darte cuenta de esto yendo al sitio web de Lottiefiles (si lo tienes) y revisando la lista individual.


En el desfile (contenedor), también puede hacer la animación interactiva con un contenedor en particular. Agregue el código HTML y establezca una ID. Luego, en la sección JS del bloque de código, agregue lo siguiente: LottieterActivity.Create ({Modo: “Scroll”, Player: “: [0.1], escriba:” Seek “, marcos: [0, 450]}}) ; El reproductor es la identificación del lote, mientras que el contenedor es la identificación del contenedor desde el cual se ven afectados los efectos de contaminación. Un efecto único que me gusta usar en muchos sitios web es una loción pegajosa que está animada en el pergamino, sincronizada con la ventana de vista en relación con un solo contenedor. Aquí le mostramos cómo hacer esto en formato de video: el sitio web de Lottiefiles también tiene orientación adicional sobre el uso de esta biblioteca de interactividad y lottie basada en JSON, aquí. Además, si desea generar automáticamente el código, simplemente navegue por una lotería individual, haga clic en el botón interactivo grande y el código se completará para usted, simplemente copie e inserte el código HTML en la sección HTML de un bloque de código en Oxygen y JavaScript En la sección JavaScript del mismo bloque de código. Haga clic en el botón Interactividad aquí, puede ver que ya se ha establecido una ID, es lo mismo en el JavaScript apropiado y los marcos coinciden con el número de cuadros en el archivo de lotería:
Todo se prepara al hacer clic si desea animar la animación Lottie al hacer clic en él, requiere un método alternativo de integración. En lugar de usar las dos bibliotecas de JavaScript mencionadas anteriormente, usaremos solo uno y un poco de JavaScript personalizado para completar este trabajo. Este es un método completamente diferente del presentado en las secciones anteriores de este artículo y puede convertirse en un poco complejo. Sin embargo, si tiene un mango de JavaScript, este es probablemente un mejor método. Primero, agregue la siguiente biblioteca JS a su sitio web de WordPress (omitiendo los dos mencionados anteriormente): Agregue un nuevo bloque de código y dentro de él agregue un DIT a la sección HTML. Dirige div, dándole un ancho y altura en la sección CSS. Finalmente, en la sección JavaScript, configuraremos la animación de Lottie y la animaremos cuando hagamos clic. Agregue estos scripts al encabezado con scripts avanzados

Dimensión con CSS // The JS / * Reproducir una animación en cada clic * / Let chechmarkSthetPot = document.querySector (‘. Oncklottie1’); Let animationskipForward = Bodymovin.LoadAnimation ({Container: checkmarksthepp, renderr: ‘svg’, bucle: false, autoplay: “https://assets7.lottiefiles.com/private_files/lf30_jgkflosi.json”}); checkmarkstepot.addeventListener (‘click’, function () {animationskipforward.playsegments ([0.28], true);});