El desplazamiento a pantalla completa en CSS puro es un dolor de cabeza. scroll-snap se comporta de forma distinta en Chrome y Safari, se traba en dispositivos móviles, y ni pensar en el historial del navegador y los anclajes de URL. Las soluciones con jQuery necesitan más de 200 líneas de código y aun así fallan con alturas de pantalla variables.

fullPage.js resuelve esta tarea por completo. Una biblioteca con más de 35 000 estrellas en su repositorio de GitHub y 2,5 millones de descargas mensuales a través de la CDN de jsDelivr ofrece un desplazamiento predecible sección por sección, diapositivas horizontales, carga diferida y más de 80 opciones listas para usar. La versión 4.0.41 (marzo de 2026) funciona con Vanilla JS, y ya no requiere jQuery.

A continuación encontrará una guía paso a paso para integrar fullPage.js en WordPress: desde cargarlo mediante wp_enqueue_script hasta un fondo de video y la desactivación selectiva de estilos. Sin plugins, con control total sobre cada píxel.

💡 Resumen rápido:

• Cargue fullPage.js mediante wp_enqueue_script, un solo hook, sin plugins adicionales
• Configure secciones, anclajes y navegación para que coincidan con la estructura de la página
• Añada un fondo de video que se pause automáticamente al salir de la sección
• Resuelva el problema de los bloques largos con scrollOverflow y fp-auto-height
• Desactive los estilos de la biblioteca de forma selectiva, sin eliminarlos por completo

Qué es fullPage.js

fullPage.js es una biblioteca de JavaScript para sitios con desplazamiento vertical a pantalla completa. La página se divide en secciones, cada una de las cuales ocupa exactamente la altura de la pantalla. Un desplazamiento o un toque mueve al usuario entre secciones con una animación suave. Dentro de las secciones hay diapositivas horizontales.

La versión actual es la 4.0.41 (marzo de 2026). La biblioteca se ha reescrito por completo en Vanilla JS: prescindir de jQuery ahorró unos 80 KB. Todos los navegadores modernos y dispositivos móviles son compatibles. IE11 funciona con la versión 3.x.

Para WordPress existen plugins oficiales para Elementor, Gutenberg y Divi. Los plugins son de pago, pero permiten construir una página de aterrizaje visualmente, sin código. Si necesita control total, cargue la biblioteca en el tema manualmente.

Paso 1. Conectar fullPage.js a WordPress

La forma correcta es mediante wp_enqueue_script en functions.php. Nada de <script> incrustado directamente en el pie de página, ni inserciones a través de wp_head.

Descargue fullpage.min.js y fullpage.min.css del repositorio oficial o cárguelos mediante una CDN. Para producción, un archivo local es más fiable: menos dependencias externas y una carga más rápida.

Coloque los archivos en una carpeta del tema, por ejemplo /assets/fullpage/, y añada esto a functions.php:

1
/**
2
 * Loading fullPage.js only on the front page.
3
 */
4
function sd_register_fullpage() {
5
    if ( ! is_front_page() ) {
6
        return;
7
    }
8
 
9
    wp_enqueue_style(
10
        'sd-fullpage',
11
        get_template_directory_uri() . '/assets/fullpage/fullpage.min.css',
12
        array(),
13
        '4.0.41'
14
    );
15
 
16
    wp_enqueue_script(
17
        'sd-fullpage',
18
        get_template_directory_uri() . '/assets/fullpage/fullpage.min.js',
19
        array(),
20
        '4.0.41',
21
        true
22
    );
23
}
24
add_action( 'wp_enqueue_scripts', 'sd_register_fullpage' );

Lo que importa aquí: is_front_page() limita la carga solo a la portada, de modo que la librería no pesa sobre todo el sitio. El cuarto parámetro true coloca el script en el pie de página y la página se renderiza sin demora. La versión en el tercer argumento ayuda a resetear la caché al actualizar, para que el navegador cargue el nuevo archivo en lugar del antiguo almacenado en caché.

Si resulta más cómodo usar una CDN, sustituya get_template_directory_uri() por enlaces directos desde la red jsDelivr o cdnjs. Fije la versión en la URL de forma explícita ([email protected]), no use @latest: una actualización mayor de versión puede romper el sitio sin previo aviso.

