Estos días cada vez se diseñan más y más sitios en función del enfoque de una sola página (conocido como sitios de una sola página o de una sola página). En este artículo, exploraremos cómo crear esa experiencia para un sitio de demostración aprovechando fullPage.js. 

Eche un vistazo a lo que vamos a construir en esta demostración de Codepen. Además, todos los archivos para esta demostración se pueden encontrar en este repositorio de Github.

Qué es fullPage.js?

fullPage.js es un complemento basado en jQuery que nos permite crear sitios web de desplazamiento de una página. Creado por el desarrollador web Álvaro 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. 

Afortunadamente, funciona no solo 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.

Comenzando con fullPage.js

Para comenzar con fullPage, debe descargar e instalar los siguientes archivos en su proyecto:

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

Puede obtener una copia de esos archivos visitando el repositorio de Github, usando un administrador 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 de la  de su documento HTML:

… Y los scripts de JS antes del cierre. etiqueta:

Ahora, estamos listos para profundizar en el plugin!

Creación de secciones de página completa

Primero, tenemos que especificar las secciones de nuestro sitio. Para ello, asignamos la sección asigne clase a los elementos de destino y envuélvalos dentro de un contenedor que tenga un identificador único. Más adelante, este identificador se utilizará para inicializar una instancia de fullPage.

Por defecto, el complemento considera que la primera sección es la activa. Pero, si queremos, podemos cambiar ese comportamiento agregando el activo clase a la sección deseada. 

Aquí está la estructura HTML requerida para nuestro ejemplo:

 
 
fullPage.js
 
Esta es la primera seccion
 
 
Salta a la última diapositiva
  
 
  
 
  
 
  
 
  
 

Observe que todas las secciones comparten un nombre de clase común (es decir,. desplazamiento vertical) que hemos elegido para ser diferente al predefinido (es decir,. sección). Siendo ese el caso, necesitamos informar al complemento sobre este cambio durante el proceso de inicialización.

Creación de diapositivas horizontales

Cada una de estas secciones apiladas verticalmente puede ser opcionalmente un control deslizante horizontal con una o más diapositivas. Para identificar las diapositivas, aplicamos la diapositivas Clasifique los elementos de destino y anídelos 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. Examinaremos este comportamiento lo suficientemente pronto!   

De vuelta a nuestro ejemplo, el fragmento de código a continuación muestra cómo configuramos dos diapositivas dentro de nuestra quinta sección:

 
 
fullPage.js
 
Esta es la quinta sección y contiene la primera diapositiva.
 
 
 
fullPage.js
 
Esta es la segunda diapositiva.
 
Gracias!
 
 

Nuevamente, como puede ver, le hemos dado a nuestras diapositivas un nombre de clase personalizado (es decir,. desplazamiento horizontal).

Controlando 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 el secciónColor Propiedad que nos da una manera fácil de definir el CSS. color de fondo propiedad para cada sección.

Además, podemos establecer 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 podríamos lograrlo:

sección: nth-of-type (2) background: url ('https://unsplash.it/1910/1221?image=626') centro / cubierta sin repetición; 

Personalizando las opciones de navegación

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

En nuestro proyecto, queremos añadir navegación adicional en forma de puntos. Además, elegimos ocultar las flechas izquierda y derecha que normalmente aparecen en el control deslizante. Entonces, después de habilitar la navegación de puntos, podemos cambiar su apariencia sobrescribiendo los estilos predeterminados. Aquí están las nuevas reglas:

# fp-nav ul li a span, .fp-slidesNav ul li a span background: white; ancho: 8px; altura: 8px; margen: -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 ancho : 16px; altura: 16px; margen: -8px 0 0 -8px; fondo: transparente; tamaño de caja: caja de borde; borde: 1px sólido # 24221F; 

Y a continuación se muestra una captura de pantalla que muestra los cambios que hemos realizado:

Predeterminado, vs. estilos personalizados

Tenga en cuenta que incluimos las reglas anteriores en nuestra hoja de estilo personalizada, para evitar 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 nos desplazamos por las diferentes secciones. Para ello, utilizamos el anclajes parámetro. Más específicamente, este parámetro es una matriz 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):

anclas: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection']

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

De la misma manera, el complemento también modifica la URL mientras nos desplazamos por las diapositivas. En este punto, sin embargo, debemos 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 la #fifthSection enlace de anclaje. Cargar la segunda diapositiva de la misma sección activará una URL que termina en # quinta sección / 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 agregando el anclaje de datos atribúyalos a ellos con los nombres de anclaje deseados (que también deberían ser únicos), al igual que en el siguiente ejemplo:

Nota: Para ver cómo cambian las URL a medida que se desplaza, consulte la Vista de depuración de nuestra demostración.

Vinculación de menús a secciones y diapositivas

Para comprender 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 aparece:

Y el HTML:

 
 Tu logo 
      

Mientras se active el icono del menú de hamburguesas, aparecerá la superposición del menú principal:

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

Entonces, para que FullPage sepa sobre el menú, debemos registrarlo usando el menú propiedad de configuración. Luego debemos vincular los elementos del menú a las secciones relevantes. Para ello, añadimos la datos-menuanchor atribuir a nuestros artículos con los enlaces respectivos como los valores. Mientras esos valores coincidan, el complemento agrega la activo clase (como nos desplazamos) para el elemento de menú correspondiente. 

Tenga en cuenta que el complemento aún no añade la activo Clase a las diapositivas. Para solucionar este problema, podemos usar jQuery (mejor solución) o CSS. En nuestro ejemplo, resolvemos este problema agregando la siguiente regla de CSS:

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

Vea el resultado a continuación:

En realidad, no agregamos el activo clase a la segunda diapositiva. Aprovechando los diferentes cuerpo clases que el complemento agrega a cada sección y diapositiva, simplemente le damos a este elemento la estilos del activo clase.

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

Disparando devoluciones de llamada para las secciones

los después de la carga La devolución de llamada se activa una vez que se carga una sección y el De vacaciones devolución de llamada una vez que un usuario lo deja.

En nuestro proyecto, ocultamos la navegación de puntos verticales cuando se carga la quinta sección:

Sección 4, luego Sección 5 sin puntos

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 (); 

Disparando devoluciones de llamada para diapositivas

los afterSlideLoad La devolución de llamada se activa cuando se carga una diapositiva y la onSlideLeave devolución de llamada cuando el usuario lo 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, inhabilitamos la posibilidad de desplazarse hacia arriba. Además, cambiamos el color de fondo propiedad de esta diapositiva, así como la apariencia de los elementos que le pertenecen..

Parte del código que utilizamos 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', 'blanco'); $ (this) .find ('h3'). css ('color', 'blanco'); $ (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'); 

Inicializando el Plugin

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 el fragmento de código relevante a continuación:

$ ('# fullpage'). fullpage (sectionSelector: '.vertical-scrolling', slideSelector: '.horizontal-scrolling', controlArrows: false // más opciones aquí);

Conclusión

En este tutorial, disfrutamos de un recorrido rápido del complemento fullPage.js jQuery y aprendimos cómo crear un sitio de desplazamiento de página completa con capacidad de 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 capacidad de mantenimiento puede ser difícil, especialmente para los 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, le sugiero los siguientes desafíos:

• Incorpore la excelente biblioteca animate.css en el proyecto e intente crear animaciones basadas en desplazamiento.
• Usa tu conocimiento de jQuery para habilitar el activo clase a la segunda diapositiva (ver Enlace de menú a secciones y diapositivas sección).

Finalmente, si tiene alguna experiencia con sitios de una página, no dude en compartir sus ideas con nosotros en los comentarios a continuación.!