Freebies
Discover our latest free template, claim it today. Learn More

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

Publicado por
John Marsh
Cómo añadir fullPage JS a su sitio web de flujo de trabajo

Antes de empezar

Hola, somos un agencia de marketing digital en Bournemouth...EN EL REINO UNIDO. Hemos creado esta guía a partir de esta entrada 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 la licencia ya que puede que necesite adquirir una licencia dependiendo del uso que desee hacer. Los detalles completos se pueden encontrar 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>
/*!
* 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<=5 Android<=3 */
  -moz-box-sizing: border-box; /* <=28 */
  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<=6 Android<=4.3 */
  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;
}

</style>


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



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

Necesitas usar un ID específico en el DIV del padre y los nombres de las clases en los elementos del niño para que el código de arriba se vincule con tu diseño individual. Aquí está la estructura y el nombre de la clase que necesitarás...

  • 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 personalización que puede hacer, para los enlaces de páginas, etc, hacer clic aquí para obtener 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 está pensada como un resumen de la integración de FullPage JS. Encontrará mucho más apoyo y documentación en la página web de Foro de WebflowAdemás de este video de paseo por PixelGeek 😃

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

Una vez que complete la página completa anterior, JS estará trabajando 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 increíbles 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:

Actualice el código (mostrado arriba) en el anterior


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).

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.
Considera la posibilidad de añadir un ligero retraso al principio de tus 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 tiempo, no querrás que los usuarios estén esperando a que el texto y las imágenes se muestren!

OTHER GUIDES & LESSONS

Boost your webflow site further.