Repolode
Enviar
alvarotrigo

alvarotrigo/fullPage.js

Uma biblioteca JavaScript para criar sites com rolagem em tela cheia, organizados em seções e slides horizontais.

Ver no GitHubSite
Estrelas
35,360
Forks
7,061
Issues abertas
137
Último commit
há 2 meses

O que é?

fullPage.js cria sites de página única com rolagem em tela cheia, nos quais cada seção ocupa toda a viewport e pode ser acessada pela roda do mouse, por gestos de deslizar na tela, pelo teclado ou por pontos de navegação. As seções podem conter sliders horizontais, e a biblioteca também oferece links de âncora para seções e slides específicos, além de um menu vinculado à seção ativa.

A biblioteca é inicializada com uma única chamada em um elemento contêiner e configurada por meio de opções que abrangem velocidade de rolagem, easing, repetição, lazy loading de mídia e fallback responsivo para a rolagem normal abaixo de uma largura ou altura definida. Métodos e callbacks como onLeave e afterLoad permitem que os desenvolvedores se integrem às transições. Ela funciona com JavaScript puro, como plugin do jQuery, e tem wrappers para Vue, React e Angular.

Alguns recursos avançados, como efeitos cinematográficos, parallax e de slides, além de arrastar e mover, são distribuídos como extensões que exigem uma chave de licença. A biblioteca principal está disponível sob a licença GPL-3.0, com opção de licença comercial.

Recursos principais

  • 01Seções em tela cheia que se ajustam à viewport ao rolar, deslizar ou usar o teclado.
  • 02Sliders horizontais aninhados em seções.
  • 03Links de âncora para seções e slides individuais, com suporte ao histórico do navegador.
  • 04Menu e pontos de navegação que refletem a seção ativa.
  • 05Lazy loading de imagens, vídeo e áudio, além de reprodução automática e pausa ao sair da seção para mídia incorporada.
  • 06Fallback responsivo para a rolagem normal abaixo de uma largura ou altura definida.

Casos de uso

  • Criar uma landing page de marketing ou de produto, de uma página só, com seções em tela cheia.
  • Criar páginas de storytelling em que o conteúdo avança seção por seção.
  • Adicionar painéis no estilo slideshow dentro de uma página com rolagem.
  • Usar a biblioteca em projetos WordPress ou de frameworks por meio dos wrappers para Vue, React ou Angular.

Início rápido

  1. 1

    Instale o fullPage.js via npm

    npm install fullpage.js
  2. 2

    Inclua os arquivos CSS e JavaScript na sua página HTML

  3. 3

    Inicialize o fullPage.js no elemento contêiner

Antes de usar

  • É licenciado sob a GPL-3.0; portanto, o uso proprietário exige uma licença comercial separada.
  • O uso comercial em projetos de código fechado exige a compra de uma licença do fornecedor.

Tópicos

#javascript#fullscreen#scrolling#slider#single-page#animation#frontend-library#fullpage#jquery#mousewheel

Perguntas frequentes

O que é fullPage.js?
Uma biblioteca JavaScript para criar sites com rolagem em tela cheia, organizados em seções e slides horizontais. fullPage.js cria sites de página única com rolagem em tela cheia, nos quais cada seção ocupa toda a viewport e pode ser acessada pela roda do mouse, por gestos de deslizar na tela, pelo teclado ou por pontos de navegação. As seções podem conter sliders horizontais, e a biblioteca também oferece links de âncora para seções e slides específicos, além de um menu vinculado à seção ativa.
fullPage.js é gratuito? Qual é a licença?
fullPage.js é open source sob a licença GPL-3.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
fullPage.js ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de fullPage.js foi em 20 de set. de 2026.
Para que posso usar fullPage.js?
Criar uma landing page de marketing ou de produto, de uma página só, com seções em tela cheia. Criar páginas de storytelling em que o conteúdo avança seção por seção. Adicionar painéis no estilo slideshow dentro de uma página com rolagem. Usar a biblioteca em projetos WordPress ou de frameworks por meio dos wrappers para Vue, React ou Angular.
Como instalar fullPage.js?
Instale o fullPage.js via npm: npm install fullpage.js Inclua os arquivos CSS e JavaScript na sua página HTML Inicialize o fullPage.js no elemento contêiner
Onde consigo fullPage.js?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/alvarotrigo/fullPage.js

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados