Revisión de la secuencia de desplazamiento: agregue animaciones cinematográficas de desplazamiento a WordPress

¿Quiere crear una experiencia más atractiva y llamativa para los visitantes de su sitio de WordPress?

En nuestra revisión de Scrollsequence, le mostraremos cómo puede usar esto complemento freemium para crear increíbles animaciones de desplazamiento en su sitio sin escribir una sola línea de código, al igual que Apple usa en su sitio web Airpods Pro .

Realmente no puedo describir el conjunto completo de funciones solo con texto, así que comenzaré con un ejemplo real:

[scrollsequence id=”####” margintop=”-150px” marginbottom=”-150px”]En pocas palabras,

el complemento Scrollsequence

lo ayuda a crear exactamente el mismo efecto en su sitio de WordPress. Todo lo que necesita hacer es cargar algunas imágenes, agregar algo de texto y tal vez configurar algunas animaciones.En general, esta es una forma muy buena de crear una experiencia más "cinematográfica" en su Sitio web de WordPress.

Sigue leyendo nuestra reseña de Scrollsequence para saber cómo funciona...

Obtener % ¡apagado!

Exclusivo 02% de descuento en Scrollsequence cuando usa el código de cupón wpmayor

    • Obtener secuencia de desplazamiento

Revisión de la secuencia de desplazamiento: exploración de la lista de funcionesLa característica principal de Scrollsequence es que te ayuda a crear el efecto de animación de desplazamiento único del ejemplo anterior. También puedes ver algunos ejemplos en vivo aquí si quieres verlo en acción:

Página de inicio de la secuencia de desplazamiento Belleza

  • Reloj

Ciberpunk

Puede crear animaciones ilimitadas y colocarlas en cualquier lugar de su sitio usando un código abreviado, con planes para agregar un bloque de Gutenberg dedicado. El complemento también le permite crear páginas independientes dedicadas para sus animaciones, si lo prefiere.

La animación no es una sola imagen o video animado. En cambio, es una serie de 10 + imágenes todas juntas que parecen animarse a medida que un visitante se desplaza hacia abajo.

Puede elegir cualquier fondo que desee y también puede crear varias "páginas" para cambiar la animación de fondo como visitantes continúe desplazándose hacia abajo.

Para agregar contenido, podrá usar un editor de texto simple (el antiguo editor de WordPress, también conocido como el clásico editor TinyMCE). Además de agregar texto y formatearlo con el editor, también puede incluir otros tipos de contenido, como códigos abreviados de otros complementos, oembeds, su propio HTML personalizado y más.

Para agregar al efecto de desplazamiento, podrá animar cada elemento que agregue al editor de texto. También puede usar diferentes animaciones para diferentes partes del contenido, lo que también le permite cambiar el texto a medida que el usuario se desplaza hacia abajo.

También hay algunas otras características más pequeñas que pueden ser útiles. , que verá en la sección práctica.

Cómo crear una animación de desplazamiento con secuencia de desplazamiento

En esta sección, te mostraré cómo funciona realmente Scrollsequence.

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 algunas de las características más pequeñas y opciones de configuración.

Nota: estoy usando 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. Crear una nueva "Página"

Cuando crea su animación de desplazamiento, puede basarla en una sola secuencia de animación o agregar varias secuencias que cambian a medida que el usuario se desplaza hacia abajo. Cada secuencia dentro de su animación general se denomina "página".Puede crear una sola página. O bien, puede agregar tantas páginas nuevas como desee. Si agrega una nueva página, tendrá su propia pestaña y podrá realizar todas las acciones que detallaré a continuación para cada página:
Creating a page

Creating a page 2. Prepare y cargue sus imágenes

A continuación, necesita para cargar las imágenes que usará para crear su animación. Nuevamente, Scrollsequence no se basa en una sola imagen GIF como a la que podría estar acostumbrado. En cambio, es una serie de 10 + imágenes, que es lo que te permite crear el efecto inmersivo. Preocupado por el impacto en el rendimiento de la carga 10+ imágenes en una sola página? ¡No te preocupes! El complemento mostrará el contenido tan pronto como se cargue la primera imagen, por lo que no tendrá ningún problema de bloqueo de procesamiento y los tiempos de carga percibidos de su visitante seguirán siendo buenos (junto con métricas como Mayor pintura con contenido y Primera pintura con contenido).

Para obtener estas imágenes, puede tomar un videoclip corto y usar una herramienta para convertirlo en imágenes para cada cuadro; más sobre eso a continuación.

Pero primero, hablemos de la relación de aspecto de sus imágenes.

Si desea utilizar la misma secuencia de animación para los visitantes de escritorio y móviles, el desarrollador recomienda que elija una relación de aspecto cuadrada. Si prefiere una relación de aspecto más amplia para los visitantes de escritorio, otra opción es crear secuencias de animación separadas para cada tipo de visitante.

Actualmente, no puede lograr esto dentro del complemento, aunque el el desarrollador planea agregarlo como una característica. Sin embargo, podría lograr esto con un complemento de terceros que le permita mostrar condicionalmente un código abreviado por dispositivo o usar su propio código.

A continuación, hablemos sobre cómo generar las imágenes que necesitas. Una vez más, querrá comenzar con un videoclip corto (Estoy usando Converting video to images un clip sin derechos de autor de Pexels

    • ). Entonces,

usa uno de estas herramientas que probó el desarrollador

    • para convertirlo en imágenes para cada cuadro. Personalmente, usé

Uploading images

    • el convertidor Ezgif gratuito. Sin embargo, si desea una conversión de velocidad de fotogramas más alta, es posible que prefiera un software de escritorio como VLC o FFMPEG.

Con Ezgif, todo lo que hace es cargar el archivo de vídeo , especifique cuántos fotogramas convertir y luego le dará un ZIP con todas las imágenes. El desarrollador recomienda -49 imágenes, por lo que querrá hacer coincidir el marco califique con ese número.

Utilicé un videoclip de siete segundos en FPS, lo que me da 33 imágenes:

Probablemente querrá usar un marco-ra más alto te, como FPS hace que la secuencia de animación sea un poco "brusca".

Una vez que tenga las imágenes, súbalas a su página de Scrollsequence.

Desafortunadamente, debido a una peculiaridad de cómo El cargador de WordPress funciona, algunas de sus imágenes pueden cargarse fuera de servicio. O bien, la secuencia completa podría cargarse al revés. Nuevamente, este es un problema con WordPress , no secuencia de desplazamiento.

Si eso sucede, puede arrastrar y soltar para arrastrarlos en el orden correcto. El desarrollador también tiene planes de agregar una función inversa masiva para ahorrarle algo de tiempo, lo que creo que será muy útil en situaciones en las que WordPress agrega las imágenes al revés:

Converting video to images

Uploading images 3. Agregar contenido encima de las imágenes

A continuación, puede usar el editor TinyMCE para agregar el contenido que aparecerá en la parte superior de esta secuencia de animación.

Puede agregar texto normal y formatearlo como desee. O bien, también puede incluir códigos cortos, HTML personalizado, imágenes estáticas, oembeds, etc.

Adding CSS for animations

4. Configurar animaciones (opcional)

A continuación, tiene la opción de animar el contenido que agregó en el editor anterior. Esto es opcional, pero le permite mejorar aún más el efecto cinematográfico.

Para usar la función de animación, necesitará un diminuto bit de código, pero definitivamente es algo que los usuarios no técnicos pueden hacer.

El código parte es que tendrás que ir al Pestaña Texto de la editor de contenido y agregue una clase o ID de CSS a cada elemento que desee animar.

Por ejemplo, para usar animaciones separadas para el encabezado H1 y el encabezado H2, lo configuraría al igual que:

Luego, te desplazarías a Animación de contenido ajustes y agregar una animación. En el Selector, agregará el ID o la clase para el elemento al que desea apuntar.

Luego, el resto de la configuración se explica por sí misma. Usted puede:

  • Elija una hora de inicio/finalización de la animación. Puede orientar esto por el número de imagen en la secuencia ( que el complemento marca convenientemente para usted ).
  • Elija la animación desde/hasta y la duración de cada animación norte.

Tienes cuatro tipos diferentes de animaciones:

Desvanecer hacia/desde la opacidad

  • Mover a/ desde el desplazamiento horizontal
  • Mover hacia/desde el desplazamiento vertical
    Escala a/desde

También puede agregar múltiples animaciones en el mismo tiempo.

Así es como se vería si una parte del contenido comenzara desde la izquierda y se desplazara hacia la derecha:

Adding CSS for animations

5. Configurar otras configuraciones de página y animación

Para terminar las cosas apagado, puede configurar algunos misceláneos. configuraciones tanto para la página individual en su animación como para su animación de desplazamiento como un todo.Para la página, puede configurar la duración de cada imagen individual en la secuencia, así como la escala de la imagen y alineación para visitantes de escritorio y móviles:

Creating a page

Other page settings

Y luego, para la secuencia en su conjunto, obtendrá algunas configuraciones de la barra lateral para controlar el retraso del desplazamiento, el ancho de la imagen, la opacidad y otros detalles.

Y eso es todo para configurar su desplazamiento animación. Ahora es el momento de mostrarlo.

6. Muestre su animación

Una vez que haya terminado, puede mostrar su animación en cualquier lugar de su sitio usando su código abreviado:

  • 345839También puede usar parámetros de código abreviado para agregar un margen superior o inferior como este:

    [scrollsequence id=”####” margintop=”-150px” marginbottom=”-150px”]

    Actualmente, el shortcode es la única opción para incrustar su animación en otro contenido, pero el desarrollador también tiene planes para agregar un bloque de Gutenberg dedicado.

    345840 Precio de la secuencia de desplazamiento

    La secuencia de desplazamiento viene en ambos 2675515 una versión gratuita en WordPress.org

así como

una versión premium con más características .

La versión gratuita por sí sola te permitirá crear algo que se vea muy bien, pero limita la cantidad de páginas e imágenes que puedes usar. También carece de las opciones de animación avanzadas y algunas otras funciones, como el escalado automático de imágenes.

Para eliminar esos límites y obtener acceso a todas las funciones, puede ir a Pro. Una cosa buena de todos los planes Pro es que ofrecen un Prueba gratuita de días, para que pueda probarlos sin riesgo.

Un sitio PS .33 por una licencia de un año o $70.20 para toda la vida.

 

Cinco sitios PS .02 por una licencia de un año o $343.33 para toda la vida.

Diez sitios PS .33 por una licencia de un año o $650.20 para toda la vida.

2675515 Pensamientos finales sobre Scrollsequence

En general, Scrollsequence hace que sea muy fácil crear estos llamativos pergaminos. animaciones en su sitio de WordPress. No todos los sitios de WordPress necesitarán este tipo de

animación , pero es una opción muy buena para sitios centrados en lo visual o, en general, cualquier sitio en el que desee agregar una sensación más cinematográfica. También puede ser excelente crear una página de destino atractiva para un producto.

Que yo sepa, no hay ningún otro complemento de WordPress que le permita hacer esto, especialmente sin usar el suyo propio. código.

Si quieres probarlo, puedes jugar con

la versión gratuita en WordPress. org u obtener un Prueba gratuita de días de la versión premium (sin necesidad de ingresar una tarjeta de crédito). Recuerda usar tu código de descuento exclusivo WP Mayor : wpmayor

 

Obtener % ¡apagado!

Exclusivo 02% de descuento en Scrollsequence cuando usa el código de cupón wpmayor

    Obtener secuencia de desplazamiento

¿Todavía tienes alguna pregunta sobre cómo funciona Scrollsequence? Deja un comentario y cuéntanos.

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Subir

Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web. Si continúa utilizando este sitio, asumiremos que está satisfecho con él. Más información