Desplazamiento vertical y horizontal con fullPage.js

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En estos días, más y más sitios están diseñados en base al enfoque de una sola página (conocidos como páginas de unica página o de una página). En este artículo, exploraremos cómo crear tal experiencia para un sitio de demostración aprovechando fullPage.js.

Echa un vistazo a lo que vamos a construir en esta demo en Codepen. Además, todos los archivos de esta demo se pueden encontrar en este repositorio de Github.

¿Qué es fullPage.js?

FullPage.js es un plugin basado en jQuery que nos permite crear páginas web de desplazamiento de una página. Creado por el desarrollador web Alvaro Trigo, como veremos en las próximas secciones, viene con una serie de diferentes opciones de personalización.

Además, este complemento proporciona documentación bien organizada con muchos ejemplos prácticos.

Felizmente, funciona no sólo en todos los navegadores modernos, sino también en algunos ejemplos más antiguos como IE 8 y Opera 12.

Por último, es posible que desee echar un vistazo a la versión de Wordpress de la misma.

Introducción a fullPage.js

Para empezar a usar FullPage, tiene que descargar e instalar los siguientes archivos en su proyecto:

La biblioteca jQuery (≥1.6.0)
El archivo CSS jquery.fullPage.css
El archivo JS jquery.fullPage.js o su versión minificada (es decir, jquery.fullPage.min.js)

Puede obtener una copia de esos archivos visitando el repositorio de Github, utilizando un gestor de paquetes (por ejemplo, Bower) o cargando los recursos necesarios a través de un CDN (por ejemplo, cdnjs). Para este tutorial, elegiremos la última opción.

Coloque un enlace al archivo CSS dentro <head> de su documento HTML:

1	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet">

... y los scripts JS antes de la etiqueta de cierre de <body>:

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
2	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

Ahora, estamos listos para sumergirnos en el complemento.

Creación de secciones de página completa

Primero, tenemos que especificar las secciones de nuestro sitio. Para ello, asignamos la clase section a los elementos de destino y los envolvemos dentro de un contenedor que tiene un identificador único. Posteriormente, este identificador se utilizará para inicializar una instancia de fullPage.

De forma predeterminada, el complemento considera que la primera sección es la activa. Pero, si queremos, podemos cambiar ese comportamiento añadiendo la clase active a la sección deseada.

Esta es la estructura HTML necesaria para nuestro ejemplo:

<div id="fullPage">
    <section class="vertical-scrolling">
        <h2>fullPage.js</h2>
        <h3>This is the first section</h3>
        <div class="scroll-icon">
            <p>Jump into the last slide</p>
            <a href="#fifthSection/1" class="icon-up-open-big"></a
        </div>
    </section>
    <section class="vertical-scrolling">
        <!-- content here -->
    </section>
    <section class="vertical-scrolling">
        <!-- content here -->
    </section>
    <section class="vertical-scrolling">
        <!-- content here -->
    </section>  
    <section class="vertical-scrolling">
        <!-- content here -->
    </section> 
</div>

Tenga en cuenta que todas las secciones comparten un nombre de clase común (es decir, vertical-scrolling) que hemos elegido diferente del que se ha predefinido (es decir, section). Siendo así, necesitamos informar al complemento acerca de este cambio durante el proceso de inicialización.

Creación de diapositivas horizontales

Cada una de estas secciones apiladas verticalmente pueden ser opcionalmente un slider horizontal con una o más diapositivas. Para identificar las diapositivas, aplicamos la clase slides a los elementos de destino y los anidamos dentro de la sección correspondiente.

Además, es importante mencionar que, técnicamente hablando, la primera diapositiva es igual a la sección principal. ¡Vamos a examinar este comportamiento pronto!

Volviendo a nuestro ejemplo, el siguiente fragmento de código muestra cómo hemos creado dos diapositivas dentro de nuestra quinta sección:

<section class="vertical-scrolling">
    <div class="horizontal-scrolling">
        <h2>fullPage.js</h2>
        <h3>This is the fifth section and it contains the first slide</h3>
    </div>
    <div class="horizontal-scrolling">
        <h2>fullPage.js</h2>
        <h3>This is the second slide</h3> 
        <p class="end">Thank you!</p>
    </div>
</section>

