Foto

CRISTIAN NAVARRO

PhD Candidate in Economics, CEMFI
cristian.navarro@cemfi.edu.es

About
Research
Teaching

fullPage.js

fullPage.js

preview compatibility

English | Español | Français | Pусский | 中文 | 한국어 | Português Brasileiro

Disponível para Vue, React e Angular.

fullPage.js version License PayPal Donate jsDelivr Hits Minzipped Size   |   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çã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!

Compatibilidade

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ça

Licenç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 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).

Leia mais sobre a licença do fullPage.

Uso

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

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 npm

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

Terminal:

// Com bower
bower install fullpage.js

// Com npm
npm install fullpage.js

Incluindo arquivos:

<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 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á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.

<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.

<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:

<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ção

Inicialização com Vanilla Javascript

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

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

Inicialização com jQuery

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

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

	//métodos
	$.fn.fullpage.setAllowScrolling(false);
});

Funções e métodos ainda podem ser chamados no jeito jQuery, como no fullPage.js v2.X.

Exemplo de Vanilla JS com todas as opções

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


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

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:

new 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:

<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 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.

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

Seçõ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.js

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

Lazy 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:

<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 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:

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:

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

Pausar 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:


### 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ções

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

Importante É útil entender que os valores no array de opções anchors se correlacionam diretamente com o elemento com a classe .section por sua posição na marcação.

<ul id="myMenu">
	<li data-menuanchor="firstPage" class="active"><a href="#firstPage">Primeira section</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Segunda section</a></li>
	<li data-menuanchor="thirdPage"><a href="#thirdPage">Terceira section</a></li>
	<li data-menuanchor="fourthPage"><a href="#fourthPage">Quarta section</a></li>
</ul>

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	menu: '#myMenu'
});

Observação: o elemento de menu deve ser colocado fora do wrapper de página inteira para evitar problemas ao usar css3:true. Caso contrário, ele será anexado ao body pelo próprio plugin.

Métodos

Você pode vê-los em ação aqui

getActiveSection()

Demonstração Obtém um objeto (tipo Section) contendo a seção ativa e suas propriedades.

fullpage_api.getActiveSection();

getActiveSlide()

Demonstração Obtém um objeto (tipo Slide) contendo o slide ativo e suas propriedades.

fullpage_api.getActiveSlide();

getScrollY() & getScrollX

Demonstração getScrollY Obtém a posição Y do wrapper fullPage. getScrollX obtém a posição X do slide horizontal ativo.

fullpage_api.getScrollY();
fullpage_api.getScrollX();

moveSectionUp()

Demonstração Rola uma seção para cima:

fullpage_api.moveSectionUp();

moveSectionDown()

Demonstração Rola uma seção para baixo:

fullpage_api.moveSectionDown();

moveTo(section, slide)

Demonstração Rola a página até a seção e o slide fornecidos. A primeira seção terá o índice 1 enquanto o primeiro slide, o visível por padrão, terá o índice 0.

/*Rolando para a seção com o link âncora `firstSlide` e para o 2º Slide */
fullpage_api.moveTo('firstSlide', 2);


//Rolando para a 3ª seção (com índice 3) no site
fullpage_api.moveTo(3, 0);

//Que é o mesmo que
fullpage_api.moveTo(3);

silentMoveTo(section, slide)

Demonstração Exatamente igual ao moveTo mas neste caso ele realiza o scroll sem animação. Um salto direto para o destino.

/*Rolando para a seção com o link âncora `firstSlide` e para o 2º Slide */
fullpage_api.silentMoveTo('firstSlide', 2);

moveSlideRight()

Demonstração Rola o controle deslizante horizontal da seção atual para o próximo slide:

fullpage_api.moveSlideRight();

moveSlideLeft()

Demonstração Rola o controle deslizante horizontal da seção atual para o slide anterior:

fullpage_api.moveSlideLeft();

setAutoScrolling(boolean)

Demonstração Define a configuração de rolagem em tempo real. Define a forma como a rolagem da página se comporta. Se estiver definido como true, usará a rolagem “automática”, caso contrário, usará a rolagem “manual” ou “normal” do site.

fullpage_api.setAutoScrolling(false);

setFitToSection(boolean)

Demonstração Define o valor para a opção fitToSection determinando se cabe ou não a seção na tela.

fullpage_api.setFitToSection(false);

fitToSection()

Demonstração Rola para a seção ativa mais próxima, ajustando-a na viewport.

fullpage_api.fitToSection();

setLockAnchors(boolean)

Demonstração Define o valor para a opção lockAnchors determinando se as âncoras terão algum efeito na URL ou não.

fullpage_api.setLockAnchors(false);

