fullPage.js – Crea sitios de una página de forma rápida y sencilla

En la actualidad los sitios de una sola página son muy populares, es por eso que les traigo una recomendación si desean crear un sitio de este tipo. El plugin se llama FullPage.js y permite crear de forma sencilla una página con desplazamientos tanto vertical como horizontal.

Las características principales de este plugin son:

Desplazamiento  vertical y horizontal utilizando el scroll del mouse, flechas de dirección o teclas Repag y Avpag

  • Permite múltiples callbacks (afterLoad, onLeave, afterRender, afterResize, afterSlideLoad,onSlideLeave) .
  • Soporta animaciones CSS3
  • Backgrounds de imágenes y vídeos
  • Ajuste responsivo al re dimensionar el navegador.
  • Soporte para tabletas y móviles.

 

Para implementarlo solo tenemos que seguir estos sencillos pasos.

Primero incluimos los archivos js y css necesarios.

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

Despues se procede a crear la estructura HTML necesaria: secciones(vertical) y slides(Horizontal).

<div id="fullpage">
    <div class="section">Sección 1</div>
    <div class="section">Sección 2</div>
    <div class="section">
        <div class="slide">
            <h1>Slide1</h1>
            <p>La información va aquí</p>
        </div>
        <div class="slide">
            <h1>Slide2</h1>
            <p>La información va aquí</p>
        </div>
    </div>
    <div class="section">Sección 4</div>
</div>

Por ultimo se inicializa el plugin con el siguiente código dentro de la función document.ready de jQuery

    $(document).ready(function() {
        $('#fullpage').fullpage();
    });

Puedes descargar y consultar la documentación y demos en alvarotrigo.com/fullPage/

Deja un comentario