Guía / Artículo

Cómo añadir fullPage JS a su sitio web de flujo de trabajo

John Marsh
28 de enero de 2021
Cómo añadir fullPage JS a su sitio web de flujo de trabajo

Antes de empezar

Hola, somos una agencia de marketing digital en BournemouthDE REINO UNIDO. Hemos creado esta guía desde este post dentro del foro de Webflow, crédito a otros contribuyentes: @ToreSBentsen, @Nir, @Siton_Systems, @Cjh

Por favor, tenga en cuenta: No tenemos ninguna afiliación con fullPage JS y le aconsejamos que compruebe los requisitos de licencia, ya que puede necesitar comprar una licencia dependiendo del uso que vaya a hacer. Puede encontrar todos los detalles en aquí.

Cómo integrar fullPage JS en un sitio de flujo web:

Antes de explorar cómo permitir las interacciones de desplazamiento, deberá configurar fullPage JS en su sitio web de flujo web. Copie y pegue el siguiente fragmento de código y péguelo en la configuración de su página con el código personalizado.

Si ya ha añadido fullPage JS a su sitio web, hacer clic aquí para averiguar cómo hacer que funcione con las animaciones.

Consejo: Para evitar que fullPage JS se cargue en todo su sitio web, sólo tiene que pegar este código en el campo de código personalizado de configuración de página correspondiente.

Paso 1:
Copie y pegue este código CSS dentro de la etiqueta del encabezado de su página:

<style></style>
/*!
* fullPage 2.9.7
* https://github.com/alvarotrigo/fullPage.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo

*/
html.fp-enabled,
.fp-enabled body {
  margin: 0;
  padding: 0;
  overflow:hidden;

  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.fp-section {
  position: relative;
  -webkit-box-sizing: border-box; /* Safari
  -moz-box-sizing: border-box; /*
  box-sizing: border-box;
}

.fp-slide {
  float: left;
}

.fp-slide, .fp-slidesContainer {
  height: 100%;
  display: block;
}

.fp-slides {
  z-index:1;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.3s ease-out; /* Safari
  transition: all 0.3s ease-out;
}

.fp-section.fp-table, .fp-slide.fp-table {
  display: table;
  table-layout:fixed;
  width: 100%;
}

.fp-tableCell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.fp-slidesContainer {
  float: left;
  position: relative;
}

.fp-controlArrow {
  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit (konqueror) browsers */
  -ms-user-select: none; /* IE10+ */
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: 0;
  height: 0;
  border-style: solid;
  margin-top: -38px;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.fp-controlArrow.fp-prev {
  left: 15px;
  width: 0;
  border-width: 38.5px 34px 38.5px 0;
  border-color: transparent #fff transparent transparent;
}

.fp-controlArrow.fp-next {
  right: 15px;
  border-width: 38.5px 0 38.5px 34px;
  border-color: transparent transparent transparent #fff;
}

.fp-scrollable {
  overflow: hidden;
  position: relative;
}

.fp-scroller{
  overflow: hidden;
}

.iScrollIndicator{
  border: 0 !important;
}

.fp-notransition {
  -webkit-transition: none !important;
  transition: none !important;
}

#fp-nav {
  position: fixed;
  z-index: 100;
  margin-top: -32px;
  top: 50%;
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
}

#fp-nav.right {
  right: 17px;
}

#fp-nav.left {
  left: 17px;
}

.fp-slidesNav{
  position: absolute;
  z-index: 4;
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  left: 0 !important;
  right: 0;
  margin: 0 auto !important;
}

.fp-slidesNav.bottom {
  bottom: 17px;
}

.fp-slidesNav.top {
  top: 17px;
}

#fp-nav ul,
.fp-slidesNav ul {
margin: 0;
padding: 0;
}

#fp-nav ul li,
.fp-slidesNav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position:relative;
}

.fp-slidesNav ul li {
  display: inline-block;
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#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{
  height: 12px;
  width: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 100%;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: #333;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
  width: 10px;
  height: 10px;
  margin: -5px 0px 0px -5px;
}

#fp-nav ul li .fp-tooltip {
  position: absolute;
  top: -2px;
  color: #fff;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  display: block;
  opacity: 0;
  width: 0;
  cursor: pointer;
}

#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  width: auto;
  opacity: 1;
}

