Heutzutage werden immer mehr Websites auf der Grundlage eines Einzelseitenansatzes (so genannten Einzelseiten- oder Einseiten-Websites) entworfen. In diesem Artikel erfahren Sie, wie Sie ein solches Erlebnis für eine Demo-Site erstellen, indem Sie fullPage.js nutzen. 

Schauen Sie sich an, was wir auf dieser Codepen-Demo aufbauen werden. Darüber hinaus finden Sie alle Dateien für diese Demo in diesem Github-Repository.

Was ist fullPage.js??

fullPage.js ist ein auf jQuery basierendes Plugin, mit dem wir einseitige Scrolling-Websites erstellen können. Der Webentwickler Alvaro Trigo wurde, wie wir in den nächsten Abschnitten sehen werden, mit verschiedenen Anpassungsoptionen ausgestattet. 

Darüber hinaus bietet dieses Plugin eine übersichtliche Dokumentation mit vielen praktischen Beispielen. 

Zum Glück funktioniert es nicht nur in allen modernen Browsern, sondern auch in älteren Beispielen wie IE 8 und Opera 12.  

Zum Schluss möchten Sie vielleicht noch die Wordpress-Version davon betrachten.

Erste Schritte mit fullPage.js

Um mit fullPage zu beginnen, müssen Sie die folgenden Dateien in Ihr Projekt herunterladen und installieren:

• Die jQuery-Bibliothek (≥1.6.0)
• Das jquery.fullPage.css CSS-Datei
  
• Das jquery.fullPage.js JS-Datei oder deren reduzierte Version (d. H. jquery.fullPage.min.js)
  

Sie können eine Kopie dieser Dateien abrufen, indem Sie das Github-Repo besuchen, einen Paketmanager verwenden (z. B. Bower) oder die erforderlichen Assets über ein CDN (z. B. cdnjs) laden. Für dieses Tutorial wählen wir die letzte Option.

Platzieren Sie einen Link zu der CSS-Datei im  Ihres HTML-Dokuments:

… Und die JS-Skripte vor dem Schließen Etikett:

Nun können wir tiefer in das Plugin eintauchen!

Erstellen von Ganzseitenabschnitten

Zuerst müssen wir die Bereiche unserer Website angeben. Dazu vergeben wir die Sektion Klasse zu den Zielelementen und wickeln Sie sie in einen Container ein, der eine eindeutige Kennung hat. Später wird diese Kennung verwendet, um eine Instanz von fullPage zu initialisieren.

Standardmäßig betrachtet das Plugin den ersten Abschnitt als aktiv. Aber wenn wir wollen, können wir dieses Verhalten ändern, indem Sie das hinzufügen aktiv Klasse zum gewünschten Abschnitt. 

Hier ist die erforderliche HTML-Struktur für unser Beispiel:

 
 
fullPage.js
 
Dies ist der erste Abschnitt
 
 
Springe in die letzte Folie
  
 
  
 
  
 
  
 
  
 

Beachten Sie, dass alle Abschnitte einen gemeinsamen Klassennamen haben (d. H. vertikales Scrollen) die wir uns von der vordefinierten (d. h. Sektion). Daher müssen wir das Plugin während des Initialisierungsprozesses über diese Änderung informieren.

Horizontale Folien erstellen

Jeder dieser vertikal gestapelten Abschnitte kann optional ein horizontaler Schieber mit einem oder mehreren Schlitten sein. Um die Folien zu identifizieren, wenden wir das an Folien Klasse zu den Zielelementen und verschachteln sie innerhalb des entsprechenden Abschnitts.

Außerdem muss erwähnt werden, dass die erste Folie technisch gesehen dem übergeordneten Abschnitt entspricht. Wir werden dieses Verhalten bald genug untersuchen!   

Zurück zu unserem Beispiel zeigt der folgende Code-Ausschnitt, wie wir in unserem fünften Abschnitt zwei Folien einrichten:

 
 
fullPage.js
 
Dies ist der fünfte Abschnitt, der die erste Folie enthält
 
 
 
fullPage.js
 
Dies ist die zweite Folie
 
Vielen Dank!
 
 

Wie Sie sehen, haben wir unseren Folien einen benutzerdefinierten Klassennamen gegeben (d. H. horizontales Scrollen).

Site-Darstellung steuern

Wir können das Erscheinungsbild unserer Sektionen und Folien kontrollieren, indem wir die verfügbaren Konfigurationsparameter nutzen. Einer dieser Parameter ist der AbschnittFarbe Diese Eigenschaft gibt uns eine einfache Möglichkeit, das CSS zu definieren Hintergrundfarbe Eigenschaft für jeden Abschnitt.

Darüber hinaus können wir unsere eigenen Stile festlegen, um die Seiten weiter anzupassen. Stellen Sie sich zum Beispiel vor, wir möchten ein vollständiges Hintergrundbild auf den zweiten Abschnitt anwenden. So können wir es schaffen:

Abschnitt: nth-of-type (2) background: url ('https://unsplash.it/1910/1221?image=626') no-repeat center / cover; 

Anpassen der Navigationsoptionen

Das Plugin bietet viele integrierte Optionen zum Durchlaufen von Abschnitten und Folien. Einige dieser Optionen sind standardmäßig aktiviert (z. B. Mausrad und Tastatur), während andere manuell über das Konfigurationsobjekt ausgelöst werden (z. B. Kreispunkte).. 

In unserem Projekt möchten wir eine zusätzliche Navigation in Form von Punkten hinzufügen. Außerdem verbergen wir die linken und rechten Pfeile, die normalerweise auf dem Schieberegler erscheinen. Nachdem Sie die Punktnavigation aktiviert haben, können Sie ihr Aussehen ändern, indem Sie die Standardstile überschreiben. Hier sind die neuen Regeln:

# fp-nav ul li a span, .fp-slidesNav ul li a span hintergrund: weiß; Breite: 8px; Höhe: 8px; Marge: -4px 0 0 -4px;  # fp-nav ul li a.aktive Spanne, .fp-slidesNav ul li a.aktive Spanne, # fp-nav ul li: Schwebeflug a.aktive Spanne, .fp-slidesNav ul li: Schwebeflug a.aktive Spanne width : 16px; Höhe: 16px; Marge: -8px 0 0 -8px; Hintergrund: transparent; Box-Dimensionierung: Border-Box; Grenze: 1px fest # 24221F; 

Und unten ist ein Screenshot, der die Änderungen zeigt, die wir vorgenommen haben:

Standardeinstellung im Vergleich zu benutzerdefinierten Stilen

Bitte beachten Sie, dass wir die oben genannten Regeln in unser benutzerdefiniertes Stylesheet aufnehmen, um Änderungen an der CSS-Datei des Plugins zu vermeiden.

Erstellen von Links zu Abschnitten und Folien

Mit fullPage.js können wir die URL unserer Website ändern, während wir durch die verschiedenen Abschnitte blättern. Dazu verwenden wir die Anker Parameter. Bei diesem Parameter handelt es sich insbesondere um ein Array, das die Anker-Links enthält, die in der URL für jeden Abschnitt angezeigt werden müssen. In unserem Beispiel geben wir beispielsweise folgende Anker-Links an (die eindeutig sein sollten):

Anker: ['firstSection', 'secondSection', 'ThirdSection', '4thSection', '5thSection']

Wenn wir den ersten Abschnitt besuchen, wird die URL der Site mit der #Erster Abschnitt Bezeichner am Ende, am Ende endet die URL in #secondSection und so weiter.

Auf dieselbe Weise ändert das Plugin auch die URL, während wir durch die Folien blättern. An dieser Stelle müssen wir uns jedoch daran erinnern, dass im Grunde die erste Folie (die den Index 0 hat) der zugehörige übergeordnete Abschnitt ist. In diesem Sinne endet die URL in unserem Projekt auf der ersten Folie des fünften Abschnitts mit der Endung #fifthSection Ankerlink. Beim Laden der zweiten Folie desselben Abschnitts wird eine URL ausgelöst, die in endet # fünfter Abschnitt / 1 denn die zweite Folie (die den Index 1 hat) ist eigentlich unsere "erste" Folie.

Es ist erwähnenswert, dass wir die Anker für unsere Objektträger ändern können, indem Sie die Datenanker Attribut mit den gewünschten Ankernamen (die auch eindeutig sein sollten), wie im folgenden Beispiel:

Hinweis: Um zu sehen, wie sich die URLs beim Scrollen ändern, sehen Sie sich die Debug-Ansicht unserer Demo an.

Menüs mit Abschnitten und Folien verknüpfen

Um besser zu verstehen, wie wir ein Menü mit der vollständigen Seite verknüpfen können, werfen wir einen Blick auf unsere feste Kopfzeile. Der Screenshot unten zeigt, wie es aussieht:

Und das HTML:

 
 Ihr Logo 
      

Solange das Hamburger-Menüsymbol ausgelöst wird, erscheint das Hauptmenü-Overlay:

Hier ist der Code für dieses Menü:

Damit fullPage über das Menü informiert werden kann, müssen Sie es mit dem registrieren Speisekarte Konfigurationseigenschaft. Als Nächstes müssen wir die Menüpunkte mit den relevanten Abschnitten verknüpfen. Dazu fügen wir die Daten-Menübaum Attribut zu unseren Artikeln mit den jeweiligen Links als Werte. Solange diese Werte übereinstimmen, hängt das Plugin an aktiv Klasse (beim Scrollen) zum entsprechenden Menüpunkt. 

