Revisión de ScrolSequency: Agregar animaciones cinematográficas a WordPress

¿Desea crear una experiencia más cautivadora y atractiva para los visitantes de su sitio de WordPress? En nuestra revisión de ScrollSequency, le mostraremos cómo puede usar este complemento Freemium para crear animaciones de desfile increíbles en su sitio sin escribir una sola línea de código, solo como Apple usa en su sitio web AirPods Pro. Realmente no puedo describir el conjunto completo de funciones solo con texto, por lo que solo comenzaré con un ejemplo real: en resumen, el complemento de ScrollSequency le ayuda a crear exactamente el mismo efecto en su sitio de WordPress. Todo lo que tiene que hacer es subir algunas imágenes, agregar algún texto y configurar algunas animaciones.
En general, esta es una muy buena manera de crear una experiencia más “cinemática” en su sitio web de WordPress. Continúe leyendo nuestra revisión de ScrollSequency para averiguar cómo funciona …

¡Obtenga un 20% de descuento! Exclusivo 20% de descuento en scrollSequency cuando se usa el código de cupón WPMayor20 Get ScrollSequency
Revisión de ScrollSequency: Explorar la lista de características La característica básica de ScrolSequency es que lo ayuda a crear el efecto único de animación de desfile en el ejemplo anterior. También puede consultar algunos ejemplos en vivo aquí si desea verlos en acción:
Página inicial de la secuencia del desfile
Belleza
Reloj
Ciberpunk
Puede crear animaciones ilimitadas y colocarlas en cualquier lugar de su sitio utilizando un código corto, con planes de agregar un bloque dedicado de Gutenberg. Plugin también le permite crear páginas autónomas dedicadas para sus animaciones si lo prefiere. La animación no es una sola imagen animada o un video. En cambio, hay una serie de más de 50 imágenes, todas reunidas, que parecen ser el anime cuando un visitante se está agotando. Puede elegir cualquier fondo que desee y también puede crear más “páginas” para cambiar la animación de fondo a medida que los visitantes continúan disminuyendo. Para agregar contenido, podrá usar un editor de texto simple (editor antiguo de WordPress, alias el clásico Editor TinyMCE). Además de agregar el texto y formatearlo usando el editor, puede incluir otros tipos de contenido, como códigos cortos de otros complementos, Ombeds, su propio HTML personalizado y más. Para agregar el efecto de desfile, podrá animar cada elemento que agregue al editor de texto. También puede usar diferentes animaciones para diferentes partes del contenido, lo que le permite cambiar el texto a medida que un usuario se ejecuta.
Hay algunas otras funciones más pequeñas que podrían ser útiles, que verá en la sección práctica. Cómo crear una animación de Desfile de ScroleSequency En esta sección, le mostraré cómo funciona realmente el scrollSequency. Lo guiaré a través de cada paso del proceso, lo que lo ayudará a comprender cómo funciona y también le dará un vistazo a las características y opciones de configuración más pequeñas. Nota: uso la versión premium para este tutorial, pero la mayoría de estas funciones también están disponibles en la versión gratuita. 1. Cree una nueva “página” Al crear la animación del desfile, puede confiar en una sola secuencia de animación o agregar más secuencias que cambian a medida que un usuario se ejecuta. Cada secuencia en la animación general se llama “página”. Puede crear una sola página. O puede agregar cuántas páginas nuevas desea. Si agrega una nueva página, recibirá su propia pestaña y podrá realizar todas las acciones que detallará a continuación para cada página:
2. Prepare y cargue sus imágenes luego, debe cargar las imágenes que usará para crear su animación. Nuevamente, la scrollSequencia no se basa en una sola imagen GIF, como solía hacerlo. En cambio, hay varias más de 50 imágenes, lo que le permite crear el efecto cautivador. ¿Te preocupa el impacto en el rendimiento de carga de más de 50 imágenes en una página? ¡No te preocupes! El complemento mostrará contenido tan pronto como se cargue la primera imagen, por lo que no tendrá problemas para bloquear, y los tiempos de carga percibidos por su visitante seguirán bien (con valores como la pintura de contenido más grande y la primera pintura de contenido). Para obtener estas imágenes, puede hacer un breve video clip y usar un instrumento para convertirlo en imágenes para cada cuadro, más sobre él a continuación. Pero primero, hablemos sobre el aspecto del aspecto de sus imágenes. Si desea utilizar la misma secuencia de animación para visitantes de escritorio y móviles, el desarrollador recomienda elegir una relación de apariencia cuadrada. Si prefiere una relación de apariencia más amplia para los visitantes en el escritorio, otra opción es crear secuencias de animación separadas para cada tipo de visitante.
Actualmente, no puede hacer esto dentro del complemento, aunque el desarrollador planea agregarlo como una característica. Sin embargo, puede hacerlo con un complemento de terceros que le permite mostrar un código corto en el dispositivo o usar su propio código. A continuación, hablemos sobre cómo generar las imágenes que necesita. Nuevamente, querrá comenzar con un video corto (uso un clip sin copyright de Pexels). Luego use una de estas herramientas que el desarrollador ha probado para convertir en imágenes para cada cuadro. Personalmente, utilicé el convertidor EZGIF gratuito. Sin embargo, si desea una conversión con una velocidad de fotogramas más alta, puede preferir software de escritorio, como VLC o FFMPG. Convertir y luego darle una zip con todas las imágenes. El desarrollador recomienda 50-100 imágenes, por lo que querrá hacer coincidir la velocidad de cuadro con ese número. Usé un video de siete segundos a 10 fps, lo que me da 70 imágenes:

Probablemente querrá usar una velocidad de fotogramas más alta, porque 10 FPS hace que la secuencia de animación sea un poco “embarazo”. Una vez que tenga las imágenes, cárguelas a su página de Scroll Showsequency. Desafortunadamente, debido a una rareza de cómo funciona el aplicador de carga de WordPress, algunas de sus imágenes pueden ser incorrectas. O, toda la secuencia podría cargarse. Nuevamente, este es un problema con WordPress, no con ScrolSequency.
Si esto sucede, puede usar arrastrar y soltar para tirar de ellos en el orden correcto. El desarrollador también tiene planes de agregar un bloque inverso para ahorrarle algo de tiempo, lo que creo que será muy útil en situaciones en las que WordPress agrega las imágenes: 3. Agregue contenido sobre las imágenes luego, puede usar el editor TinyMCE para agregar el contenido que aparecerá sobre esta secuencia de animación. Puede agregar texto ordinario y formatearlo como desee. O también puede incluir códigos cortos, HTML personalizado, imágenes estáticas, Ombeds, etc.
4. Configure las animaciones (opcionales) Luego, tenga la opción de animar el contenido que ha agregado en el editor anterior. Esto es opcional, pero le permite mejorar aún más el efecto de la película. Para usar la función de animación, necesitará un poco de código, pero definitivamente es algo que los usuarios no técnicos pueden hacer. La parte del código es que necesitará acceder a la pestaña Text del editor de contenido y agregar una clase o ID CSS a cada elemento que desee animar. Por ejemplo, para usar animaciones separadas para el Título H1 y el Título H2, configuraría lo siguiente:
Luego, debe ejecutar la configuración de animación y agregar una animación. En la columna Selector, agregará la ID o la clase para el elemento que desea apuntar. Entonces el resto de la configuración es bastante explícito. Puedes:

Elija un inicio/parada para la animación. Puede orientar esto por el número de la imagen en la secuencia (que el complemento es conveniente para usted).

Elija la animación de/to y la duración de cada animación.

Tienes cuatro tipos diferentes de animaciones:

Desvanecerse hacia/desde la opacidad hacia/desde el desplazamiento horizontal

Moverse hacia/desde compensación vertical
La escala a/desde
También puede agregar más animaciones al mismo tiempo.Así es como se vería si un contenido comienza desde la izquierda y cambia a la derecha:
5. Configurar otras configuraciones de página y animación Para finalizar las cosas, puede configurar algunas diferentes.Configuración tanto para la página individual de la animación como para la animación de contaminación en su conjunto.Para la página, puede configurar la duración de cada imagen individual en la secuencia, así como la escala y la alineación de la imagen para los visitantes de escritorio y móviles:
Y luego, para la secuencia en su conjunto, obtendrá algunas configuraciones de la barra lateral para controlar el retraso del pergamino, el ancho de la imagen, la opacidad y otros detalles.Y se trata de configurar la animación del desfile.Ahora es el momento de mostrarlo.
6. Muestre su animación después de que haya terminado, puede mostrar la animación en cualquier lugar de su sitio utilizando el código corto: Inferior de la siguiente manera: [scrolSequency id = “####” marginop = “-150px” marginbottom = “-150px” ] Actualmente, Shortcode es la única opción para incorporar su animación en otro contenido, pero el desarrollador también tiene planes de agregar un bloque dedicado de Gutenberg. 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. Solo la versión gratuita le permitirá crear algo que se vea genial, pero limita la cantidad de páginas y imágenes que puede usar. También carece de opciones de animación avanzada y otras características, como la escala automática de imágenes. Para eliminar esos límites y obtener acceso a todas las funciones, puede convertirse en Pro. Lo bueno de todos los planes profesionales es que ofrece un período de prueba gratuito de 14 días, por lo que puede probarlos sin ningún riesgo.
Cinco sitios: $ 129.99 para una licencia de vida de un año o 389.99 para la vida.
Diez sitios: $ 219.99 por una licencia de vida de un año o 659.99 para la vida.
Pensamientos finales sobre la secuencia de desplazamiento En general, el scrollSequency hace que sea muy fácil crear estas atractivas animaciones de desfile en su sitio de WordPress. No todos los sitios de WordPress necesitarán este tipo de animación, pero es una muy buena opción para sitios de orientación visual o, en general, en cualquier sitio en el que desee agregar una sensación más cinematográfica. También puede ser genial crear una página de destino cautivadora para un producto. Hasta donde yo sé, no hay otros complementos de WordPress que le permitan hacer esto, especialmente no usar su propio código. Si desea probarlo, puede jugar con la versión gratuita en wordpress.org o obtener una prueba gratuita de 14 días de la versión premium (sin tener que ingresar una tarjeta de crédito). Recuerde usar su exclusivo alcalde de WP: Código de descuento WPMayor20Obs, ¡20% de descuento! Exclusivo 20% de descuento en scrollSequency cuando se usa el código de cupón WPMayor20 Get ScrollSequency

¿Todavía tiene alguna pregunta sobre cómo funciona el scrollSequency? Deja un comentario y háganos saber.