fullPage.js4.0.30

preview compatibility

Disponível para Vue, React e Angular.

| Created by @imac2

Uma biblioteca simples e fácil de usar que cria sites de rolagem em tela cheia (também conhecidos como sites de página única ou sites de uma página) e adiciona controles deslizantes de paisagem dentro das seções do site.

IntroduçãoIntrodução

Sugestões são mais do que bem vindas, não apenas para solicitações de funções mas também para melhorias de estilo de código. Vamos fazer isso ser uma boa biblioteca para tornar a vida das pessoas mais fácil!

CompatibilidadeCompatibilidade

fullPage.js é totalmente funcional em todos os navegadores modernos e no IE 11. Se você precisa dar suporte a versões anteriores ao IE 11, considere usar fullPage.js v3. Ele também dá suporte ao toque para dispositivos móveis, tablets e computadores touch screen.

Um agradeicmento especial para Browserstack por apoiar o fullpage.js.

LicençaLicença

Licença comercialLicença comercial

Se você quiser usar fullPage para desenvolver sites, temas, projetos e aplicativos de código não aberto, a licença Comercial é a licença apropriada. Com esta opção, seu código-fonte é mantido proprietário. O que significa que você não precisará alterar todo o código-fonte do aplicativo para uma licença de código aberto. Comprar uma licença comercial do Fullpage

Licença Open sourceLicença Open source

Se você estiver criando um aplicativo de código aberto sob uma licença compatível com a licença GNU GPL v3, poderá usar o fullPage sob os termos da GPLv3 .

Você terá que fornecer um aviso proeminente de que fullPage.js está em uso. Os comentários de crédito nos arquivos JavaScript e CSS devem ser mantidos intactos (mesmo após combinação ou minificação).

UsoUso

Como você pode ver nos arquivos de exemplo, você precisará incluir:

O arquivo JavaScript fullpage.js (ou sua versão minificada fullpage.min.js)
O arquivo css fullpage.css

Opcionalmente, ao usar css3:false, você pode adicionar o arquivo easings em caso você queira usar outros efeitos de atenuação além do incluído na biblioteca (easeInOutCubic).

Instalar usando bower ou npmInstalar usando bower ou npm

Opcionalmente, você pode instalar fullPage.js com bower ou npm se preferir:

Terminal:

Copiar// Com bower
bower install fullpage.js

// Com npm
npm install fullpage.js

Incluindo arquivos:Incluindo arquivos:

Copiar<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- Esta linha a seguir é opcional. Necessário apenas se você usar a opção css3:false e quiser usar outros efeitos de atenuação em vez de "easeInOutCubic". -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Usando Webpack, Browserify ou Require.js? Confira como usar fullPage.js com module loaders.

Uso opcional de CDNUso opcional de CDN

Se você preferir usar um CDN para carregar os arquivos necessários, fullPage.js está em CDNJS: https://cdnjs.com/libraries/fullPage.js

Estrutura HTML necessáriaEstrutura HTML necessária

Inicie seu documento HTML com a declaração HTML DOCTYPE obrigatória na primeira linha do seu código HTML. Caso contrário, você pode ter problemas com as alturas das seções. Os exemplos fornecidos usam o tipo de documento HTML5 <!DOCTYPE html>.

Cada seção será definida com um elemento contendo a classe section. A seção ativa por padrão será a primeira seção, que é considerada a página inicial.

As seções devem ser colocadas dentro de um wrapper (<div id="fullpage"> neste caso). O wrapper não pode ser o elemento body.

Copiar<div id="fullpage">
    <div class="section">Alguma seção</div>
    <div class="section">Alguma seção</div>
    <div class="section">Alguma seção</div>
    <div class="section">Alguma seção</div>
</div>

Se você quiser definir um ponto de partida diferente em vez da primeira seção ou do primeiro slide de uma seção, basta adicionar a classe active à seção e ao slide que deseja carregar primeiro.

Copiar<div class="section active">Alguma seção</div>

Para criar um controle deslizante de paisagem dentro de uma seção, cada slide será definido por padrão com um elemento contendo a classe slide:

Copiar<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

Você pode ver um exemplo totalmente funcional da estrutura HTML no arquivo simple.html.

InicializaçãoInicialização

Inicialização com Vanilla JavascriptInicialização com Vanilla Javascript

Tudo que você precisa fazer é chamar fullPage.js antes da tag de fechamento </body>.

Copiarnew fullpage('#fullpage', {
    //opções aqui
    autoScrolling:true,
    scrollHorizontally: true
});

Inicialização com jQueryInicialização com jQuery

Você pode usar fullpage.js como um plugin do jQuery se quiser!

Copiar$(document).ready(function() {
    $('#fullpage').fullpage({
        //Opções aqui
        autoScrolling:true,
        scrollHorizontally: true
    });

    // Example of how to use fullpage.js methods
    $.fn.fullpage.setAllowScrolling(false);
});

Exemplo de Vanilla JS com todas as opçõesExemplo de Vanilla JS com todas as opções

Uma inicialização mais complexa com todas as opções definidas pode ser assim:

Copiar
var myFullpage = new fullpage('#fullpage', {
    // Navegação
    menu: '#menu',
    lockAnchors: false,
    anchors:['firstPage', 'secondPage'],
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    showActiveTooltip: false,
    slidesNavigation: false,
    slidesNavPosition: 'bottom',

    // Rolagem
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 600,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    continuousHorizontal: false,
    scrollHorizontally: false,
    interlockedSlides: false,
    dragAndMove: false,
    offsetSections: false,
    resetSliders: false,
    fadingEffect: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: true,
    scrollOverflowMacStyle: false,
    scrollOverflowReset: false,
    touchSensitivity: 15,
    bigSectionsDestination: null,

    // Acessibilidade
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    // Design
    controlArrows: true,
    controlArrowsHTML: [
        '<div class="fp-arrow"></div>', 
        '<div class="fp-arrow"></div>'
    ],
    verticalCentered: true,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,
    responsiveSlides: false,
    parallax: false,
    parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
    dropEffect: false,
    dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
    waterEffect: false,
    waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
    cards: false,
    cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

    // Seletores customizados
    sectionSelector: '.section',
    slideSelector: '.slide',

    lazyLoading: true,
    lazyLoadThreshold: 0,
    observer: true,
    credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},

    // Evento
    beforeLeave: function(origin, destination, direction, trigger){},
    onLeave: function(origin, destination, direction, trigger){},
    afterLoad: function(origin, destination, direction, trigger){},
    afterRender: function(){},
    afterResize: function(width, height){},
    afterReBuild: function(){},
    afterResponsive: function(isResponsive){},
    afterSlideLoad: function(section, origin, destination, direction, trigger){},
    onSlideLeave: function(section, origin, destination, direction, trigger){},
    onScrollOverflow: function(section, slide, position, direction){}
});

Criando links para seções ou slidesCriando links para seções ou slides

Se você estiver usando fullPage.js com links âncora para as seções (usando a opção anchors ou o atributo data-anchor em cada seção), poderá usar links âncora também para navegar diretamente para um determinado slide dentro de uma seção.

Este seria um exemplo de um link com uma âncora: https://alvarotrigo.com/fullPage/#secondPage/2 (que é a URL que você verá quando acessar essa seção/slide manualmente) Observe que a última parte da URL termina em #secondPage/2.

Tendo a seguinte inicialização:

Copiarnew fullpage('#fullpage', {
    anchors:['firstPage', 'secondPage', 'thirdPage']
});

A âncora no final da URL #secondPage/2 define a seção e o slide de destino, respectivamente. Na URL anterior, a seção de destino será aquela definida com a âncora secondPage e o slide será o 2º slide, pois estamos usando o índice 2 para isso. (o primeiro slide de uma seção tem índice 0, pois tecnicamente é uma seção).

Poderíamos ter usado uma âncora personalizada para o slide em vez de seu índice se tivéssemos usado o atributo data-anchor na marcação HTML assim:

Copiar<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide3"> Slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

Neste último caso, a URL que usaríamos seria #secondPage/slide3, que é equivalente à nossa anterior #secondPage/2.

Observe que as âncoras de seção também podem ser definidas da mesma maneira, usando o atributo data-anchor, se nenhum array anchors for fornecido.

Cuidado! As tags data-anchor não podem ter o mesmo valor que qualquer elemento de ID no site (ou elemento NAME para IE).

Criando seções maiores ou menoresCriando seções maiores ou menores

Demonstração fullPage.js fornece uma maneira de remover a restrição de altura total de suas seções e slides. É possível criar seções cuja altura seja menor ou maior que a viewport. Isso é ideal para rodapés. É importante perceber que não faz sentido ter todas as suas seções usando esse recurso. Se houver mais de uma seção no carregamento inicial do site, fullPage.js não rolará para ver a próxima, pois ela já estará na janela de visualização.

Para criar seções menores, basta usar a classe fp-auto-height na seção que você deseja aplicá-la. Em seguida, ele terá a altura definida pelo conteúdo da sua seção/slide.

