Transforma un vídeo en
fondo animado con desplazamiento
para WordPress
Un plugin de WordPress diseñado para crear secciones o fondos de página donde el vídeo avanza al desplazarse. La versión destinada al repositorio WordPress.org no utiliza GSAP, pero cuenta con una integración clara y documentada con Gutenberg.
Crea un efecto premium sin complicar Gutenberg
El objetivo es ofrecer un bloque utilizable en el editor de WordPress, pero también un modo de fondo de página global directamente accesible desde la configuración lateral de Gutenberg.
Bloque de sección de Gutenberg
Una sección de ancho completo que puede contener bloques internos: títulos, textos, botones, columnas, grupos, imágenes o cualquier otro bloque compatible con Gutenberg.
Fondo de página completa
Un modo de página completa configurable desde la barra lateral de la página, sin necesidad de insertar un bloque especial al principio del contenido.
Configuración sencilla
Selección de vídeo desde la biblioteca multimedia, URL directa, superposición, opacidad, velocidad de desplazamiento, márgenes verticales, altura mínima y comportamiento adaptable.
Un complemento orientado a la producción
La prioridad es mantener el plugin limpio, comprensible, compatible con el repositorio oficial de WordPress.org y suficientemente documentado para evitar configuraciones erróneas.
Editorial Gutenberg
- Bloque de sección con bloques interiores
- Alineación de ancho completo
- Ajustando los márgenes superior e inferior
- Altura mínima configurable
- Superposición oscura o de color
Configuración de página
- Panel lateral dedicado en Gutenberg
- Opción “Desplazar página de fondo de vídeo”
- Selección a través de la biblioteca de medios de WordPress
- Activación página por página
- Compatibilidad con temas para la edición completa del sitio
Versión de WordPress.org
- Código JavaScript sin dependencia de GSAP
- Archivos en inglés
- Dominio de texto adecuado
- Preparado para la internacionalización
- Documentación integrada en el plugin
Dos formas de usar Fondo de vídeo desplazable
El complemento debe cubrir dos usos distintos: una sección independiente de Gutenberg y un fondo de página completa.
Modo de sección de Gutenberg
- Agregue el bloque “Sección de fondo de video desplazable”.
- Selecciona un vídeo de la biblioteca multimedia.
- Defina la altura, los márgenes verticales y la superposición.
- Agregue contenido dentro del bloque.
- Publica la página.
Modo de fondo completo
- Abre la página en Gutenberg.
- Utilice el panel lateral "Desplazar página de fondo de vídeo".
- Habilitar el fondo de vídeo para esta página.
- Seleccione el vídeo de la biblioteca multimedia.
- Construye la página normalmente con Gutenberg.
Un buen video es corto, ligero y bien codificado
La calidad del efecto depende en gran medida de la preparación del archivo de vídeo. Los fotogramas clave son esenciales para lograr un desplazamiento preciso.
Especificaciones recomendadas
Función de los fotogramas clave
Un fotograma clave es una imagen completa dentro del vídeo. Para un efecto controlado por desplazamiento, el navegador debe poder moverse de forma rápida y precisa dentro del archivo.
- Fotogramas clave cada 0,5 segundos para un buen compromiso.
- Fotograma clave cada 0,25 segundos para una mayor precisión.
- El tamaño del archivo será mayor si los fotogramas clave están muy juntos.
- El desplazamiento resulta menos fluido si los fotogramas clave están demasiado separados.
Prepara un vídeo optimizado para el pergamino
FFmpeg te permite convertir vídeo, eliminar audio, reducir el tamaño del archivo y forzar fotogramas clave regulares.
Abra PowerShell o la terminal de Windows.
Utilice la terminal de Windows para instalar FFmpeg y ejecutar comandos de optimización de vídeo.
Instalar FFmpeg
Ejecuta el siguiente comando, luego cierra y vuelve a abrir la terminal.
Instalación de Winget --id Gyan.FFmpeg -eCompruebe la instalación
El comando debería mostrar la versión instalada de FFmpeg.
ffmpeg -versiónPrepara el archivo de trabajo
Coloca el vídeo original en una carpeta sencilla, por ejemplo C:\Videos\video de desplazamiento, Luego, abre esta carpeta en PowerShell.
cd C:\Videos\scroll-videoOrden recomendada
ffmpeg -i "video-originale.mp4" -vf "scale=1920:-2,fps=30" -an -c:v libx264 -preset slow -crf 22 -pix_fmt yuv420p -movflags +faststart -g 15 -keyint_min 15 -sc_threshold 0 -force_key_frames "expr:gte(t,n_forced*0.5)" "video-scroll-optimisee.mp4""Versión de alta sensibilidad
Fotogramas clave cada 0,25 segundos. Mayor precisión, aunque potencialmente mayor tamaño de archivo.
Versión ligera
Resolución de 1280 píxeles y mayor compresión. Mejor rendimiento, menor calidad visual.
ffmpeg -i "video-originale.mp4" -vf "scale=1920:-2,fps=30" -an -c:v libx264 -preset slow -crf 22 -pix_fmt yuv420p -movflags +faststart -g 8 -keyint_min 8 -sc_threshold 0 -force_key_frames "expr:gte(t,n_forced*0.25)" "video-scroll-haute-fluidite.mp4""ffmpeg -i "video-originale.mp4" -vf "scale=1280:-2,fps=30" -an -c:v libx264 -preset slow -crf 26 -pix_fmt yuv420p -movflags +faststart -g 15 -keyint_min 15 -sc_threshold 0 -force_key_frames "expr:gte(t,n_forced*0.5)" "video-scroll-legere.mp4""Una base limpia para publicación, traducción y novedades
El plugin está diseñado para ser publicado en el repositorio oficial, documentado en inglés y luego traducido a través del sistema oficial WordPress Polyglots.
Documentación integrada
- Página principal en el menú de WordPress
- Enlace directo desde la página de extensiones
- Guía de preparación de vídeo
- Ejemplos FFmpeg
Complemento de cumplimiento
- URI de complemento y URI de autor por separado.
- El dominio del texto se ajusta
- Saneamiento y escape
- No hay dependencias externas obligatorias.
Posibles novedades
- Versión GSAP independiente
- Ajustes de limpieza avanzados
- preajustes visuales
- Convocatoria de donaciones en la página web de Etchenet
Un plugin de WordPress para crear páginas más inmersivo
El plugin permite utilizar un vídeo como fondo animado sincronizado con el desplazamiento, con una configuración diseñada para Gutenberg, temas de edición completa del sitio y publicación limpia en WordPress.org.