Beachten Sie, dass das Plugin das noch nicht anhängt aktiv Klasse zu den Folien. Um dies zu beheben, können wir entweder jQuery (beste Lösung) oder CSS verwenden. In unserem Beispiel lösen wir dieses Problem, indem Sie die folgende CSS-Regel hinzufügen:

body.fp-viewing-fifthSection-1 #menu li: last-child a background: # 453659; 

Sehen Sie sich das Ergebnis unten an:

In der Tat haben wir das nicht hinzugefügt aktiv Klasse auf die zweite Folie. Durch die Ausnutzung der verschiedenen Karosserie Klassen, die das Plugin an jeden Abschnitt und an jede Folie anfügt, geben wir diesem Element lediglich das Stile des aktiv Klasse.

Hinweis: Wir werden uns nicht weiter auf die Funktionsweise dieses Menüs konzentrieren, da es den Rahmen dieses Tutorials sprengen würde.

Rückruf für Sektionen abfeuern

Das afterLoad Callback wird ausgelöst, sobald ein Abschnitt geladen ist und die onLeave Rückruf, sobald ein Benutzer es verlässt.

In unserem Projekt verbergen wir die vertikale Punktnavigation, wenn der fünfte Abschnitt geladen ist:

Abschnitt 4, dann Abschnitt 5 ohne Punkte

So erreichen wir es:

afterLoad: function (anchorLink, index) if (index == 5) $ ('# fp-nav'). hide ();  onLeave: function (index, nextIndex, direction) if (index == 5) $ ('# fp-nav'). show (); 

Rückrufe für Folien abfeuern

Das afterSlideLoad Ein Callback wird ausgelöst, wenn eine Folie geladen wird und die onSlideLeave Rückruf, wenn der Benutzer es verlässt.

In unserem Fall konzentrieren wir uns auf die zweite Folie, um verschiedene Aktionen auszuführen. Sobald die Folie geladen ist, deaktivieren wir beispielsweise die Möglichkeit, nach oben zu scrollen. Außerdem ändern wir die Hintergrundfarbe Eigenschaft dieser Folie sowie das Erscheinungsbild der dazugehörigen Elemente.

Ein Teil des von uns verwendeten Codes ist unten dargestellt:

afterSlideLoad: Funktion (AnchorLink, Index, SlideAnchor, SlideIndex) if (AnchorLink == '5thSection' && SlideIndex == 1) $ .fn.fullpage.setAllowScrolling (false, 'up'); $ (this) .css ('background', '# 374140'); $ (this) .find ('h2'). css ('color', 'white'); $ (this) .find ('h3'). css ('color', 'white'); $ (this) .find ('p'). css ('color': '# DC3522', 'opacity': 1, 'transform': 'translateY (0)');  onSlideLeave: Funktion (AnchorLink, Index, SlideIndex, Richtung) if (AnchorLink == '5thSection' && SlideIndex == 1) $ .fn.fullpage.setAllowScrolling (true, 'up'); 

Das Plugin initialisieren

Dies ist der letzte erforderliche Schritt, um die Funktionalität von fullPage auszulösen. Hier übergeben wir als Teil des Konfigurationsobjekts alle unsere Anpassungen. Sehen Sie sich den entsprechenden Code-Ausschnitt unten an:

$ ('# fullpage'). fullpage (sectionSelector: '.vertical-scrolling', slideSelector: '.horizontal-scrolling', controlArrows: false // Weitere Optionen hier);

Fazit

In diesem Lernprogramm haben wir einen kurzen Überblick über das jQuery-Plugin fullPage.js erhalten und erfahren, wie Sie eine responsive, ganzseitige Scrolling-Site erstellen. Es ist wichtig zu verstehen, dass diese Art von Website nicht für alle Fälle geeignet ist. Neben ihrem attraktiven Design haben sie viele Einschränkungen und ihre Wartbarkeit kann insbesondere für dynamische Sites schwierig sein. Außerdem kann dieses Format bei SEO Komplikationen verursachen.

Nächste Schritte

Wenn Sie die Demo-Site als Grundlage für das Experimentieren mit dem Plugin verwenden möchten, empfehle ich die folgenden Herausforderungen:

• Binden Sie die hervorragende Bibliothek animate.css in das Projekt ein und versuchen Sie, scrollbasierte Animationen zu erstellen.
• Verwenden Sie Ihr jQuery-Wissen, um das zu aktivieren aktiv Klasse auf die zweite Folie (siehe Menü mit Abschnitten und Folien verknüpfen Sektion).

Wenn Sie Erfahrung mit einseitigen Websites haben, können Sie uns Ihre Meinung in den Kommentaren mitteilen!