SummArg | Cursos y recursos para webmasters

20/11/2013

Sitios de una única página con fullPage.js

Recientemente hablamos sobre One Page Scroll, un plugin jQuery que sirve para tener sitios web basados en una única página y que al realizar scroll cambiamos de contenidos. En esta oportunidad queremos presentarles un plugin jQuery ultra-simple que logra el mismo efecto: fullPage.js, un script que nos permite deslizar contenidos de modo horizontal como vertical.

fullPage-js-fullScreen-scrolling-website

fullPage es un desarrollo de Alvaro Trigo y el proyecto puede descargarse de Github. Hay documentación y soporte por parte del autor en su sitio. Sus características principales son:

  • Scroll entre secciones usando la rueda del mouse.
  • Scroll entre secciones (vertical) y entre sliders (horizontal) usando las flechas del teclado y las teclas RePag y AvPag.
  • Permite múltiples callbacks.
  • Eventos touch para móviles y tabletas.
  • Soporta links para cada sección desde un menú.
  • Soporta animaciones CSS3
  • Autoajuste para cubrir una sección o slide (incluye adaptar texto) al redimensionar la ventana del navegador.
  • Opciones de animación

Para construir un sitio utilizando este recurso sólo debemos mantener una estructura como la siguiente:

<div class="section">Contenido de una página</div>
<div class="section">Contenido de una página</div>
<div class="section">
     <div class="slide">Slide 1</div>
     <div class="slide">Slide 2</div>
     <div class="slide">Slide</div>
     <div class="slide">Slide 4</div>
</div>
<div class="section">Contenido de una página</div>

Cada .section se navega con scroll vertical, y cada .slide lo hace con un scroll horizontal.

Al final del documento colocamos la inicialización del plugin (tengan en cuenta que deben linkear jQuery y fullPage previamente).

<script>
$(document).ready(function() {
    $.fn.fullpage();
});
</script>

Descarga | Demo

Dejar un comentario