Complemento de desplazamiento de página vertical de pantalla completa con Zepto. js-slidePage

Vista prévia

Descripción

slidePage es un plugin Zepto ligero pero personalizable que le permite desplazarse verticalmente y suavemente a través de un conjunto de secciones de página de ventana completa con la interacción del ratón y el teclado.

Funcionamiento

Incluya el slidePage. CSS para los estilos CSS primarios.

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

Incluya el Page-Animation. CSS para las animaciones CSS3.

<link rel="stylesheet" href="page-animation.css">

Agregue secciones de página a su página HTML. Puede especificar animaciones personalizadas para elementos internos como este:

<div class="slidePage-container">

<div class="item item1">



<h2>page1</h2>



<div class="step step1 fadeIn" data-delay="1000"></div>



<div class="step step2 fadeIn"></div>

</div>

<div class="item item2">



<h2>page2</h2>



<div class="step step1 slideRight" data-delay="1300"></div>



<div class="step step2 slideLeft"></div>



<div class="step step3 zoomIn"></div>

</div>

<div class="item item3">



<h2>page3</h2>



<div class="step step1 slideUp"></div>



<div class="step step2 slideDown"></div>

</div>

<div class="item item4">



<h2>page4</h2>



<div class="step step1 heartBeat"></div>



<div class="step step2 heartBeat"></div>

</div>

<div class="item item5">



<h2>page5</h2>



<div class="step step1 rollInRight"></div>



<div class="step step2 rollInLeft"></div>

</div>

<div class="item item6">



<h2>page6</h2>



<div class="step step1 rollInLeft"></div>



<div class="step step2 forceDown" data-delay="1000"></div>



<div class="step step3 fadeFlash infinite" data-delay="1500"></div>

</div>
</div>

Incluya el script slidePage. js después de cargar Zepto. js.

<script src="zepto.min.js"></script>
<script src="slidePage.js"></script>

Inicializar el plugin.

slidePage.init({

// options here
});

Opciones de personalización con valores predeterminados.

slidePage.init({


// intial page

'page' : 1,


// CSS selector of pages

slidePages: '.slide-page',


// container element

slideContainer: '.slide-container',


// callbacks

'before' : function(index){},

'after' : function(index){},


// re-runs animations when scrolling back

'refresh'
: true,


// enable mouse wheel

useWheel: true,


// enable swipe event

useSwipe: true,


// use animations

useAnimation: true


});

API methods.

// slide to next
slidepage.slideNext()

// slide to previous
slidepage.slidePrev()

// slide to a specific page
slidepage.slideTo(page)

// destroy
slidepage.destroy()

// add a new page
slidepage.update(newSlidePages)

Registro de cambios

v3.1.7 (08/12/2018)

• Errores