Leitfaden / Artikel

Wie Sie fullPage JS zu Ihrer Webflow-Website hinzufügen

Otto Normalverbraucher
Januar 28, 2021
Wie Sie fullPage JS zu Ihrer Webflow-Website hinzufügen

Bevor wir anfangen

Hallo, wir sind eine Agentur für digitales Marketing in BournemouthIN BOURNEMOUTH, UK. Wir haben diesen Leitfaden erstellt aus diesen Beitrag innerhalb des Webflow-Forums, mit Dank an andere Mitwirkende: @ToreSBentsen, @Nir, @Siton_Systems, @Cjh

Bitte beachten Sie: Wir haben keine Verbindung zu fullPage JS und raten Ihnen, sich über die Lizenzierungsanforderungen zu informieren, da Sie je nach beabsichtigter Verwendung möglicherweise eine Lizenz erwerben müssen. Alle Details finden Sie unter hier.

So integrieren Sie fullPage JS auf einer Webflow-Website:

Bevor wir untersuchen, wie Sie Scroll-Interaktionen zulassen können, müssen Sie fullPage JS auf Ihrer Webflow-Website einrichten. Kopieren Sie den untenstehenden Codeausschnitt und fügen Sie ihn in Ihre Seiteneinstellungen unter Benutzerdefinierter Code ein.

Wenn Sie bereits fullPage JS auf Ihrer Website hinzugefügt haben, hier klicken um herauszufinden, wie man es mit Animationen zum Laufen bringt.

Trinkgeld: Um zu vermeiden, dass fullPage JS auf Ihrer gesamten Website geladen wird, fügen Sie diesen Code nur in das entsprechende Feld für den benutzerdefinierten Code der Seiteneinstellung ein.

Schritt 1:
Kopieren Sie diesen CSS-Code und fügen Sie ihn in das Page-Head-Tag Ihrer Seite ein:

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

Schritt 3:
Fügen Sie die komplette Seiten-ID und Abschnitte zu Ihrer Seite hinzu:

Sie müssen eine bestimmte ID für das übergeordnete DIV und Klassennamen für untergeordnete Elemente verwenden, damit der obige Code mit Ihrem individuellen Design verknüpft wird. Hier ist die Struktur und Klassenbenennung, die Sie benötigen...

  • Fügen Sie ein übergeordnetes Div hinzu und geben Sie ihm eine ID von Ganzseitig
  • Fügen Sie Ihre Abschnitte innerhalb dieses übergeordneten Divs hinzu und stellen Sie sicher, dass sie den Klassennamen Abschnitt
  • Sie können noch weitere Anpassungen vornehmen, z. B. für In-Page-Linking usw, hier klicken für weitere Informationen

Zuweisen der Fullpage-ID zum fp-wrapper parent div

Aufbau der Sektion

Zusätzliche Ressourcen für das Hinzufügen der Grundlagen von fullPage JS zu Ihrer Website.

Diese Ersteinrichtung ist als Zusammenfassung der Integration von fullPage JS gedacht. Sie finden jede Menge weitere Unterstützung und Dokumentation auf der Webflow-Forumsowie diesen Video-Walk-Through von PixelGeek 😃.

Aktualisierung des Standardcodes, um Scroll-Interaktionen zu ermöglichen

Sobald Sie die obigen Schritte abgeschlossen haben, wird FullPage JS auf Ihrer Website funktionieren. Sie werden jedoch nicht in der Lage sein, Webflow-Scroll-Interaktionen zu integrieren, da FullPage JS das Standard-Scrolling-Erlebnis hackt, das normalerweise Auslöser senden würde, um Ihre tollen Interaktionen zu initiieren!

Schritt 1: Scrollbalken wieder
einbauen

Um dies zu überwinden, müssen wir etwas zusätzlichen Code einfügen, um die Bildlaufleiste des Browsers wieder einzuschalten und die Bildlaufinteraktionen normal funktionieren zu lassen. Das ist der Bereich des Codes, den wir aktualisieren werden:

Aktualisieren Sie den Code (siehe oben) in der vor


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

Trinkgeld: Sie können testen, dass dies funktioniert hat, indem Sie Ihre Website veröffentlichen und eine Vorschau anzeigen. Wenn es funktioniert hat, ist der Scrollbalken wieder sichtbar.

Schritt 2 (optional):
Ausblenden der Bildlaufleiste in Chrom

Dieser Schritt ist optional und hat keinen Einfluss auf die Scroll-Interaktionen, aber wir finden, dass er aus der Design-Perspektive ziemlich gut aussieht, also hier ist, wie man die Bildlaufleiste auf Chrome ausblendet.

Fügen Sie den folgenden Code innerhalb des Head-Tags Ihrer Seite hinzu und stellen Sie sicher, dass Sie eine Klasse auf Ihrem Body-Element gesetzt haben. (Möglicherweise müssen Sie .body unten aktualisieren, um den Klassennamen, den Sie Ihrem Body-Element gegeben haben, anzupassen).



.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;
}

Anmerkung: Dadurch wird nur die Bildlaufleiste auf Chrome für Desktop und Handy ausgeblendet.

Hinzufügen von Webflow-Scroll-Interaktionen:

Jetzt können Sie Ihre Scroll-Interaktionen, die durch in die Ansicht scrollende Abschnitte ausgelöst werden, implementieren. Schauen Sie sich unser klonbares Projekt an, wenn Sie auf der Suche nach Inspiration sind oder eine visuelle Darstellung wünschen, wie dies auf Ihrer Seite aussehen würde.

Wir empfehlen, dass Sie eine Vorschau Ihrer Animationen auf der Live-Website anzeigen, da sie möglicherweise ein wenig mehr als normal angepasst werden müssen, um mit der FullPage JS-Scroll-Entspannung reibungslos zu arbeiten. Hier sind ein paar extra Tipps, die Ihnen helfen könnten, fullPage JS Interaktionen zu knacken.

Versuchen Sie, Ihre Scroll-Animationen um 50% zu verschieben, dies gibt dem Abschnitt etwas mehr Zeit, um in die Ansicht zu scrollen.
Ziehen Sie in Erwägung, eine leichte Verzögerung am Anfang Ihrer Animationen hinzuzufügen, auch dies gibt nur ein wenig mehr Zeit für die Fixierung des Abschnitts in der Ansicht. Allerdings nicht zu lange, denn Sie wollen nicht, dass die Benutzer auf die Anzeige von Text und Bildern warten müssen!

Otto Normalverbraucher
Januar 28, 2021

Otto Normalverbraucher

Autorenprofil ansehen

Empfangen Sie Webflow-Ressourcen direkt in Ihre Mailbox.

Melden Sie sich an, um wöchentliche Einblicke und Inspirationen in Ihrem Posteingang zu erhalten.

ANDERE ANLEITUNGEN &AMP; LEKTIONEN

Steigern Sie Ihre Webflow-Site weiter.