Guide / Article

Comment ajouter le JS pleine page à votre site webflow

John Marsh
September 30, 2020
Comment ajouter le JS pleine page à votre site webflow

Avant de commencer

Salut, nous sommes un agence de marketing digital à BournemouthAU ROYAUME-UNI. Nous avons créé ce guide à partir ce poste dans le forum Webflow, le crédit aux autres contributeurs : @ToreSBentsen, @Nir, @Siton_Systems, @Cjh

Veuillez noter : Nous n'avons aucune affiliation avec fullPage JS et nous vous conseillons de vérifier les conditions de licence car vous pourriez avoir besoin d'acheter une licence en fonction de l'utilisation prévue. Tous les détails sont disponibles ici.

Comment intégrer fullPage JS sur un site Webflow :

Avant d'explorer la possibilité d'autoriser les interactions de défilement, vous devez configurer le JS pleine page sur votre site Web Webflow. Copiez et collez le code ci-dessous et collez-le dans les paramètres de votre page sous le code personnalisé.

Si vous avez déjà ajouté FullPage JS sur votre site Web, cliquez ici pour savoir comment le faire fonctionner avec des animations.

Tip : Pour éviter le chargement de JS pleine page sur l'ensemble de votre site Web, collez uniquement ce code dans le champ de code personnalisé de mise en page approprié.

Etape 1 :
Copiez et collez ce code CSS à l'intérieur de la balise head de votre page :

<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:



Étape 3 :
Ajoutez l'ID de la page complète et des sections à votre page :

Vous devez utiliser un identifiant spécifique sur le DIV parent et des noms de classe sur les éléments enfants afin que le code ci-dessus soit lié à votre design individuel. Voici la structure et le nom des classes dont vous aurez besoin...

  • Ajoutez un parent div et donnez-lui un ID de page complète
  • Ajoutez vos sections dans ce div parent et assurez-vous qu'elles ont un nom de classe section
  • Il y a plus de personnalisation que vous pouvez faire, pour les liens dans la page etc, cliquez ici pour plus d'informations

Assignation d'un ID de page complète au div parent fp-wrapper

Structure de la section

Des ressources supplémentaires pour ajouter les bases de FullPage JS à votre site.

Cette configuration initiale se veut un résumé de l'intégration de FullPage JS. Vous trouverez de nombreux autres supports et de la documentation sur le Forum Webflowplus cette promenade vidéo par PixelGeek 😃

Mise à jour du code standard pour permettre les interactions de défilement

Une fois que vous aurez complété la page complète ci-dessus, JS travaillera sur votre site. Cependant, vous ne pourrez pas intégrer les interactions de défilement du Webflow à cause du piratage de l'expérience de défilement standard de FullPage JS qui enverrait normalement des déclencheurs pour initier vos interactions géniales !

Étape 1 :
Rétablissement de la barre de défilement

Pour surmonter cela, nous devons insérer un code supplémentaire pour réactiver la barre de défilement du navigateur et permettre aux interactions de défilement de fonctionner normalement. C'est la zone de code que nous allons mettre à jour :

Mettez à jour le code (indiqué ci-dessus) dans le champ


Tip : Vous pouvez tester que cela fonctionne en publiant et en prévisualisant votre site Web. Si cela a fonctionné, la barre de défilement sera à nouveau visible.

Etape 2 (optionnelle) :
Masquer la barre de défilement dans Chrome

Cette étape est facultative et n'aura pas d'impact sur les interactions de défilement, mais nous pensons qu'elle est plutôt bien du point de vue de la conception, donc voici comment cacher la barre de défilement sur Chrome.

Ajoutez le code suivant à l'intérieur de la balise head de votre page, en vous assurant d'avoir une classe définie sur votre élément Body. (Vous devrez peut-être mettre à jour .body ci-dessous pour qu'il corresponde au nom de classe que vous avez donné à votre élément Body).

Note : Cela ne fera que masquer la barre de défilement sur Chrome pour le bureau et le mobile.

Ajout d'interactions de défilement Webflow :

Vous êtes maintenant prêt à implémenter vos interactions de défilement déclenchées par les sections défilant dans la vue. Consultez notre projet clonable si vous cherchez de l'inspiration, ou si vous voulez une représentation visuelle de ce que cela donnerait sur votre site.

Nous vous recommandons de prévisualiser vos animations sur le site en direct car elles peuvent nécessiter un peu plus de réglages que la normale pour fonctionner sans problème avec l'assouplissement du défilement JS pleine page. Voici quelques conseils supplémentaires qui pourraient vous aider à résoudre les interactions JS pleine page.

Essayez d'ajouter un décalage de 50% à vos animations de défilement, cela donne à la section un peu plus de temps pour défiler dans la vue.
Pensez à ajouter un léger délai au début de vos animations, encore une fois cela donne juste un peu plus de temps pour que la section se fixe en vue. Mais pas trop longtemps, vous ne voulez pas que les utilisateurs attendent que le texte et les images s'affichent !

John Marsh
September 30, 2020

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.