O scrolling a ecrã inteiro em CSS puro é um pesadelo. O scroll-snap comporta-se de forma diferente no Chrome e no Safari, engasga em dispositivos móveis e pode esquecer o histórico do navegador e as âncoras de URL. As soluções com jQuery precisam de mais de 200 linhas de código e continuam a falhar com alturas de ecrã variáveis.

O fullPage.js resolve esta tarefa por completo. Uma biblioteca com mais de 35 000 estrelas no seu repositório do GitHub e 2,5 milhões de downloads mensais via CDN jsDelivr oferece um scrolling previsível secção a secção, slides horizontais, lazy loading e mais de 80 opções prontas a usar. A versão 4.0.41 (março de 2026) funciona em Vanilla JS, deixando de ser necessário o jQuery.

Segue-se um guia passo a passo para integrar o fullPage.js no WordPress: desde carregá-lo via wp_enqueue_script até um fundo de vídeo e a desativação seletiva de estilos. Sem plugins, com controlo total sobre cada pixel.

💡 Visão geral rápida:

• Carregar o fullPage.js via wp_enqueue_script, um hook, sem plugins extra
• Configurar secções, âncoras e navegação para corresponder à estrutura da página
• Adicionar um fundo de vídeo que pausa automaticamente ao sair da secção
• Resolver o problema de blocos longos com scrollOverflow e fp-auto-height
• Desativar os estilos da biblioteca seletivamente, sem os remover por completo

O que é o fullPage.js

O fullPage.js é uma biblioteca JavaScript para sites com scrolling vertical a ecrã inteiro. A página é dividida em secções, cada uma ocupando exatamente a altura do ecrã. Um scroll ou um toque move o utilizador entre secções com uma animação suave. Dentro das secções existem slides horizontais.

A versão atual é a 4.0.41 (março de 2026). A biblioteca foi totalmente reescrita em Vanilla JS: a remoção do jQuery poupou cerca de 80 KB. Todos os navegadores modernos e dispositivos móveis são suportados. O IE11 funciona na versão 3.x.

Para WordPress existem plugins oficiais para Elementor, Gutenberg e Divi. Os plugins são pagos, mas constroem uma landing page visualmente, sem código. Se precisar de controlo total, carregue a biblioteca no tema manualmente.

Passo 1. Ligar o fullPage.js ao WordPress

A forma correta é via wp_enqueue_script no functions.php. Nada de <script> hardcoded no footer, nem inserções através do wp_head.

Descarregue o fullpage.min.js e o fullpage.min.css do repositório oficial ou carregue-os via CDN. Para produção, um ficheiro local é mais fiável, menos dependências externas e carregamento mais rápido.

Coloque os ficheiros numa pasta do tema, por exemplo /assets/fullpage/, e adicione isto ao 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' );

O que importa aqui: is_front_page() limita o carregamento apenas à página inicial, para que a biblioteca não fique presente em todo o site. O quarto parâmetro true coloca o script no footer e a página é renderizada sem atrasos. A versão no terceiro argumento ajuda a limpar a cache nas atualizações, para que o browser carregue o ficheiro novo em vez do antigo em cache.

Se for mais conveniente usar uma CDN, substitua get_template_directory_uri() por links diretos da rede jsDelivr ou cdnjs. Fixe a versão explicitamente no URL ([email protected]), não use @latest; uma atualização de versão principal pode quebrar o site sem aviso.

Passo 2. Configuração básica

A estrutura HTML é simples: um wrapper com id="fullpage" e secções com a classe section. Dentro das secções existem slides horizontais com a classe 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>

A inicialização é feita em Vanilla JS, no ficheiro fullpage-init.js, que é carregado depois da biblioteca:

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
});

As opções principais que vale a pena configurar deliberadamente desde a primeira execução:

