web_scroll_triggered_image_sequence Shortcode
El shortcode web_scroll_triggered_image_sequence crea una escena a pantalla completa controlada por el desplazamiento, a partir de una secuencia de imágenes o de un vídeo autoalojado. El medio permanece fijado mientras el desplazamiento avanza por los fotogramas seleccionados o por la línea de tiempo del vídeo.
Los atributos siguientes coinciden con los controles actuales de Page Builder y con la salida pública. Utiliza la sintaxis en bruto solo para contenido revisado que no pueda mantenerse mediante los controles visuales.
Shortcodes secundarios permitidos: web_scroll_triggered_image_sequence_text.
Uso
[web_scroll_triggered_image_sequence source_type="video" video_url="https://example.com/scene.mp4" image_fit="cover"]
[web_scroll_triggered_image_sequence_text title_text="The first chapter"]
[/web_scroll_triggered_image_sequence_text]
[/web_scroll_triggered_image_sequence]En Page Builder, añade Scroll triggered media, selecciona Image sequence o Video en Source type y, a continuación, completa el campo de fuente que aparece.
Atributos
| Atributo | Valor predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
source_type |
images |
images, video |
Selecciona el modo de renderizado de secuencia de imágenes o de vídeo. Los shortcodes existentes permanecen en modo de secuencia de imágenes. |
images |
— | Carga útil de secuencia de imágenes de Page Builder | Proporciona hasta 500 URL de fotogramas ordenadas cuando source_type="images". |
video_url |
— | URL de vídeo autoalojado HTTPS | Proporciona un vídeo progresivo cuando source_type="video". Se admiten URL de medios de WordPress y URL lógicas de Pomatio Video Hosting. |
image_fit |
cover |
cover, contain |
Hace que el medio seleccionado cubra la escena o permanezca completamente visible dentro de ella. El nombre del atributo se conserva por compatibilidad con versiones anteriores. |
animation_speed |
3.5 |
Número de 0.5 a 20 |
Controla la distancia de desplazamiento fijada. Los valores más altos requieren más desplazamiento y hacen que el medio avance más lentamente. |
spinner |
Imagen de carga de WordPress | URL de imagen HTTPS | Sustituye el indicador de carga mostrado hasta que el primer fotograma está listo. |
el_class |
— | Clases CSS separadas por espacios | Añade clases personalizadas al elemento de lienzo o de vídeo. |
Elegir una fuente
Utiliza una secuencia de imágenes cuando los fotogramas individuales deban dirigirse artísticamente o cuando importen los cambios exactos fotograma a fotograma. Mantén todos los fotogramas con las mismas dimensiones y relación de aspecto, utiliza un orden de nombres de archivo coherente y optimiza los archivos antes de publicar.
Utiliza vídeo para un movimiento más fluido y una edición más sencilla. La URL debe resolverse a un vídeo progresivo reproducible en el navegador con soporte de búsqueda. Las URL lógicas de Pomatio Video Hosting funcionan cuando ese activo ha completado la generación progresiva. El shortcode mantiene el vídeo silenciado, no lo reproduce automáticamente y asigna el progreso del desplazamiento a su línea de tiempo.
Contenido incluido
Añade hijos de web_scroll_triggered_image_sequence_text en el orden en que deben aparecer. El primer hijo es visible inicialmente; los hijos posteriores se funden entre sí a medida que el visitante avanza por la escena.
Con movimiento reducido, sin JavaScript, tras un fallo del medio, durante la interacción con el teclado o cuando un escenario es demasiado alto para el área de visualización, el texto utiliza un diseño legible no fijado. El modo de imagen proporciona una alternativa del primer fotograma. Mantén la información importante en el texto en lugar de depender del medio decorativo.
En el editor de bloques, utiliza Scroll Sequence and its editable text stages.
Personalizar la hoja de estilos
Ve a Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Scroll-triggered image sequence para comparar la fuente actual de scroll-triggered-image-sequence.min.css con una versión editable. Al guardar, se crea un reemplazo minimizado por sitio para el identificador existente de web-scroll-triggered-image-sequence. El script web_scroll_triggered_image_sequence, la alternativa del primer fotograma, la carga cerca del área de visualización, la línea de tiempo de desplazamiento fijada, los cálculos de lienzo y vídeo, el indicador de carga, las etapas de texto anidadas, los atributos del shortcode y la carga condicional permanecen sin cambios. Revert to theme CSS elimina el reemplazo y restaura el activo actual del tema.
Verificación
- Confirma que el primer fotograma aparece sin desplazarse y que el indicador de carga desaparece.
- Desplázate por la escena completa y confirma que el medio alcanza su fotograma final sin dejar huecos.
- Confirma que cada hijo de texto aparece en el orden previsto y se invierte correctamente al desplazarse hacia arriba.
- Comprueba tanto un área de visualización de escritorio como una de tamaño de teléfono, especialmente cuando utilices
contain. - Para fuentes de vídeo, confirma que la búsqueda funciona tras una carga de página nueva y que no aparecen controles de audio ni de reproducción.
Si una escena de vídeo permanece vacía, abre la URL directamente y confirma que produce un vídeo progresivo en lugar de un manifiesto HLS o un activo de Pomatio Video Hosting sin terminar. Si una escena de imagen salta entre fotogramas, verifica que cada URL seleccionada sea legible públicamente.