¿Alguna vez has visto esas atractivas animaciones de sitios web donde ve una secuencia de contenido mientras se agota y sientes que la imagen de fondo se mueve contigo? Puede ser un texto diferente, imágenes o algo más. Pero independientemente del contenido, es bastante cautivador. Sin embargo, a menos que sea un desarrollador, puede ser difícil agregar este efecto a su propio sitio de WordPress. ScrolSequency resuelve esto. Es un complemento de WordPress Freemium que le permite crear sus propias animaciones de secuencia de desplazamiento que funcionan con la rueda del mouse y los dispositivos táctiles.
Puede usarlo para crear una secuencia de animación atractiva en su página inicial. O bien, también puede usarlo en publicaciones y páginas individuales para dar a los visitantes una forma más cinematográfica y cautivadora de consumir su contenido. Es difícil describir el efecto visual solo con el texto, por lo que puede consultar algunos ejemplos aquí, o aquí, o aquí para ver de qué estoy hablando. Estos son ejemplos reales de lo que te ayuda a crear. O encontré este hermoso gif demostrativo del desarrollador:

En nuestra práctica de scrollSequency, le daré una visión detallada de cómo funciona este complemento y qué puede crear.
Revisión de ScrolSequency: la lista de características nuevamente, es difícil para mí describir el efecto de ScrolseSequency, porque es único lo cautivador que es. Entonces, si no está seguro de de qué estoy hablando, consulte uno de los ejemplos oficiales:
Belleza
Ciberpunk
Reloj (dispositivo de tiempo)
En resumen, ScrollSeSeSeSseShency lo ayuda a crear este efecto en su sitio de WordPress sin necesidad de conocimientos técnicos especiales. Puede crear animaciones cortas o largas combinando una serie de imágenes. El artículo continúa a continuación

Puede agregar contenido utilizando el editor familiar TinyMCE y también puede configurar las animaciones sin código para controlar cómo está involucrado ese contenido.
Honestamente, la mayoría de las características son difíciles de describir sin imágenes, ¡así que vamos directamente a la sección práctica! Básicamente con ScrolSequency ahora, pasemos a practicar y le mostraré cómo es crear su propia secuencia de animación con ScrolSequency. 1. Cree una nueva página para comenzar, vaya a ScrolSequency → Agregue una nueva ScrolSequency. ScrollSequency utiliza una publicación personalizada para almacenar sus secuencias para ver el editor familiar de WordPress:
El primer paso es agregar una “página”. En ScrollSequency, una página lo ayuda a dividir su animación en secuencias lógicas. Puede crear una secuencia de una sola página. O, para animaciones más largas, puede dividir su secuencia en varias páginas.

Cada página tendrá sus propias imágenes, contenido, configuraciones únicas y animaciones (que es lo que agregará en los próximos pasos). Si agrega más páginas, las verá agregar como archivos nuevos. También puede duplicar sus páginas existentes, lo que le ayuda a ahorrar tiempo mientras trabaja:
Por ahora, solo comenzaré con una sola página. 2. Agregue sus imágenes luego, debe agregar las imágenes a su página. El complemento recomienda al menos 50-100 imágenes como punto de partida; esto es lo que le permite crear ese efecto animado genial a medida que los visitantes se agotan. En lugar de una sola animación, el efecto es en realidad “desfile” a través de más de 50 imágenes. Si desea usar una secuencia de desfile tanto en el escritorio como en los dispositivos móviles, debe elegir una relación de apariencia cuadrada. También puede crear secuencias separadas para los visitantes de escritorio y móviles con imágenes optimizadas para cada una. En este momento, debe usar su propio código para mostrar la versión correcta de cada tipo de visitante, pero el desarrollador tiene la intención de agregar esto como una función Built -in.

El artículo continúa a continuación
Creo que sería útil tener una página de documentación que describe la mejor manera de crear esta secuencia de imágenes, porque no es algo que supe cómo hacerlo. Después de un Google rápido, decidí usar esta herramienta de conversión de video en el JPG, que tomó el breve archivo de video que cargué y rompí cada cuadro como una imagen separada.

Nota Después de escribir esta revisión, los desarrolladores leyeron mis pensamientos y agregaron un tutorial útil aquí. Recomiendan VLC o FFMPEG si desea exportar tantos marcos como sea posible, porque el instrumento que utilicé solo convierte un pequeño porcentaje de marcos. Subí un video de 18 segundos y establecí la velocidad de fotogramas en 5 fps. Esto ha transformado mi video de 18 segundos en 94 imágenes JPG separadas, que son lo que usan en ScrollSequency. Aquí está mi página con las 94 imágenes agregadas. Si es necesario, puede reorganizar el pedido con amor y soltar o eliminar la buena función de Imaginio, aquí sería la opción de revertir el orden de las imágenes. Por alguna razón, mis imágenes se insertaron en el orden opuesto (incluso si se numeran correctamente) y sería muy difícil reorganizar manualmente 94 imágenes. Este es un problema con el aplicador de carga de WordPress, no con el complemento en sí (porque me enfrento al mismo problema cuando cargo archivos directamente en la biblioteca de WordPress de medios). Nota: el desarrollador dice que esta característica está en la hoja de ruta, por lo que esperamos que esté aquí pronto. 3. Agregue contenido después de seleccionar las imágenes para una página, obtendrá un nuevo editor donde puede agregar contenido en esa página.

