Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Spirit Day

Cómo crear una presentación animada para el Día del Espíritu con fullPage.js

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

El 18 de octubre de 2018 es el Día del Espíritu, algo que reconocemos cada año en Tuts+, y en este día nos pronunciamos en contra del acoso al colectivo LGBTQ, especialmente entre los jóvenes LGBTQ.

En este tutorial aprenderás a crear una presentación animada para el Día del Espíritu con fullPage v3.

Esto es lo que vamos a construir:

Nota: Es posible que recuerdes otro tutorial que escribí sobre fullPage hace algún tiempo. Ese tutorial usa fullPage v2, pero como muchas personas todavía usan v2 en sus proyectos, no hay necesidad de revisar ese tutorial en los archivos.


¿Qué es fullPage.js v3?

fullPage.js es una biblioteca JavaScript muy popular creada por Alvaro Trigo. Nos permite crear hermosos sitios web y aplicaciones estilo "one page" con desplazamientos.

Aunque se considera que es una biblioteca JavaScript sin dependencias, también puede utilizarse como un plugin de jQuery, del mismo modo que su versión anterior (v2).

httpsalvarotrigocomfullPagehttpsalvarotrigocomfullPagehttpsalvarotrigocomfullPage
alvarotrigo.com/fullPage

A diferencia de v2, esta nueva versión es gratuita bajo ciertas condiciones. Se requiere una licencia no sólo en proyectos comerciales, sino también en cualquier proyecto no comercial que no sea de código abierto y compatible con la licencia GPLv3.

Tiene un excelente soporte para navegadores y viene con detallada documentación. Puedes encontrar un excelente listado de ejemplos de trabajo en esta página.

Más allá de las características principales, proporciona algunas características de pago adicionales conocidas como extensiones.

Debido a su popularidad, también se ha desarrollado un tema de WordPress junto con contenedores o "wrappers" para diferentes frameworks JS (por ejemplo, Vue.js wrapper).

Introducción a fullPage.js v3

Para empezar a usar fullPage, comienza descargando e instalando los siguientes archivos en tu proyecto:

  • fullpage.css o su versión minificada
  • fullpage.js o su versión minificada

Opcionalmente, es posible que desees importar easings.min.js, así como scrolloverflow.min.js.

Puedes tomar una copia de los archivos fullPage correspondientes visitando su repositorio en github, utilizando un administrador de paquetes (por ejemplo, npm), o cargando los recursos necesarios a través de una red CDN (por ejemplo, cdnjs). Para este tutorial, elegiré la última opción y extraeré todo en CodePen.

Para los fines de este tutorial, más allá de los archivos fullPage, también he incorporado Babel.

Con esto en mente, si te fijas en la pestaña a Settings de nuestro pen de demostración, verás que he incluido un archivo CSS externo y dos archivos JavaScript externos.

The required CSS filesThe required CSS filesThe required CSS files
Los ajustes CSS necesarios
The required JS filesThe required JS filesThe required JS files
Los ajustes CSS JavaScript necesarios

1. El HTML

Para empezar, definiremos un elemento contenedor que contiene todas las secciones. Cada sección recibe la clase section requerida. Esta clase se puede personalizar durante el proceso de inicialización de la biblioteca a través de la opción de configuración sectionSelector. Todos los elementos de sección están contenidos dentro de un elemento .container.

Aquí está la estructura HTML básica:

2. El CSS

Con el HTML en su lugar, echemos un vistazo a los estilos CSS que aplicaremos a nuestra página. Para simplificar, solo explicaremos el más crucial de los estilos disponibles.

En primer lugar, definimos dos propiedades personalizadas utilizando variables CSS:

A continuación, especificaremos los estilos para nuestras secciones:

Por último, estableceremos las reglas responsables de la animación de los elementos .box (estos aparecen en las secciones segunda, tercera, cuarta y quinta):

Personalizar la apariencia de la navegación

Sería bueno personalizar la apariencia de la navegación de puntos de acuerdo a nuestras necesidades.

La parte izquierda de la siguiente captura de pantalla muestra los estilos predeterminados, mientras que la parte derecha muestra los estilos deseados:

Default vs custom stylesDefault vs custom stylesDefault vs custom styles

Además, queremos una cosa más. A medida que navegamos a la última sección, como vamos a utilizar un fondo de imagen pálido, el color de la navegación de puntos debe cambiar a negro, de la siguiente manera:

 The appearance of the dots navigation in the last section The appearance of the dots navigation in the last section The appearance of the dots navigation in the last section