Una vez más, como puede ver, hemos dado a nuestros diapositivas un nombre de clase personalizado (es decir, horizontal-scrolling).

Control de la apariencia del sitio

Podemos controlar la apariencia de nuestras secciones y diapositivas aprovechando los parámetros de configuración disponibles. Uno de esos parámetros es la propiedad sectionColor que nos da una manera fácil de definir la propiedad CSS background-color para cada sección.

Además, podemos configurar nuestros propios estilos para personalizar aún más las páginas. Por ejemplo, imagine que queremos aplicar una imagen de fondo completa a la segunda sección. Así es como podemos lograrlo:

1	section:nth-of-type(2) {
2	background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;
3	}

Personalización de las opciones de navegación

El complemento ofrece muchas opciones integradas para moverse a través de secciones y diapositivas. Algunas de estas opciones se activan de forma predeterminada (por ejemplo, rueda de ratón y teclado), mientras que otras se activan manualmente a través del objeto de configuración (por ejemplo, puntos circulares).

En nuestro proyecto, queremos agregar navegación adicional en forma de puntos. Además, elegimos ocultar las flechas izquierda y derecha que normalmente aparecen en el control deslizante. Por lo tanto, después de activar la navegación por puntos, podemos cambiar su aspecto sobrescribiendo los estilos predeterminados. Aquí están las nuevas reglas:

#fp-nav ul li a span, 
.fp-slidesNav ul li a span {
    background: white;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
}
     
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: transparent;
    box-sizing: border-box;
    border: 1px solid #24221F;
}

Y a continuación hay una captura de pantalla que muestran los cambios que hemos hecho:

default vs custom styles — Estilos predeterminados vs. estilos personalizados

Tenga en cuenta que incluimos las reglas anteriores en nuestra hoja de estilos personalizada, evitando cambios en el archivo CSS del complemento.

Creación de enlaces a secciones y diapositivas

FullPage.js nos permite cambiar la URL de nuestro sitio a medida que avanzamos por las diferentes secciones. Para ello, utilizamos el parámetro anchors. Más específicamente, este parámetro es una array que contiene los enlaces de anclaje que deben mostrarse en la URL de cada sección. Por ejemplo, en nuestro ejemplo especificamos los siguientes enlaces de anclaje (que deben ser únicos):

1	anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection']

Hecho esto, cuando visitamos la primera sección, la URL del sitio tendrá el identificador #firstSection al final, en el segundo la URL terminará en #secondSection y así sucesivamente.

De la misma manera, el complemento también modifica la URL mientras nos desplazamos por las diapositivas. En este punto, sin embargo, tenemos que recordar que, básicamente, la primera diapositiva (que tiene un índice de 0) es la sección principal relacionada. Teniendo esto en cuenta, en nuestro proyecto cuando estamos en la primera diapositiva de la quinta sección, la URL terminará en el enlace de anclaje #fifthSection. Cargar la segunda diapositiva de la misma sección activará una URL que termina en #fifthSection/1 porque la segunda diapositiva (que tiene un índice de 1) es en realidad nuestra "primera" diapositiva.

Vale la pena mencionar que podemos modificar los anclajes de nuestras diapositivas agregándoles el atributo data-anchor con los nombres de anclaje deseados (que también deberían ser únicos), como en el siguiente ejemplo:

<div class="horizontal-scrolling" data-anchor="firstSlide"></div>

Nota: Para ver las URL cambiando a medida que se desplaza, echa un vistazo a la vista de depuración de nuestra demo.

Vinculación de menús a secciones y diapositivas

Para entender mejor cómo podemos vincular un menú a la página completa, echemos un vistazo a nuestro encabezado fijo. La siguiente captura de pantalla muestra cómo se ve:

Y el HTML:

<div class="header-top clearfix">
    <h1 class="l-left">
        <a href="#firstSection">Your Logo</a>
    </h1>
    <a class="l-right toggle-menu" href="#">
        <i></i>
        <i></i>
        <i></i>
    </a>
</div>

Mientras se activa el icono de menú hamburguesa, aparece la superposición del menú principal:

Aquí está el código relacionado con este menú:

<nav class="hide">
    <ul id="menu">
        <li data-menuanchor="firstSection">
            <a href="#firstSection" title="First Section">First Section</a>
        </li>
        <li data-menuanchor="secondSection">
            <a href="#secondSection" title="Second Section">Second Section</a>
        </li>
        <!-- more list items here -->
    </ul>