Es el editor clásico de WordPress habitual, que es conveniente porque es una interfaz familiar agradable:
Este contenido se mostrará sobre las imágenes de este lado de la secuencia. Si desea mostrar diferentes conjuntos de contenido, crearía otra página. También puede agregar más líneas de texto y puede animarlas de manera diferente, para que pueda mostrar en diferentes momentos (más sobre esto). También puede agregar HTML, códigos cortos, Ombeds, etc. En el editor, que le brinda mucha flexibilidad. Quiero decir, puedes agregar mucho más que un texto simple.

El artículo continúa a continuación
4. Agregue animaciones (opcionales) Para agregar animaciones a su contenido, deberá agregar selectores CSS al contenido que desea animar. Esta es la parte más técnica del proceso, pero sigue siendo bastante fácil. En el editor de contenido, querrá acceder a la pestaña de texto. Luego agregue una identificación a cada pieza de texto que desee animar. En mi ejemplo, este es un

y a

:

Una vez que haya terminado, desplácese hacia abajo hasta el contenido del contenido de la configuración de la página y haga clic en Agregar animación. Ahora querrá agregar la ID de CSS como selector. Luego puede elegir el número de imagen en el que el elemento se vuelve visible y está oculto nuevamente. El complemento los nombra convenientemente en la lista de secuencias, que facilita el número.

Luego use las cajas de ganado a la animación para elegir el tipo de animación que desea agregar, así como la duración. Tienes cuatro opciones:

Desvanecerse de la opacidad

Moverse de/a la brecha horizontal

Moverse de/a la brecha vertical
Escala de/a
También puede agregar más animaciones al mismo tiempo. Así es como podría verse:
Puede repetir el proceso para animar varias piezas de contenido.Por ejemplo, su subtítulo puede ocurrir de acuerdo con el título principal.Esto le permitirá romper el contenido sin crear otra página.5. Configurar varios.Configuración de la página Para finalizar las cosas, puede configurar algunas otras configuraciones.En primer lugar, puede elegir la duración de la imagen, que es qué tan lejos están las imágenes individuales.Más allá de eso, puede elegir la configuración de Scala y la alineación de imágenes para diferentes tipos de dispositivos: y esto también es para crear una página.Si desea crear otra página en ScrolSequency, solo debe repetir los mismos pasos.6. Configurar varios.Configuración de secuencia Además de la configuración de la página, también tiene algunas configuraciones generales en la barra lateral para controlar toda su secuencia:
Retraso del desfile
El ancho de la imagen
Opacidad de la imagen

CSS personalizado

7. Muestre su secuencia de animación de forma predeterminada, ScrollSequency crea entradas de tipo postpersonalizadas dedicadas para cada secuencia.Puede enviar directamente a esta página si desea enviar a los visitantes directamente a la secuencia.También tiene un editor de contenido para controlar el contenido de esta página.Sin embargo, la mayoría de las personas probablemente preferirán incorporar la secuencia de sí mismas en una página o publicación existente.Para hacer esto, puede usar el siguiente código corto: [ScrolSequency ID = “####”] También puede especificar un margen desde arriba o abajo en el código corto: [ScrolSequence ID = “####” marginop = “-200px” marginbottom = “-200px”] Puede agregar este código corto al editor nativo de WordPress o puede usarlo en su complemento de generación de páginas favorita, como Elementor o Div.¡Y eso es!
Acabas de crear una animación de desfile cautivadora sin ningún código personalizado. ¿Pero actuación? Debido a que carga más de 50 imágenes para crear su secuencia de animación, puede estar un poco preocupado por el rendimiento web y el efecto que esto tendrá en los tiempos de carga de su sitio. Afortunadamente, el complemento contiene esta cuenta cargará/mostrará contenido como Tan pronto como se carga la primera imagen, lo que todavía crea un tiempo rápido para la primera pintura o la pintura de contenido más grande, que es lo que realmente les importa. Una vez que se carga la primera imagen y sus visitantes pueden ver el contenido, la secuencia de desplazamiento continuará cargando las imágenes adicionales que necesita en el fondo. A continuación, querrá asegurarse de optimizar las imágenes que sube para que la primera imagen sea rápida. Pero no tiene que preocuparse por afectar las experiencias de los visitantes debido a la forma en que el ScrolseSequency carga su contenido. La secuencia de secuencia de desplazamiento de desplazamiento viene tanto en una versión gratuita en wordpress.org como en una versión premium con múltiples características. La versión gratuita le permite crear animaciones atractivas, pero tiene límites cuando se trata de opciones de animación y cuántas imágenes puede incluir en una página. Si desea la versión premium, ahora es bastante accesible, porque hay un descuento para las primeras 100 licencias: puede comprar una licencia de un año o vida: un sitio – 19.99 anual o USD 59.99 para la vida.
Cinco sitios: $ 49.99 anuales o $ 149.99 de vida.
Diez sitios: $ 89.99 anuales o $ 269.99 Vida.