Hay dos maneras de realizar un seguimiento de cuándo es visible la última sección.

En primer lugar, a través de CSS. La biblioteca anexa una clase fp-viewing-SECTION-SLIDE al elemento body en función de cuál sea la sección/diapositiva activa.

Así que como tenemos seis secciones, cuando salgamos de la quinta sección y visitemos la última, la clase del body (a partir de fp-viewing-0) será la siguiente:

The default class appended to the body when the last section is visibleThe default class appended to the body when the last section is visibleThe default class appended to the body when the last section is visible

Este método no es perfectamente flexible. Por ejemplo, podríamos añadir una regla que cambie el color de los puntos cuando la sexta y última sección se vuelva visible:

Pero entonces, si añadimos una séptima sección, tendríamos que modificar la regla antes mencionada a esta:

El segundo método es a través de JavaScript (como cubriremos en la siguiente sección) y nos dará más flexibilidad. A través de nuestra propia instrucción se añadirá una clase fp-last personalizada a body cada vez que naveguemos a la última sección.

The custom class appended to the body when the last section is visibleThe custom class appended to the body when the last section is visibleThe custom class appended to the body when the last section is visible

Trabajando bajo los supuestos discutidos anteriormente, echemos un vistazo a los estilos necesarios para personalizar la apariencia de la navegación de puntos:

Imagen con blend modes de CSS y flexbox centering

Nuestro último fotograma es una imagen que he descargado de Envato Elements. Es una imagen a todo color, pero gracias a alguno de CSS podemos aplicar un modo de fusión o "blend mode" en el navegador que mezcla la imagen con un fondo púrpura:

El modo de fusión (luminosidad) se aplica así:

Para una mejor comprensión sobre cómo funcionan los modos de fusión CSS, echa un vistazo a estos tutoriales:

3. El JavaScript

En este punto estamos listos para dirigir nuestra atención a un poco de JavaScript.

Inicializar fullPage 3

Como primer paso, inicializaremos fullPage con las siguientes personalizaciones:

  • Establecemos la clave de licencia como OPEN-SOURCE-GPLV3-LICENSE. Si planeas usar fullPage en un proyecto comercial, tendrás que cambiar este valor por tu propia clave de licencia.
  • De forma predeterminada, la biblioteca no muestra la navegación de puntos. En nuestro caso, estará visible y verticalmente posicionada a la izquierda de la página.
  • Usamos JavaScript en lugar de transformaciones CSS3 para desplazarnos dentro de las secciones estableciendo css3: false. Hacemos esto para evitar que se dé un conflicto en algunos navegadores entre los elementos transformados y sus elementos secundarios de posición fija. Nuestra última sección tiene una imagen fija de fondo.
  • Aparecerá una barra de desplazamiento en caso de que el contenido de la sección sea mayor que su altura. Por este motivo, establecemos scrollOverflow: true y cargamos la biblioteca scrolloverflow.min.js.

Trabajar con eventos de sección

En nuestro proyecto, deben suceder las siguientes cosas:

  1. Cada vez que naveguemos a una sección, comprobamos si esa sección tiene un elemento .box. Si ese es el caso, le asignamos la clase is-animated.
  2. Cada vez que salimos de una sección, comprobamos si esa sección tiene un elemento .is-box.is-animated. En este escenario, quitamos la clase is-animated de ella.
  3. Cada vez que salimos de una sección, comprobamos cuál es la siguiente sección de destino. Si esta es la última sección, añadimos la clase fp-last al elemento body. De lo contrario, nos aseguramos de que esta clase sea eliminada de ella.

Para satisfacer los requisitos anteriores, aprovechamos los eventos afterLoad y onLeave.

El evento afterLoad se desencadena una vez que se ha cargado una sección, una vez finalizado el desplazamiento.

El evento onLeave se desencadena una vez que el usuario abandona una sección, en la transición a la nueva sección.

Aquí está la inicialización resultante con los eventos antes mencionados:

Conclusión

¡Ya hemos terminado! En este tutorial cubrimos los conceptos básicos de fullPage 3. Hay mucho más que podríamos discutir y espero que la demo te haya proporcionado suficiente inspiración para construir algo atractivo con esta increíble biblioteca.

Si deseas ver más temas avanzados con fullPage (estoy planeando algo basado en WordPress, fullPage, y AJAX) si te interesa, házmelo saber a través de un comentario a continuación. Y no te olvides de echar un vistazo a https://www.glaad.org/spiritday para mostrar hoy tu apoyo. ¡Únete al movimiento púrpura!

Lectura adicional

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.