setAllowScrolling(boolean, [directions])

Demonstração Adiciona ou remove a possibilidade de rolar pelas seções/slides usando a roda do mouse/trackpad ou gestos de toque (que está ativo por padrão). Observe que isso não desativará a rolagem do teclado. Você precisaria usar setKeyboardScrolling para isso.


//desabilitando rolagem
fullpage_api.setAllowScrolling(false);

//desabilitando rolagem para baixo
fullpage_api.setAllowScrolling(false, 'down');

//desabilitando rolagem para baixo e direita
fullpage_api.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(boolean, [directions])

Demonstração Adiciona ou remove a possibilidade de rolar pelas seções usando o teclado (que está ativo por padrão).

//desabilitando toda a rolagem do teclado
fullpage_api.setKeyboardScrolling(false);

//desabilitando a rolagem do teclado para baixo
fullpage_api.setKeyboardScrolling(false, 'down');

//desabilitando a rolagem do teclado para baixo e para a direita
fullpage_api.setKeyboardScrolling(false, 'down, right');

setRecordHistory(boolean)

Demonstração Define se deve registrar o histórico para cada alteração de hash na URL.

fullpage_api.setRecordHistory(false);

setScrollingSpeed(milliseconds)

Demonstração Define a velocidade de rolagem em milissegundos.

fullpage_api.setScrollingSpeed(700);

destroy(type)

Demonstração Destrói os eventos do plug-in e, opcionalmente, sua marcação e estilos HTML. Ideal para usar ao usar AJAX para carregar conteúdo.

//destruindo todos os eventos Javascript criados pelo fullPage.js (scrolls, hashchange na URL...)
fullpage_api.destroy();

//destruindo todos os eventos Javascript e qualquer modificação feita pelo fullPage.js sobre sua marcação HTML original.
fullpage_api.destroy('all');

reBuild()

Atualiza a estrutura DOM para ajustar o novo tamanho da janela ou seu conteúdo. Ideal para usar em combinação com chamadas AJAX ou mudanças externas na estrutura DOM do site, especialmente quando se utiliza scrollOverflow:true.

fullpage_api.reBuild();

setResponsive(boolean)

Demonstração Define o modo responsivo da página. Quando definido como true, o autoScrolling será desativado e o resultado será exatamente o mesmo de quando as opções responsiveWidth ou responsiveHeight forem acionadas.

fullpage_api.setResponsive(true);

responsiveSlides.toSections()

Extensões do fullpage.js. Requer fullpage.js >= 3.0.1. Transforma slides horizontais em seções verticais.

fullpage_api.responsiveSlides.toSections();

responsiveSlides.toSlides()

Extensões do fullpage.js. Requer fullpage.js >= 3.0.1. Volta os slides originais (agora convertidos em seções verticais) em slides horizontais novamente.

fullpage_api.responsiveSlides.toSlides();

Callbacks

Demonstração Você pode vê-los em ação aqui.

Alguns retornos de chamada, como onLeave, conterão parâmetros do tipo Object contendo as seguintes propriedades:

afterLoad (origin, destination, direction, trigger)

Demonstração Callback acionado após o carregamento das seções, após o término da rolagem. Parâmetros:

Exemplo:

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterLoad: function(origin, destination, direction, trigger){
		var origin = this;

		//usando index
		if(origin.index == 2){
			alert("Section 3 ended loading");
		}

		//usando anchorLink
		if(origin.anchor == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});

onLeave (origin, destination, direction, trigger)

Demonstração Esse retorno de chamada é acionado quando o usuário sai de uma seção, na transição para a nova seção. Retornar false cancelará a movimentação antes que ela ocorra.

Parâmetros:

Exemplo:

new fullpage('#fullpage', {
	onLeave: function(origin, destination, direction, trigger){
		var leavingSection = this;

		//depois de sair da seção 2
		if(origin.index == 1 && direction =='down'){
			alert("Going to section 3!");
		}

		else if(origin.index == 1 && direction == 'up'){
			alert("Going to section 1!");
		}
	}
});

beforeLeave (origin, destination, direction, trigger)

Demonstração Esse retorno de chamada é acionado imediatamente antes de sair da seção, pouco antes da transição.

Você pode usar esse retorno de chamada para impedir e cancelar a rolagem antes que ela ocorra retornando false.

Parâmetros:

Example:


var cont = 0;
new fullpage('#fullpage', {
	beforeLeave: function(origin, destination, direction, trigger){

		// impede scroll até que tenhamos rolado 4 vezes
		cont++;
		return cont === 4;
	}
});

afterRender()

