Cómo agregar animación en desplazamiento en Elementor (como Apple AirPods)
Publicado: 2022-07-21¿Está buscando una forma de agregar animación en el desplazamiento en Elementor como Apple y Sony usan en sus sitios web?
Si bien Elementor Pro incluye todo tipo de efectos de animación a través de su función Efectos de movimiento, no le permite crear una secuencia de imágenes realmente atractiva en los efectos de desplazamiento como los que ve en el sitio web de Apple (además de muchos otros). Por ejemplo, la página de AirPods Pro .
Con el complemento Scrollsequence, puede agregar fácilmente este tipo de animaciones cinematográficas de desplazamiento a Elementor ( incluida la versión gratuita de Elementor ).
Es difícil describirlo con palabras, así que mira el siguiente ejemplo ( la animación se mueve a medida que un visitante se desplaza hacia abajo en la página ):
Si desea obtener más información sobre Scrollsequence en general, puede leer nuestra revisión completa de Scrollsequence.
Sin embargo, en esta publicación, nos centraremos específicamente en cómo agregar animación en el desplazamiento en Elementor usando Scrollsequence.
¡Vamos a profundizar en!
Cómo crear animaciones cinematográficas de desplazamiento en Elementor con Scrollsequence
Aquí hay una mirada de alto nivel a los pasos involucrados: siga leyendo para ver el tutorial detallado:
- Instale el complemento de secuencia de desplazamiento
- Crea tu animación
- Agregue la animación de desplazamiento a Elementor
1. Instale el complemento Scrollsequence
Para comenzar, querrá instalar el complemento Scrollsequence en su sitio web de Elementor.
Scrollsequence tiene una versión gratuita en WordPress.org, así como una versión premium que agrega más funciones. La versión gratuita le permite configurar animaciones básicas con hasta tres escenas y un máximo de 100 imágenes por escena, mientras que la versión premium elimina todos los límites y también agrega animaciones y funciones más avanzadas.
Scrollsequence - Complemento de animación de imagen de desplazamiento cinematográficoVersión actual: 1.2.7
Última actualización: 9 de mayo de 2022
secuencia de desplazamiento.1.2.7.zip
También puede probar todas las funciones premium de forma gratuita con una prueba gratuita de 14 días, por lo que no necesita pagar nada solo para probarlo.
Si decide que desea la versión premium después de la prueba, comienza en $ 69.99. Sin embargo, puede usar nuestro cupón exclusivo de Scrollsequence para ahorrar un 20%:
Alojamiento WordPress 20i
Detalles
Descuento exclusivo del 50% de 20i WordPress Hosting, solo para lectores de WP Mayor.
Astra
Detalles
Obtenga un descuento exclusivo del 10 % en Astra Pro, el paquete Essential y el paquete Growth.
Oferta de cumpleaños de Astra
Detalles
25 % de descuento en paquetes Astra Pro o Astra Agency, además de obtener una entrada gratuita en un sorteo para ganar un nuevo iMac.
autonomia
Detalles
Descuento exclusivo del 10 % en Autonami: administre las relaciones con los clientes mediante el etiquetado, la segmentación y las transmisiones sin salir de WordPress.
Avada
Detalles
Avada es el mejor creador de sitios web de WordPress. Con la confianza de principiantes, especialistas en marketing y profesionales, creado teniendo en cuenta la facilidad de uso y el rendimiento.
Granero2
Detalles
¡Los lectores de WP Mayor obtienen un 5 % de descuento adicional a la oferta del 30 % del Black Friday! Esto se aplicará automáticamente al finalizar la compra.
Constructor de castores
Detalles
Obtenga un 25% de descuento en Beaver Builder, el creador de páginas de WordPress en el que puede confiar para su negocio.
host azul
Detalles
Bluehost es nuestro proveedor de alojamiento compartido de WordPress recomendado. Obtenga hasta $ 15 de descuento por mes en el alojamiento compartido de Bluehost.Dominio Gratis con Bluehost
Detalles
Obtenga su registro de dominio gratuito al registrarse en el alojamiento asequible y confiable de Bluehost.
Boletín
Detalles
¡20% de descuento en todos los planes de Bulletin! El complemento de banner de anuncio más fácil y poderoso para su sitio de WordPress.
Elementor Pro
Detalles
Únase a una comunidad de más de 8 millones de profesionales que crean sitios web, colaboran y crecen juntos con la plataforma de creación web n.º 1 para WordPress.
Temas de motor
Detalles
Obtenga un 35 % de descuento en EngineThemes: temas de aplicaciones de WordPress creados por expertos para su oficio.
Complemento esencial
Detalles
Obtenga un 15 % de descuento en el paquete de complementos esenciales.
Pronto todo en uno
Detalles
1 mes GRATIS para todos los nuevos clientes en la solución Pronto All-in-one, un tema de fotografía líder para WordPress.
Marmota
Detalles
Descuento exclusivo del 15 % en Groundhogg.
cultivador
Detalles
30% de descuento exclusivo en Growanizer: la nueva generación de ventas inteligentes para WooCommerce.
Presencia Humana
Detalles
Descuento exclusivo del 20 % en presencia humana: detenga las compras de bots y forme spam sin afectar su experiencia de usuario.
IconicWP
Detalles
Este Black Friday puede obtener hasta un 40% de descuento en los complementos y paquetes de complementos WooCommerce de IconicWP que aumentan las ventas.IconicWP
Detalles
Este mes de WooCommerce, obtenga hasta un 15 % de descuento en los complementos y paquetes de complementos de WooCommerce que aumentan las ventas de IconicWP.
KBucket
Detalles
Obtenga un 40 % de descuento en el complemento KBucket: cree un centro de contenido personalizable.
Linguise
Detalles
20 % de descuento en Linguise: aumente el tráfico de su sitio web con traducciones instantáneas en más de 80 idiomas.
Red líquida
Detalles
35% de DESCUENTO durante 4 meses en alojamiento administrado de WordPress.Red líquida
Detalles
Obtenga un 33 % de descuento de Liquid Web: especialistas en hospedaje de WooCommerce administrado.
Widget de magnificar video
Detalles
Incruste, personalice y realice videollamadas de forma segura con el widget Magnifi Video desde su sitio web en cuestión de minutos.
Complementos maestros para Elementor
Detalles
Descuento exclusivo del 50% de Master Addons para Elementor.
Pegamento para boletines
Detalles
Newsletter Glue conecta su servicio de correo electrónico con WordPress para que pueda publicar boletines de la misma forma que publica publicaciones de blog.Obtén un 15% de descuento en tu primera compra.
Notificación X
Detalles
La mejor solución de marketing de prueba social y FOMO en la que confían más de 30 000 empresas en todo el mundo.
OceanWP
Detalles
¡El tema de WordPress que te da más!
ordenable
Detalles
Lleve los pedidos en línea a un nivel completamente nuevo. Consigue el mejor precio en Orderable con el código WPMAYOR .
embudo
Detalles
Obtenga un 25% de descuento durante los primeros 3 meses en Outfunnel: realice un seguimiento de las visitas al sitio web y sincronice los envíos de formularios con su CRM.
Página de pago
Detalles
15% de descuento en la página de pago.
peepso
Detalles
Obtenga un 10 % de descuento en un paquete anual de PeepSo.
rápido
Detalles
Obtenga un 20% de descuento en sus primeros dos meses en todos los paquetes de QuicqSecuencia de desplazamiento
Detalles
Consigue un 20% de descuento exclusivo en Scrollsequence con el cupón WPMAYOR20. Cree su animación de desplazamiento en minutos.
ComprarListo
Detalles
Obtenga un 20% de descuento exclusivo en ShopReady.
Proyector PRO
Detalles
¡Obtenga un 20 % de descuento en Spotlight PRO para duplicar el impacto de su contenido de Instagram!
Venta estelar
Detalles
¡Obtenga un 40% de descuento en todos los complementos IconicWP, incluidos sus paquetes (obtenga un descuento masivo de $ 199 en el paquete All Access)!
Venta estelar
Detalles
Obtenga un 40 % de descuento en The Events Calendar Pro: calendarios, venta de entradas y potentes herramientas de WordPress para administrar sus eventos de principio a fin.
Tripetto Pro
Detalles
Obtenga un 10 % de descuento en las licencias de Tripetto Pro.
IlimitadoWP
Detalles
Obtenga un 20% de descuento en su primer mes de UnlimitedWP.
Compositor visual
Detalles
Obtenga un 10% de descuento en Visual Composer: cree su sitio web de WordPress hoy. Comience fácil. Construye rápido.WooFunnels
Detalles
¡Duplique sus ganancias en esta temporada alta! ¡Grandes ahorros en WordPress Funnel Builder y Marketing Automation Engine de WooFunnels!
Administrar WP
Detalles
30 % de descuento exclusivo en WP Adminify: un poderoso conjunto de herramientas para su tablero de WordPress.
Mejoras de WP
Detalles
10 % de descuento en WP Buffs: su socio técnico las 24 horas, los 7 días de la semana para planes de cuidado y servicios de mantenimiento.
WP llamar la atención
Detalles
Ahorre un 40 % en las ediciones ilimitadas de Draw Attention, la herramienta n.º 1 para crear imágenes interactivas en WordPress.
Motor de trabajo en equipo
Detalles
Obtenga 4 meses gratis en planes anuales o 20% de descuento en su primer mes en planes mensuales.
Administrador de eventos de WP
Detalles
Obtenga un 10% de descuento en WP Event Manager: calendario, venta de entradas y potentes herramientas de WordPress para administrar sus eventos.
WP Migrar DB Pro
Detalles
Oferta para nuevos clientes: ahorre hasta un 50 % en su primer año de WP Migrate DB Pro para uso individual. WP Migrate DB Pro le permite copiar todo su sitio de WordPress de un entorno a otro con un solo clic en su tablero.
WP Webhooks Pro
Detalles
15% de descuento exclusivo en WP Webhooks Pro. Amplíe su sitio web con el sistema webhook más potente. (El descuento se aplica al primer período de facturación).
Complementos Yith WooCommerce
Detalles
¡Hazte con todo con un 30% de descuento! No se necesitan cupones.2. Crea tu animación
Una vez que haya instalado el complemento, diríjase a Scrollsequence → Add New Scrollsequence para configurar su primera animación de desplazamiento.
Cada animación consta de una o más escenas y cada escena contendrá varias imágenes dispuestas en una secuencia. Luego, el complemento generará la animación basada en todas las imágenes de la secuencia.
Una “escena” es una secuencia de animación completa. Si decide agregar varias escenas, el usuario avanzará a la siguiente escena una vez que se haya desplazado por completo a través de la animación de la primera escena.
En la mayoría de las situaciones, querrá basar las imágenes de su secuencia en un video base. Para convertir un video existente en una secuencia de imágenes separadas, puede usar una de estas herramientas de la documentación del complemento. La opción más simple es el convertidor Ezgif basado en navegador, pero obtendrá una mejor calidad con un software dedicado.
Crear escenas y agregar imágenes
Una vez que haya creado su animación de alto nivel, haga clic en el botón Agregar escena para agregar su primera escena.
Esto expandirá un nuevo conjunto de opciones que le permitirán cargar todas las imágenes para su secuencia de animación. Los desarrolladores recomiendan cargar al menos 50-100 imágenes por escena para garantizar una animación fluida.
Una vez que cargue las imágenes, puede usar la opción de clasificación para asegurarse de que estén en el orden correcto. Si no están en el orden correcto, su animación no se verá bien .
Si desea crear otra escena, puede hacerlo haciendo clic en el icono más junto a la pestaña Escena 0 .
Agregar contenido fijo y animaciones
Para agregar el contenido fijo que aparece encima de las imágenes de animación, puede usar el cuadro Contenido fijo para el contenido en sí.
Luego, puede usar la sección Animación de contenido fijo para configurar sus reglas de animación. Cubrimos esto en detalle en el Paso #4 de nuestra revisión de Scrollsequence, pero la idea básica es la siguiente:
- Agrega selectores de CSS al contenido en el cuadro Contenido fijo (usando la pestaña Texto ).
- Usted configura sus reglas de animación en el cuadro Animación de contenido fijo apuntando a esos selectores de CSS y luego también eligiendo el tiempo para animar el contenido dentro de esos selectores. Por ejemplo, podría decir que desea mostrar cierto texto para las imágenes 30-55.
Este es un ejemplo de cómo agregar los selectores de CSS a su contenido:
Y luego, esto es lo que parece configurar las reglas de animación:
Además de animar su contenido fijo, también puede ajustar la duración de la imagen.
Configure otros ajustes según sea necesario
La configuración de sus escenas, imágenes y contenido fijo son las partes más importantes de la creación de una animación.
Sin embargo, Scrollsequence también le brinda otras configuraciones en esta interfaz que quizás desee explorar.
Por ejemplo, puede ajustar la escala y la alineación de la imagen en la parte inferior del área de configuración de la escena.
También obtiene algunas configuraciones generales en el área Configuración de secuencia de desplazamiento de la barra lateral. En este widget, puede controlar el ancho de la imagen y el retraso de desplazamiento, así como agregar CSS personalizado si lo desea.
Publica tu animación
Para finalizar, haga clic en el botón Publicar para publicar su animación, tal como lo haría con una publicación de blog.
Una vez que lo publique, puede encontrar el código abreviado de esta animación yendo a Scrollsequence → Scrollsequence :
Mantenga este código abreviado a mano porque lo necesitará en un segundo para agregar animación al desplazarse en Elementor.
3. Agregue su animación de desplazamiento a Elementor
Una vez que esté satisfecho con su animación de desplazamiento, estará listo para agregarla a su diseño de Elementor.
Puede crear un diseño de Elementor separado exclusivamente para la animación de desplazamiento. O también podría incluir la animación de desplazamiento como parte de un diseño más grande. En este caso, el contenido por encima y por debajo de la animación de desplazamiento permanecería estático.
Para comenzar, inicie el editor de Elementor para el contenido en el que desea agregar su animación de desplazamiento.
Luego, aquí se explica cómo agregar la animación de desplazamiento:
- Agregue el widget de código abreviado de Elementor donde desea que aparezca la animación de desplazamiento.
- Pegue el código abreviado de la animación ( nuevamente, puede encontrarlo yendo a Scrollsequence → Scrollsequence ) .
- Haga clic en el botón Aplicar en la configuración del widget Shortcode para que Elementor genere una vista previa en vivo de su animación en el editor.
Puede experimentar su animación completa sin salir del editor de Elementor, ¡simplemente desplácese hacia abajo en la vista previa visual!
Y eso es todo: acaba de aprender cómo configurar una animación de desplazamiento cinematográfico en Elementor, tal como lo hace Apple con muchas de sus páginas de destino.
Si desea crear animaciones adicionales o agregar nuevas escenas a su animación, solo necesita repetir los pasos anteriores.
Cree su primer Elementor On Scroll Animation hoy
A la gente le encanta Elementor por la flexibilidad que te brinda cuando se trata de crear tu diseño.
Sin embargo, una cosa que Elementor no puede hacer por sí solo es configurar los tipos de cinemáticas en animaciones de desplazamiento que ve de Apple y otros.
Al combinar Elementor con Scrollsequence, puede agregar fácilmente este tipo de animaciones a sus diseños de Elementor.
Si quieres probarlo, tienes dos opciones:
- Simplemente use la versión gratuita de Scrollsequence en WordPress.org.
- Utilice la prueba gratuita de 14 días para acceder a todas las funciones premium de Scrollsequence.
Si decide que desea utilizar la versión premium de Scrollsequence, puede utilizar nuestro cupón exclusivo de Scrollsequence para ahorrar un 20 % en su pedido.
Alojamiento WordPress 20i
Detalles
Descuento exclusivo del 50% de 20i WordPress Hosting, solo para lectores de WP Mayor.Astra
Detalles
Obtenga un descuento exclusivo del 10 % en Astra Pro, el paquete Essential y el paquete Growth.Oferta de cumpleaños de Astra
Detalles
25 % de descuento en paquetes Astra Pro o Astra Agency, además de obtener una entrada gratuita en un sorteo para ganar un nuevo iMac.autonomia
Detalles
Descuento exclusivo del 10 % en Autonami: administre las relaciones con los clientes mediante el etiquetado, la segmentación y las transmisiones sin salir de WordPress.Avada
Detalles
Avada es el mejor creador de sitios web de WordPress. Con la confianza de principiantes, especialistas en marketing y profesionales, creado teniendo en cuenta la facilidad de uso y el rendimiento.Granero2
Detalles
¡Los lectores de WP Mayor obtienen un 5 % de descuento adicional a la oferta del 30 % del Black Friday! Esto se aplicará automáticamente al finalizar la compra.Constructor de castores
Detalles
Obtenga un 25% de descuento en Beaver Builder, el creador de páginas de WordPress en el que puede confiar para su negocio.host azul
Detalles
Bluehost es nuestro proveedor de alojamiento compartido de WordPress recomendado. Obtenga hasta $ 15 de descuento por mes en el alojamiento compartido de Bluehost.Dominio Gratis con Bluehost
Detalles
Obtenga su registro de dominio gratuito al registrarse en el alojamiento asequible y confiable de Bluehost.Boletín
Detalles
¡20% de descuento en todos los planes de Bulletin! El complemento de banner de anuncio más fácil y poderoso para su sitio de WordPress.Elementor Pro
Detalles
Únase a una comunidad de más de 8 millones de profesionales que crean sitios web, colaboran y crecen juntos con la plataforma de creación web n.º 1 para WordPress.Temas de motor
Detalles
Obtenga un 35 % de descuento en EngineThemes: temas de aplicaciones de WordPress creados por expertos para su oficio.Complemento esencial
Detalles
Obtenga un 15 % de descuento en el paquete de complementos esenciales.Pronto todo en uno
Detalles
1 mes GRATIS para todos los nuevos clientes en la solución Pronto All-in-one, un tema de fotografía líder para WordPress.Marmota
Detalles
Descuento exclusivo del 15 % en Groundhogg.cultivador
Detalles
30% de descuento exclusivo en Growanizer: la nueva generación de ventas inteligentes para WooCommerce.Presencia Humana
Detalles
Descuento exclusivo del 20 % en presencia humana: detenga las compras de bots y forme spam sin afectar su experiencia de usuario.IconicWP
Detalles
Este Black Friday puede obtener hasta un 40% de descuento en los complementos y paquetes de complementos WooCommerce de IconicWP que aumentan las ventas.IconicWP
Detalles
Este mes de WooCommerce, obtenga hasta un 15 % de descuento en los complementos y paquetes de complementos de WooCommerce que aumentan las ventas de IconicWP.KBucket
Detalles
Obtenga un 40 % de descuento en el complemento KBucket: cree un centro de contenido personalizable.Linguise
Detalles
20 % de descuento en Linguise: aumente el tráfico de su sitio web con traducciones instantáneas en más de 80 idiomas.Red líquida
Detalles
35% de DESCUENTO durante 4 meses en alojamiento administrado de WordPress.Red líquida
Detalles
Obtenga un 33 % de descuento de Liquid Web: especialistas en hospedaje de WooCommerce administrado.Widget de magnificar video
Detalles
Incruste, personalice y realice videollamadas de forma segura con el widget Magnifi Video desde su sitio web en cuestión de minutos.Complementos maestros para Elementor
Detalles
Descuento exclusivo del 50% de Master Addons para Elementor.Pegamento para boletines
Detalles
Newsletter Glue conecta su servicio de correo electrónico con WordPress para que pueda publicar boletines de la misma forma que publica publicaciones de blog.Obtén un 15% de descuento en tu primera compra.
Notificación X
Detalles
La mejor solución de marketing de prueba social y FOMO en la que confían más de 30 000 empresas en todo el mundo.OceanWP
Detalles
¡El tema de WordPress que te da más!ordenable
Detalles
Lleve los pedidos en línea a un nivel completamente nuevo. Consigue el mejor precio en Orderable con el código WPMAYOR .embudo
Detalles
Obtenga un 25% de descuento durante los primeros 3 meses en Outfunnel: realice un seguimiento de las visitas al sitio web y sincronice los envíos de formularios con su CRM.Página de pago
Detalles
15% de descuento en la página de pago.peepso
Detalles
Obtenga un 10 % de descuento en un paquete anual de PeepSo.rápido
Detalles
Obtenga un 20% de descuento en sus primeros dos meses en todos los paquetes de QuicqSecuencia de desplazamiento
Detalles
Consigue un 20% de descuento exclusivo en Scrollsequence con el cupón WPMAYOR20. Cree su animación de desplazamiento en minutos.ComprarListo
Detalles
Obtenga un 20% de descuento exclusivo en ShopReady.Proyector PRO
Detalles
¡Obtenga un 20 % de descuento en Spotlight PRO para duplicar el impacto de su contenido de Instagram!Venta estelar
Detalles
¡Obtenga un 40% de descuento en todos los complementos IconicWP, incluidos sus paquetes (obtenga un descuento masivo de $ 199 en el paquete All Access)!Venta estelar
Detalles
Obtenga un 40 % de descuento en The Events Calendar Pro: calendarios, venta de entradas y potentes herramientas de WordPress para administrar sus eventos de principio a fin.Tripetto Pro
Detalles
Obtenga un 10 % de descuento en las licencias de Tripetto Pro.IlimitadoWP
Detalles
Obtenga un 20% de descuento en su primer mes de UnlimitedWP.Compositor visual
Detalles
Obtenga un 10% de descuento en Visual Composer: cree su sitio web de WordPress hoy. Comience fácil. Construye rápido.WooFunnels
Detalles
¡Duplique sus ganancias en esta temporada alta! ¡Grandes ahorros en WordPress Funnel Builder y Marketing Automation Engine de WooFunnels!Administrar WP
Detalles
30 % de descuento exclusivo en WP Adminify: un poderoso conjunto de herramientas para su tablero de WordPress.Mejoras de WP
Detalles
10 % de descuento en WP Buffs: su socio técnico las 24 horas, los 7 días de la semana para planes de cuidado y servicios de mantenimiento.WP llamar la atención
Detalles
Ahorre un 40 % en las ediciones ilimitadas de Draw Attention, la herramienta n.º 1 para crear imágenes interactivas en WordPress.Motor de trabajo en equipo
Detalles
Obtenga 4 meses gratis en planes anuales o 20% de descuento en su primer mes en planes mensuales.Administrador de eventos de WP
Detalles
Obtenga un 10% de descuento en WP Event Manager: calendario, venta de entradas y potentes herramientas de WordPress para administrar sus eventos.WP Migrar DB Pro
Detalles
Oferta para nuevos clientes: ahorre hasta un 50 % en su primer año de WP Migrate DB Pro para uso individual. WP Migrate DB Pro le permite copiar todo su sitio de WordPress de un entorno a otro con un solo clic en su tablero.WP Webhooks Pro
Detalles
15% de descuento exclusivo en WP Webhooks Pro. Amplíe su sitio web con el sistema webhook más potente. (El descuento se aplica al primer período de facturación).Complementos Yith WooCommerce
Detalles
¡Hazte con todo con un 30% de descuento! No se necesitan cupones.¿Todavía tiene alguna pregunta sobre cómo agregar animación en el desplazamiento en Elementor? Danos un grito en la sección de comentarios y cuéntanos qué tienes en mente.