</nav>

Por lo tanto, para permitir que FullPage conozca el menú, tenemos que registrarlo utilizando la propiedad de configuración del menu. A continuación es necesario vincular los elementos del menú a las secciones pertinentes. Para ello, agregamos el atributo data-menuanchor a nuestros elementos con los respectivos enlaces como valores. En la medida en que coincidan estos valores, el complemento agrega la clase active (al desplazarse) al elemento de menú correspondiente.

Tenga en cuenta que el complemento todavía no agrega la clase active a las diapositivas. Para solucionar esto, podemos usar jQuery (la mejor solución) o CSS. En nuestro ejemplo, solucionamos este problema agregando la siguiente regla CSS:

1	body.fp-viewing-fifthSection-1 #menu li:last-child a {
2	background: #453659;
3	}

Vea el resultado abajo:

De hecho, no añadimos la clase active a la segunda diapositiva. Aprovechando las diferentes clases de body que el complemento agrega a cada sección y diapositiva, simplemente damos a este elemento los estilos de la clase active.

Nota: No nos centraremos más en cómo funciona este menú porque está fuera del alcance de este tutorial.

Devoluciones de llamada para secciones

La devolución de llamada de afterLoad se activa una vez que se carga una sección y la devolución de llamada onLeave una vez que un usuario la abandona.

En nuestro proyecto esconderemos la navegación por puntos verticales cuando se cargue la quinta sección:

Así es como lo logramos:

afterLoad: function(anchorLink, index) {
    if (index == 5) {
        $('#fp-nav').hide();
    }
}

onLeave: function(index, nextIndex, direction) {
    if(index == 5) {
        $('#fp-nav').show();
    }
}

Disparar devoluciones de llamada para diapositivas

La devolución de llamada afterSlideLoad se activa cuando se carga una diapositiva y la devolución de llamada onSlideLeave cuando el usuario la deja.

En nuestro caso, nos centramos en la segunda diapositiva para realizar una serie de acciones diferentes. Por ejemplo, una vez que se carga la diapositiva, desactivamos la posibilidad de desplazarse hacia arriba. Además, cambiamos la propiedad background-color de esta diapositiva así como la apariencia de los elementos que le pertenecen.

Parte del código que usamos se muestra a continuación:

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
        $.fn.fullpage.setAllowScrolling(false, 'up');
        $(this).css('background', '#374140');
        $(this).find('h2').css('color', 'white');
      $(this).find('h3').css('color', 'white');
	    $(this).find('p').css({
            'color': '#DC3522',
            'opacity': 1,
            'transform': 'translateY(0)'
        });
    }
}
    
onSlideLeave: function( anchorLink, index, slideIndex, direction) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
        $.fn.fullpage.setAllowScrolling(true, 'up');
    }
}

Inicialización del complemento

Este es el último paso necesario para activar la funcionalidad de fullPage. Aquí, pasamos como parte del objeto de configuración todas nuestras personalizaciones. Mira a continuación el fragmento de código correspondiente:

$('#fullpage').fullpage({
    sectionSelector: '.vertical-scrolling',
    slideSelector: '.horizontal-scrolling',
    controlArrows: false
    // more options here
});

Conclusion

En este tutorial, disfrutamos de una visita rápida al complemento jQuery de fullPage.js y aprendimos a crear un sitio de desplazamiento de página completa con respuesta. Es importante entender que este tipo de sitio web no es adecuado para todos los casos. Además de su diseño atractivo, tienen muchas restricciones y su mantenimiento puede ser difícil, especialmente para sitios dinámicos. Además, este formato puede causar complicaciones con SEO.

Próximos pasos

Si desea utilizar el sitio de demostración como base para experimentar con el complemento, sugiero los siguientes desafíos:

Incorporar la excelente biblioteca animate .css al proyecto e intentar crear animaciones de desplazamiento.
Utilice su conocimiento jQuery para activar la clase active en la segunda diapositiva (consulte Vinculación de Menu a secciones y diapositivas).

Por último, si usted tiene alguna experiencia con sitios de una página, siéntase libre de compartir sus pensamientos con nosotros en los comentarios a continuación.