Navegación simple de una página/desplazamiento con fullpage. js

Vista prévia

Descripción

Fullpage. js es una biblioteca de JavaScript ligera que se utiliza para crear una navegación de una página que le permite navegar a través de las secciones de contenido con animaciones de fantasía basado en la transformación CSS3.

Uso básico

Cargue el script fullpage. js al final de su sitio web de desplazamiento de una página.

<script src="js/fullPage.min.js"></script>

Divida el contenido principal en varias secciones.

<div id="pageContain">


<div class="page page1 current">


<div class="contain"> </div>

</div>

<div class="page page2">


<div class="contain"> </div>

</div>

<div class="page page3">


<div class="contain"> </div>

</div>



...


</div>

Agregue una barra de navegación lateral que permita al visitante desplazarse a las secciones deseadas.

<ul id="navBar">

<li>0</li>

<li>1</li>

<li>2</li>

<li>3</li>
</ul>

El CSS principal para el estilo de las secciones de contenido & barra de navegación.

#pageContain { overflow: hidden; }

.page {

display: none;

width: 100%;

height: 100%;

overflow: hidden;

position: absolute;

top: 0;

left: 0;
}

.contain {

width: 100%;

height: 100%;

display: none;

position: relative;

z-index: 0;
}

.current .contain,
.slide .contain { display: block; }

.current {

display: block;

z-index: 1;
}

.slide {

display: block;

z-index: 2;
}

.swipe {

display: block;

z-index: 3;

transition-duration: 0ms !important;

-webkit-transition-duration: 0ms !important;
}

.page1 { background: #37c1e3; }

.page2 { background: #009922; }

.page3 { background: #992211; }

.page4 { background: #ff00ff; }

.page5 { background: #00ff00; }

.page6 { background: #22ffff; }

#navBar {

z-index: 3;

position: absolute;

top: 10%;

right: 3%;
}

#navBar .active { background: #ccc; }

#navBar li {

cursor: pointer;

margin-bottom: 10px;

transition: all .7s ease;

border-radius: 50%;

line-height: 40px;

text-align: center;

width: 40px;

height: 40px;
}

Habilite la navegación de una página.

var runPage;

runPage = new FullPage({



// id of contain

id : 'pageContain',




 // slide animation speed

slideTime : 800,




// slide animation

effect : {











 transform : {




// 'X'|'Y'|'XY'|'none'



translate : 'Y',







// [scalefrom, scaleto]



scale : [.1, 1],









// [rotatefrom, rotateto]



rotate : [270, 0]





 },



// [opacityfrom, opacityto]


opacity : [0, 1]








 },








// mode of fullpage

mode : 'wheel,touch,nav:navBar',




// easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )

easing : 'ease',











 // callback when pageChange

callback : function(index, thisPage) {}

});