Paso 2. Configuración básica

La estructura HTML es sencilla: un contenedor con id="fullpage" y secciones con la clase section. Dentro de las secciones hay diapositivas horizontales con la clase slide.

1
<div id="fullpage">
2
    <div class="section">First section</div>
3
    <div class="section">Second section</div>
4
    <div class="section">
5
        <div class="slide">Slide 1</div>
6
        <div class="slide">Slide 2</div>
7
    </div>
8
</div>

La inicialización se hace en Vanilla JS, en el archivo fullpage-init.js, que se carga después de la librería:

1
document.addEventListener('DOMContentLoaded', function () {
2
    new fullpage('#fullpage', {
3
        // Navigation
4
        anchors: ['intro', 'features', 'pricing', 'contact'],
5
        navigation: true,
6
        navigationPosition: 'right',
7
 
8
        // Scrolling
9
        scrollingSpeed: 700,
10
        autoScrolling: true,
11
        fitToSection: true,
12
        scrollBar: false,
13
        easing: 'easeInOutCubic',
14
 
15
        // Responsive
16
        responsiveWidth: 1024,
17
        responsiveHeight: 768,
18
 
19
        // Design
20
        verticalCentered: true,
21
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f5f5f5'],
22
        paddingTop: '2em',
23
 
24
        // Performance
25
        lazyLoading: true,
26
        observer: true
27
    });
28
});

Las opciones clave que conviene configurar deliberadamente desde la primera ejecución:

• anchors, anclas para enlaces directos a las secciones (site.com/#features). Sin ellas la URL no cambia al hacer scroll y no se puede enlazar a un bloque específico.
• navigation, puntos a la derecha. El usuario ve de inmediato cuántas secciones hay y en cuál se encuentra.
• scrollingSpeed, velocidad de la animación en ms. 700 es el punto justo: ni brusco ni alargado.
• responsiveWidth y responsiveHeight: en pantallas más pequeñas que los tamaños establecidos, el desplazamiento a pantalla completa se desactiva automáticamente. De lo contrario, el contenido se corta en tabletas y teléfonos.
• scrollBar, la barra de desplazamiento. false para un efecto limpio de página completa; true resulta útil para depurar.

La lista completa de más de 80 opciones está en la documentación oficial.

Paso 3. Navegación vertical

Los puntos de navegación integrados se activan con la bandera navigation: true. Pero el estilo por defecto es mínimo: círculos grises a la derecha. Los adaptamos al diseño con CSS:

1
/* Color and size of the navigation dots */
2
#fp-nav ul li a span {
3
    background: #4b944e;
4
    width: 10px;
5
    height: 10px;
6
    margin: -5px 0 0 -5px;
7
}
8
 
9
#fp-nav ul li a.active span {
10
    background: #fff;
11
    border: 2px solid #4b944e;
12
}
13
 
14
/* Tooltips on hover */
15
#fp-nav ul li .fp-tooltip {
16
    color: #333;
17
    font-size: 14px;
18
    font-family: inherit;
19
}

Si la navegación integrada entra en conflicto con el tema o no se renderiza, escribimos una vinculación manual con jQuery. El siguiente script rastrea la clase activa en las secciones y resalta el elemento de menú correspondiente:

1
jQuery(document).ready(function ($) {
2
    $(window).scroll(function () {
3
        if ($(window).scrollTop() <= 1) return;
4
 
5
        var sections = [
6
            'fullPage-1', 'fullPage-2', 'fullPage-3', 'fullPage-4',
7
            'fullPage-5', 'fullPage-6', 'fullPage-7', 'fullPage-8',
8
            'fullPage-9', 'fullPage-10'
9
        ];
10
 
11
        sections.forEach(function (cls, i) {
12
            var isActive = $('.' + cls).hasClass('active');
13
            var navItem = $('#fp-nav > ul > li:nth-child(' + (i + 1) + ') > a');
14
 
15
            if (isActive) {
16
                navItem.addClass('active');
17
                navItem.find('span').css('background', '#fff');
18
            } else {
19
                navItem.removeClass('active');
20
                navItem.find('span').css('background', '#4b944e');
21
            }
22
        });
23
    });
24
});