Copiar<div class="section">Viewport completa</div>
<div class="section fp-auto-height">Altura automática</div>

Seções de altura responsivaSeções de altura responsiva

Demonstração Uma altura automática responsiva pode ser aplicada usando a classe fp-auto-height-responsive. Dessa forma, as seções ficarão em tela cheia até que o modo responsivo seja acionado. Em seguida, eles terão o tamanho exigido pelo conteúdo, que pode ser maior ou menor que a janela de visualização.

Classes de estado adicionadas pelo fullPage.jsClasses de estado adicionadas pelo fullPage.js

Fullpage.js adiciona várias classes em diferentes elementos para manter um registro do status do site:

active é adicionado à seção e slide visíveis atuais.
active é adicionado ao elemento de menu atual (se estiver usando a opção menu).
Uma classe no formato fp-viewing-SECTION-SLIDE é adicionada ao elemento body do site. (ex: fp-viewing-secondPage-0) As partes SECTION e SLIDE serão as âncoras (ou índices se nenhuma âncora for fornecida) da seção e slide atuais.
fp-responsive é adicionado ao elemento body ao entrar no modo responsivo
fp-enabled é adicionado ao elemento html quando fullpage.js está habilitado. (e removido quando destruído).
fp-destroyed é adicionado ao contêiner fullpage.js quando fullPage.js é destruído.

Lazy LoadingLazy Loading

Demonstração fullPage.js fornece uma maneira de carregar imagens, vídeos e elementos de áudio de forma lenta para que eles não retardem o carregamento do seu site ou desperdicem desnecessariamente a transferência de dados. Ao usar o carregamento lento, todos esses elementos só serão carregados ao entrar na viewport. Para habilitar o carregamento lento, tudo o que você precisa fazer é alterar seu atributo src para data-src como mostrado abaixo:

Copiar<img data-src="image.png">
<video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
</video>

Se você já usa outra solução de carregamento lento que também usa data-src, você pode desabilitar o carregamento lento fullPage.js configurando a opção lazyLoading: false.

Reprodução/pausa automática de mídias embutidasReprodução/pausa automática de mídias embutidas

Demonstração Observação: o recurso de reprodução automática pode não funcionar em alguns dispositivos móveis dependendo do sistema operacional e do navegador (ou seja, Safari no iOS versão < 10.0).

Tocar ao carregar seção/slide:Tocar ao carregar seção/slide:

Usar o atributo autoplay para vídeos ou áudio, ou o parâmetro autoplay=1 para iframes do youtube resultará na reprodução do elemento de mídia no carregamento da página. Para reproduzi-lo no carregamento de seção/slide, use o atributo data-autoplay. Por exemplo:

Copiar<audio data-autoplay>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

Pausar ao sairPausar ao sair

Os iframes HTML5 <vídeo> / <áudio> incorporados e do YouTube são pausados automaticamente quando você sai de uma seção ou slide. Isso pode ser desabilitado usando o atributo data-keepplaying. Por exemplo:

Copiar<code>
### Uso de extensões
fullpage.js [fornece um conjunto de extensões](https://alvarotrigo.com/fullPage/extensions/br/) que você pode usar para aprimorar seus recursos padrão. Todos eles estão listados como [opções fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese/#opções).

Extensões requer que você use o arquivo minificado [`fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/blob/master/dist/fullpage.extensions.min.js) que é dentro da [pasta `dist`](https://github.com/alvarotrigo/fullPage.js/tree/master/dist) em vez do arquivo fullPage.js usual (`fullpage.js` ou `fullpage.min.js `).

Depois de adquirir o arquivo de extensão, você precisará adicioná-lo antes do fullPage. Por exemplo, se eu quiser usar a extensão Horizontal Contínua, teria que incluir o arquivo de extensão e, em seguida, a versão das extensões do arquivo fullPage.

```html
<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>

Uma chave de ativação e uma chave de licença serão necessárias para cada extensão. Veja mais detalhes sobre isso aqui.

Então você poderá usá-los e configurá-los conforme explicado em Opções.

OpçõesOpções

licenseKey:licenseKey:

(padrão null). Esta opção é obrigatória. Se você usar o fullPage em um projeto não open source, deverá utilizar a chave de licença fornecida na compra da Licença Comercial do fullPage. Se o seu projeto for open source e for compatível com a licença GPLv3, você pode solicitar uma chave de licença. Por favor, leia mais sobre as licenças aqui e no site. Exemplo de uso:

Copiarnew fullpage('#fullpage', {
    licenseKey: 'YOUR_KEY_HERE'
});