#fp-nav ul li .fp-tooltip.right {
  right: 20px;
}

#fp-nav ul li .fp-tooltip.left {
  left: 20px;
}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
  height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
  height: auto !important;
}




Step 2:
Add this code before the closing body tag of your page:




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

Paso 3:
Añada el ID de página completa y secciones a su página:

Es necesario utilizar un ID específico en el DIV padre y nombres de clase en los elementos hijos para que el código anterior se vincule con su diseño individual. Aquí está la estructura y el nombre de la clase que usted necesita ...

  • Añadir un div padre y darle un ID de Página completa
  • Añade tus secciones dentro de este div padre y asegúrate de que tienen un nombre de clase de sección
  • Hay más personalizaciones que se pueden hacer, para los enlaces dentro de la página, etc, haga clic aquí para más información

Asignación de ID de página completa a la división matriz fp-wrapper

Estructura de la sección

Recursos adicionales para añadir los aspectos básicos de fullPage JS a su sitio.

Esta configuración inicial pretende ser un resumen de la integración de fullPage JS. Encontrará mucho más apoyo y documentación en la página web Foro de Webflowademás de este video de PixelGeek 😃

Actualización del código estándar para permitir interacciones de desplazamiento

Una vez que complete lo anterior, fullPage JS estará funcionando en su sitio. Sin embargo, no podrá integrar las interacciones de desplazamiento de Webflow debido a que fullPage JS hackea la experiencia de desplazamiento estándar que normalmente enviaría disparadores para iniciar sus impresionantes interacciones.

Paso 1:
Reinstalar la barra de desplazamiento

Para superar esto, necesitamos insertar algún código adicional para volver a activar la barra de desplazamiento del navegador y permitir que las interacciones de desplazamiento funcionen con normalidad. Esta es el área de código que vamos a actualizar:

Actualizarel código (mostrado arriba) en el anterior


$(document).ready(function() {
  $('#fullpage').fullpage({
     scrollBar: true,
     normalScrollElements: '#scrollable',
  });
});

Consejo: Puede comprobar que esto funcionó publicando y previsualizando su sitio web. Si ha funcionado, la barra de desplazamiento será visible de nuevo.

Paso 2 (opcional):
Esconder la barra de desplazamiento en Chrome

Este paso es opcional y no afectará a las interacciones de desplazamiento, pero creemos que tiene un aspecto muy bueno desde el punto de vista del diseño, por lo que a continuación se explica cómo ocultar la barra de desplazamiento en Chrome.

Añade el siguiente código dentro de la etiqueta del encabezado de tu página, asegurándote de que tienes un conjunto de clases en tu elemento Body. (Es posible que necesite actualizar .body a continuación para que coincida con el nombre de la clase que ha dado a su elemento Body).



.body {
/* These rules create an artificially confined space, so we get a scrollbar that we can hide. They are not directly involved in hiding the scrollbar. */

border: none;
padding: .5em;
white-space: pre-wrap;
height: 5em;
overflow-y: scroll;
}

.body::-webkit-scrollbar {
/* This is the magic bit for WebKit */
display: none;
}

Nota: Esto sólo ocultará la barra de desplazamiento en Chrome para el escritorio y el móvil.

Añadir interacciones de desplazamiento de flujo de Web:

Ahora está listo para implementar sus interacciones de desplazamiento activadas por las secciones que se desplazan a la vista. Echa un vistazo a nuestro proyecto clonable si estás buscando algo de inspiración, o quieres una representación visual de cómo se vería esto en tu sitio.

Le recomendamos que previsualice sus animaciones en el sitio en vivo, ya que pueden necesitar un poco más de ajustes de lo normal para que funcionen sin problemas con la facilidad de desplazamiento de JS de página completa. Aquí hay un par de consejos adicionales que pueden ayudarle a romper las interacciones de FullPage JS.

Intenta añadir un 50% de desplazamiento a tus animaciones de desplazamiento, esto le da a la sección un poco más de tiempo para desplazarse a la vista.
Considere la posibilidad de añadir un ligero retraso al principio de sus animaciones, de nuevo esto sólo da un poco más de tiempo para que la sección se fije en la vista. Pero no demasiado, ya que no querrá que los usuarios esperen a que el texto y las imágenes se muestren.

John Marsh
28 de enero de 2021

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.