El código del panel de navegación en sí, una lista desordenada con enlaces a las anclas:

1
<ul id="fp-nav">
2
    <li><a href="#intro" class="active"></a></li>
3
    <li><a href="#features"></a></li>
4
    <li><a href="#pricing"></a></li>
5
    <li><a href="#contact"></a></li>
6
</ul>

En la práctica, este plan B le salva cuando el tema sobrescribe los selectores de fullPage.js o utiliza una estructura del DOM no estándar. El código se coloca en footer.php o mediante wp_add_inline_script.

Paso 4. Fondo de video y control de reproducción

Un video detrás de la primera sección es un detalle impactante. Pero sin control, sigue reproduciéndose después de abandonar la sección y desperdicia recursos. Se soluciona con el callback afterLoad.

El HTML de la primera sección con video:

1
<div class="section" id="intro">
2
    <video id="bgVideo" loop muted playsinline data-autoplay>
3
        <source src="/wp-content/uploads/video/background.mp4" type="video/mp4">
4
    </video>
5
    <div class="layer">
6
        <h1>Heading over the video background</h1>
7
    </div>
8
</div>

El atributo playsinline es obligatorio para iOS; sin él, Safari abre el video en un reproductor a pantalla completa. La combinación loop muted data-autoplay proporciona una reproducción de fondo fluida.

Control mediante afterLoad en la configuración de fullPage.js:

1
new fullpage('#fullpage', {
2
    // ...other options...
3
    afterLoad: function (anchorLink, index) {
4
        var video = document.querySelector('#bgVideo');
5
        if (!video) return;
6
 
7
        if (index === 1) {
8
            video.play();
9
        } else {
10
            video.pause();
11
        }
12
    }
13
});

El callback se dispara al entrar en una sección. El índice 1, la primera sección, inicia el video. Cualquier otra, lo pausa. Así no se desperdician procesador ni batería en el móvil.

Para el control manual, añada un botón de Reproducir/Pausar; el manejador alterna el icono y llama a video.play() / video.pause(). El usuario tiene una opción y la mecánica de desplazamiento a pantalla completa no se rompe.

Paso 5. Bloques largos, scrollOverflow y altura automática

Cuando el contenido de una sección no cabe en la altura de la pantalla, la parte inferior queda cortada. Activamos scrollOverflow:

1
new fullpage('#fullpage', {
2
    scrollOverflow: true
3
});

La opción añade una barra de desplazamiento interna solo a esa sección específica; las demás no se ven afectadas. Esto basta en la mayoría de los casos.

Para un control más fino, colocamos clases CSS directamente en la sección:

1
<div class="section fp-normal-scroll fp-auto-height">
2
    <!-- Long content with free scrolling -->
3
</div>

fp-auto-height elimina la restricción de «exactamente 100vh»; la altura de la sección la define el contenido. fp-normal-scroll desactiva el efecto de anclaje y la sección se desplaza de forma natural. La combinación es ideal para pies de página, tablas largas y páginas con bloques de altura variable.

En editores por bloques como King Composer, las clases se añaden en los ajustes de la fila:

Paso 6. Desactivar estilos de fullPage.js de forma selectiva

A veces la biblioteca sobrescribe el CSS del sitio, desplaza el posicionamiento, cambia el relleno o el ancho de las secciones. No hace falta eliminar fullPage.js por completo: desactivamos únicamente los estilos problemáticos.

Un ejemplo de restablecimiento del posicionamiento para las secciones 3 a 8:

1
/* Reset of fullPage.js styles for the selected sections */
2
.fullpage-wrapper section:nth-child(n+3):nth-child(-n+8) {
3
    left: inherit !important;
4
    padding-left: inherit !important;
5
    width: inherit !important;
6
    height: inherit !important;
7
    padding-top: inherit !important;
8
    padding-bottom: inherit !important;
9
    background-color: inherit !important;
10
}

El selector :nth-child(n+3):nth-child(-n+8) alcanza exactamente ese rango. !important está justificado aquí: fullPage.js asigna estilos en línea y solo puede sobrescribirlos de esta manera. Pero aplíquelo de forma selectiva: un !important indiscriminado en toda la página y la cascada se convierte en un caos.