• anchors, âncoras para links diretos para as secções (site.com/#features). Sem elas, o URL não muda ao fazer scroll e não é possível criar um link para um bloco específico.
• navigation, pontos à direita. O utilizador vê imediatamente quantas secções existem e onde se encontra.
• scrollingSpeed, velocidade da animação em ms. 700 é o ponto de equilíbrio: nem brusco, nem arrastado.
• responsiveWidth e responsiveHeight, em ecrãs mais pequenos do que os tamanhos definidos, o scroll em ecrã completo é desativado automaticamente. Caso contrário, o conteúdo é cortado em tablets e telemóveis.
• scrollBar, a barra de scroll. false para um efeito de página inteira limpo; true é útil para depuração.

A lista completa com mais de 80 opções está na documentação oficial.

Passo 3. Navegação vertical

Os pontos de navegação integrados são ativados pela flag navigation: true. Mas o estilo padrão é mínimo, círculos cinzentos à direita. Nós integramo-los no design com 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
}

Se a navegação integrada entrar em conflito com o tema ou não for renderizada, escrevemos uma ligação manual com jQuery. O script abaixo monitoriza a classe ativa nas secções e destaca o item de menu correspondente:

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
});

O código do painel de navegação em si, uma lista não ordenada com links para as âncoras:

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>

Na prática, esta alternativa salva-o quando o tema substitui os seletores do fullPage.js ou usa uma estrutura DOM não padrão. O código vai para o footer.php ou através de wp_add_inline_script.

Passo 4. Fundo de vídeo e controlo de reprodução

Um vídeo atrás da primeira secção é um toque impactante. Mas sem controlo, continua a reproduzir depois de sair da secção e desperdiça recursos. Resolve-se com o callback afterLoad.

O HTML da primeira secção com vídeo:

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>

O atributo playsinline é obrigatório para iOS; sem ele, o Safari abre o vídeo num leitor de ecrã completo. A combinação loop muted data-autoplay proporciona uma reprodução de fundo contínua.

Controlo via afterLoad na configuração do 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
});

O callback é disparado quando entra numa secção. O índice 1, a primeira secção, inicia o vídeo. Qualquer outra, pausa. O processador e a bateria no telemóvel não são desperdiçados.

Para controlo manual, adicione um botão Reproduzir/Pausa; o handler alterna o ícone e chama video.play() / video.pause(). O utilizador tem uma escolha e a mecânica de scroll em ecrã inteiro não se quebra.

Passo 5. Blocos longos, scrollOverflow e altura automática

Quando o conteúdo de uma secção não cabe na altura do ecrã, a parte inferior é cortada. Ativamos o scrollOverflow:

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

A opção adiciona uma barra de scroll interna a essa secção específica; as outras secções não são afetadas. Isto é suficiente na maioria dos casos.

Para um controlo mais fino, colocamos classes CSS diretamente na secção:

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

fp-auto-height remove a restrição de «exatamente 100vh»; a altura da secção é definida pelo conteúdo. fp-normal-scroll desativa o efeito de snap; a secção faz scroll de forma natural. A combinação é ideal para rodapés, tabelas longas e páginas com alturas de bloco variáveis.

Em editores de blocos como o King Composer, as classes são adicionadas nas definições da linha:

Passo 6. Desativar estilos do fullPage.js de forma seletiva

Por vezes, a biblioteca sobrepõe-se ao CSS do site, altera o posicionamento, muda o padding, as larguras das secções. Não é necessário remover o fullPage.js por completo: desativamos apenas os estilos problemáticos.

Um exemplo de reposição do posicionamento para as secções 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
}

O seletor :nth-child(n+3):nth-child(-n+8) atinge exatamente o intervalo. !important justifica-se aqui; o fullPage.js define estilos inline e só pode anulá-los desta forma. Mas aplique-o de forma seletiva: um !important em toda a página e a cascata transforma-se num caos.

Temas WordPress pré-fabricados com fullPage.js

Se não quiser integrar a biblioteca manualmente num tema existente, utilize um modelo pronto a usar. Temas de base atuais no GitHub:

• starter-fullpagejs, um modelo inicial mínimo, um bom ponto de partida para marcação personalizada
• wordpress-onepager, um tema leve para sites de página única (repositório indisponível, procure forks)
• derkodde_fullpagetheme, um tema com suporte para secções e slides (repositório removido, use-o como conceito)
• MyPortfolio, um portefólio construído sobre fullPage.js
• dandelion, um tema de página única com um design limpo

Todos os temas estão sob licença GPL e precisam de ser adaptados a um projeto específico. Mas dão-lhe uma estrutura de secções pronta e a integração básica do fullPage.js, o que poupa meio dia de trabalho.

Existe também um tema WordPress oficial do criador e os plugins para Elementor, Gutenberg e Divi mencionados acima. Os plugins são pagos, mas cobrem 95% das tarefas sem uma única linha de código.

Um pequeno vídeo sobre a instalação e configuração do fullPage.js no WordPress, que mostra claramente o processo de integração através do plugin oficial para Divi.

⁉️🤔 Perguntas frequentes

O fullPage.js é gratuito?

Sim, para projetos de código aberto sob a licença GPLv3 é totalmente gratuito. Para sites comerciais fechados, precisa de uma licença comercial. Os plugins WordPress para Elementor, Gutenberg e Divi são produtos pagos separados, a partir de $29 por site.

Em que é que o fullPage.js é melhor do que o CSS Scroll Snap?

O CSS Scroll Snap comporta-se de forma diferente consoante o navegador: suave no Safari, aos solavancos no Chrome, com atraso no telemóvel. O fullPage.js oferece o mesmo comportamento em todo o lado. Além disso, de raiz: âncoras de URL, histórico do navegador, slides horizontais, scroll interior nas secções e 37 opções de animação. Sem polyfills e sem remendos manuais.

Como se desativa o fullPage.js no telemóvel?

As opções responsiveWidth: 1024 e responsiveHeight: 768 na configuração. Quando a largura do ecrã é inferior a 1024px ou a altura inferior a 768px, a biblioteca desativa automaticamente o scroll por snap e regressa ao scroll normal. Não são necessárias verificações extra de userAgent.

Pode usar-se o fullPage.js com o WooCommerce?

Sim, mas com cuidado. As páginas de produto e carrinho não devem ser de ecrã inteiro, pois prejudica a experiência de compra. Associe o fullPage.js apenas à página inicial ou a landing pages específicas através das tags condicionais do WordPress: is_front_page() ou is_page('landing').

Porque é que o vídeo de fundo não funciona no iOS?

O Safari no iPhone e iPad exige o atributo playsinline na tag <video>. Sem ele, o vídeo entra num leitor de ecrã inteiro e não funciona como fundo. Certifique-se também de que o vídeo está codificado em H.264 (MP4), o HEVC não é suportado em todos os dispositivos Apple.

FullPage.js em 2026: configuração manual ou um plugin

Se está a construir uma landing page, um portefólio ou um site de apresentação, o fullPage.js proporciona um efeito visual que o CSS puro não consegue alcançar. Mais de 35 000 estrelas no GitHub e 2,5 milhões de instalações por mês confirmam que a biblioteca está viva e estável.

Para lojas online, blogs e painéis de administração, não vale a pena. O scroll de ecrã inteiro atrapalha a navegação e o consumo de conteúdo, o utilizador cansa-se ao fim de 3 a 4 deslizes.

Escolher o seu caminho: se precisa de controlo total sobre cada secção e está pronto a escrever código, opte pelo carregamento manual via wp_enqueue_script. Se quiser construir uma landing page visualmente no Elementor ou Gutenberg numa hora, utilize o plugin oficial. Ambas as abordagens estão comprovadas na prática, ambas funcionam sem surpresas.

Já experimentou o fullPage.js nos seus próprios projetos? Partilhe a sua experiência nos comentários, e construiremos uma lista viva de soluções para problemas comuns de integração.