Demonstração Esse retorno de chamada é acionado logo após a geração da estrutura da página. Este é o retorno de chamada que você deseja usar para inicializar outros plugins ou disparar qualquer código que exija que o documento esteja pronto (já que este plugin modifica o DOM para criar a estrutura resultante). Consulte Perguntas Frequentes para obter mais informações.

Example:

new fullpage('#fullpage', {
	afterRender: function(){
		var pluginContainer = this;
		alert("A estrutura DOM resultante está pronta");
	}
});

afterResize(width, height)

Demonstração Este retorno de chamada é acionado após o redimensionamento da janela do navegador. Logo após as seções serem redimensionadas.

Parâmetros:

Exemplo:

new fullpage('#fullpage', {
	afterResize: function(width, height){
		var fullpageContainer = this;
		alert("As seções terminaram de escalonar");
	}
});

afterReBuild()

Demonstração Este retorno de chamada é acionado após a reconstrução manual de fullpage.js chamando fullpage_api.reBuild().

Exemplo:

new fullpage('#fullpage', {
	afterReBuild: function(){
		console.log("fullPage.js foi reconstruído manualmente");
	}
});

afterResponsive(isResponsive)

Demonstração Esse retorno de chamada é acionado depois que fullpage.js muda do modo normal para o modo responsivo ou do modo responsivo para o modo normal.

Parâmetros:

Exemplo:

new fullpage('#fullpage', {
	afterResponsive: function(isResponsive){
		alert("É responsivo: " + isResponsive);
	}
});

afterSlideLoad (section, origin, destination, direction, trigger)

Demonstração O retorno de chamada é acionado quando o slide de uma seção é carregado, após o término da rolagem.

Parâmetros:

Exemplo:

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterSlideLoad: function( section, origin, destination, direction, trigger){
		var loadedSlide = this;

		//Primeiro slide da segunda seção
		if(section.anchor == 'secondPage' && destination.index == 1){
			alert("Primeiro slide carregado");
		}

		//Segundo slide da segunda seção (supondo que #secondSlide é âncora para a segunda seção)
		if(section.index == 1 && destination.anchor == 'secondSlide'){
			alert("Segundo slide carregado");
		}
	}
});

onSlideLeave (section, origin, destination, direction, trigger)

Demonstração Esse retorno de chamada é acionado quando o usuário sai de um slide para ir para outro, na transição para o novo slide. Retornar false cancelará a movimentação antes que ela ocorra.

Parâmetros:

Example:

new fullpage('#fullpage', {
	onSlideLeave: function( section, origin, destination, direction, trigger){
		var leavingSlide = this;

		//deixando o primeiro slide da 2ª Seção à direita
		if(section.index == 1 && origin.index == 0 && direction == 'right'){
			alert("Saindo do primeiro slide!!");
		}

		//deixando o 3º slide da 2ª Seção para a esquerda
		if(section.index == 1 && origin.index == 2 && direction == 'left'){
			alert("Indo pro slide 2");
		}
	}
});

Cancelando um movimento antes que ele ocorra

Você pode cancelar um movimento retornando false no retorno de chamada onSlideLeave. O mesmo que cancelar um movimento com onLeave.

onScrollOverflow (section, slide, position, direction)

Demonstração Este retorno de chamada é disparado quando uma rolagem dentro de uma seção rolável ao usar a opção fullPage.js scrollOverflow: true.

Parâmetros:

Exemplo:

new fullpage('#fullpage', {
	onScrollOverflow: function( section, slide, position, direction){
		console.log(section);
		console.log("Posição: " + position);
	}
});

Relatando problemas

  1. Por favor, procure seu problema antes de perguntar usando a pesquisa de Issues do github.
  2. Certifique-se de usar a versão mais recente do fullpage.js. Nenhum suporte é fornecido para versões mais antigas.
  3. Use o fórum de Issues do Github para criar Issues.
  4. Será necessária uma reprodução isolada da edição. Use o jsfiddle ou codepen para isso, se possível.

Contribuindo para fullpage.js

Consulte Contribuindo para o fullpage.js

Changelogs

Para ver a lista de alterações recentes, consulte a seção Releases

Tarefas de Build

Quer buildar arquivos de distribuição do fullpage.js? Consulte Tarefas de Build

Recursos

Quem está usando o fullPage.js

Google Coca-cola eBay BBC Sony

Vodafone British Airways McDonalds EA Vogue Mi

Mercedes sym Bugatti eDarling Ubisoft

Doações

Doações serão mais que bem-vindas :)

Doe

Patrocinadores

Torne-se um patrocinador e obtenha seu logotipo em nosso README no Github com um link para seu site. [Seja um patrocinador] | [Torne-se um patreon]

Codeless Stackpath Browserstack CodePen

Pessoas