Temas de WordPress preconfigurados con fullPage.js

Si no desea integrar la biblioteca manualmente en un tema existente, tome un iniciador ya preparado. Temas iniciadores actuales en GitHub:

• starter-fullpagejs, un iniciador mínimo, un buen punto de partida para marcado personalizado
• wordpress-onepager, un tema ligero para sitios de una sola página (repositorio no disponible, busque bifurcaciones)
• derkodde_fullpagetheme, un tema con soporte para secciones y diapositivas (repositorio eliminado, úselo como concepto)
• MyPortfolio, un portafolio construido sobre fullPage.js
• dandelion, un tema de una página con un diseño limpio

Todos los temas están bajo GPL y necesitan adaptación a un proyecto específico. Pero le dan una estructura de secciones lista y la integración básica de fullPage.js, lo que ahorra medio día de trabajo.

También existe un tema de WordPress oficial del desarrollador y los plugins para Elementor, Gutenberg y Divi mencionados anteriormente. Los plugins son de pago, pero cubren el 95% de las tareas sin una sola línea de código.

Un breve video sobre la instalación y configuración de fullPage.js en WordPress, muestra claramente el proceso de integración mediante el plugin oficial para Divi.

⁉️🤔 Preguntas frecuentes

¿fullPage.js es gratuito?

Sí, para proyectos de código abierto bajo la licencia GPLv3 es completamente gratuito. Para sitios comerciales cerrados necesita una licencia comercial. Los plugins de WordPress para Elementor, Gutenberg y Divi son productos de pago independientes, desde $29 por sitio.

¿En qué es mejor fullPage.js que CSS Scroll Snap?

CSS Scroll Snap se comporta de manera diferente según el navegador: suave en Safari, brusco en Chrome, con retraso en móviles. fullPage.js ofrece el mismo comportamiento en todas partes. Además, incluye de serie: anclajes de URL, historial del navegador, diapositivas horizontales, desplazamiento interno en secciones y 37 opciones de animación. Sin polyfills y sin apaños manuales.

¿Cómo se desactiva fullPage.js en móviles?

Las opciones responsiveWidth: 1024 y responsiveHeight: 768 en la configuración. Cuando el ancho de pantalla es inferior a 1024px o la altura inferior a 768px, la biblioteca desactiva automáticamente el desplazamiento por ajuste y vuelve al desplazamiento normal. No se necesitan comprobaciones adicionales de userAgent.

¿Se puede usar fullPage.js con WooCommerce?

Sí, pero con cuidado. Las páginas de producto y carrito no deben ser de pantalla completa, eso rompe la experiencia de compra. Adjunte fullPage.js solo a la portada o a páginas de aterrizaje específicas mediante las etiquetas condicionales de WordPress: is_front_page() o is_page('landing').

¿Por qué no se reproduce el video de fondo en iOS?

Safari en iPhone y iPad requiere el atributo playsinline en la etiqueta <video>. Sin él, el video pasa a un reproductor a pantalla completa y no funciona como fondo. Asegúrese también de que el video esté codificado en H.264 (MP4), HEVC no es compatible con todos los dispositivos Apple.

FullPage.js en 2026: configuración manual o un plugin

Si está construyendo una página de aterrizaje, un portafolio o un sitio de presentación, fullPage.js ofrece un efecto visual que el CSS puro no puede lograr. Más de 35 000 estrellas en GitHub y 2,5 millones de instalaciones al mes confirman que la biblioteca está viva y es estable.

Para tiendas en línea, blogs y paneles de administración, no vale la pena. El desplazamiento a pantalla completa interfiere con la navegación y el consumo de contenido, el usuario se cansa después de 3 o 4 deslizamientos.

Eligiendo su camino: si necesita control total sobre cada sección y está listo para escribir código, opte por la carga manual mediante wp_enqueue_script. Si quiere construir una página de aterrizaje visualmente en Elementor o Gutenberg en una hora, tome el plugin oficial. Ambos enfoques están probados en la práctica, ambos funcionan sin sorpresas.

¿Ha probado fullPage.js en sus propios proyectos? Comparta su experiencia en los comentarios, y construiremos una lista viva de soluciones para problemas comunes de integración.