fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

Gerade bei kleinen Webprojekten sind One-Pager sehr beliebt. Anspruchsvoll und großzügig gestaltet, sorgen sie oft für maximale Aufmerksamkeit. Mit dem jQuery-Plugin fullPage.js erstellst du auf einfache Weise „mehrseitige“ One-Pager. Das Plugin sorgt dafür, dass einzelne Bereiche eines HTML-Dokumentes seitenfüllend dargestellt und per Navigation oder auch per Scrolling animiert gewechselt werden.

fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

Plugin einbinden und Seiten auszeichnen

fullPage.js besteht aus je einer JavaScript- und Stylesheet-Datei, die jeweils zusammen mit jQuery eingebunden werden muss. Für zusätzliche Animationseffekte bei den Übergängen zwischen den Seiten kann optional das Easings-Plugin von jQuery UI integriert werden.

fullpagejs1

Anschließend zeichnest du ein HTML-Dokument mit deinen Seiten aus. Dazu benötigt fullPage.js einen Container mit einer ID – zum Beispiel „fullpage“. Darin definierst du für jede Seite einen Container mit der Klasse „section“. Das Plugin stellt alle Container seitenfüllend untereinander dar. Die erste Seite ist dabei standardmäßig beim Seitenaufruf sichtbar.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section">Seite 2</div>
  <div class="section">Seite 3</div>
</div>

Anschließend muss per JavaScript das Plugin gestartet und die ID übergeben werden.

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

Standardmäßig wird beim Scrollen nach unten die erste Seite über eine einfache Slide-Animation nach oben aus- und die nächste Seite von unten eingeblendet.

Aussehen und Funktionalität steuern

fullpagejs2
Animierter Übergang zur nächsten Seite

Das Plugin stellt eine Vielzahl von Optionen zur Verfügung, mit denen du das Aussehen und die Funktionalität des Plugins anpasst. So hast du die Möglichkeit, Hintergrundfarben der einzelnen Seiten, sowie den Abstand zum Seitenrand über das Plugin anzugeben.

$(document).ready(function() {
  $("#fullpage").fullpage({
    sectionsColor: ["#ccc", "#fff", "#333"],
    paddingTop: "10px",
    paddingBottom: "20px"
  });
});

Mit der Option „sectionsColor“ definierst du über ein Objektliteral die Hintergrundfarbe für alle Abschnitte beziehungsweise Seiten. Mit „paddingTop“ und „paddingBottom“ legst du Abstände oben und unten fest.

Navigation steuern

Willst du eine andere als die erste Seite beim Aufruf der Seite anzeigen lassen, kannst du über die zusätzliche Klasse „active“ einen beliebigen Bereich so auszeichnen. Dieser Bereich wird dann immer dargestellt, wenn du die Seite lädst. Von dort kannst du dann wie gewohnt die anderen Seiten ansteuern.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section active">Seite 2</div>
  <div class="section">Seite 3</div>
</div>

Außerdem hast du die Möglichkeit, eine Navigation zu erstellen, mit der du jede Seite direkt erreichst. Die Navigation erstellst du manuell innerhalb eines eigenen Containers. Jedem Menüpunkt, der auf einen Bereich verweisen soll, muss das Attribut „data-menuanchor“ mit je einem eindeutigen Wert zugewiesen werden. Der eigentliche Link enthält ebenfalls den Ankernamen als seiteninternen Verweis.

<div id="menu">
  <ul>
  <li data-menuanchor="seite1"><a href="#seite1">Seite 1</a></li>
  </il>
</div>

Innerhalb der Optionen des Plugins vergibst du über den Parameter „anchors“ ebenfalls die Ankerbezeichnungen. Außerdem gibst du über den Parameter „menu“ die ID des Menüs an.

$(document).ready(function() {
  $("#fullpage").fullpage({
    menu: "#menu",
    anchor: ["seite1", "seite2", "seite3"]
  );
});

Anschließend navigierst du nicht nur per Scrolling, sondern ganz bequem auch über eine „normale“ Navigation durch die Seiten. Die animierten Übergänge bleiben natürlich erhalten.

Zusätzliche horizontale Seitenebene hinzufügen

fullpagejs3
Zweite Ebene für zusätzliche Inhalte

Wenn dir die einfache Seitenstruktur nicht ausreicht, kannst du einfach eine zweite Ebene mit Inhalten hinzufügen. Während die erste Ebene vertikal aufgebaut ist, ist die zweite Ebene horizontal angeordnet – als sogenannte Slides. Du scrollst also nach unten, um durch die Seiten erster Ebene zu steuern und nach rechts für die untergliederten Seiten beziehungsweise Slides. Im Quelltext zeichnest du solche zusätzlichen Seiten mit einem eigenen Container und der Klasse „slide“ aus.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section">
    <div class="slide">Seite 2.1</div>
    <div class="slide">Seite 2.2</div>
  </div>
  <div class="section">Seite 3</div>
</div>

Im Beispiel scrollst du also von Seite 1 nach unten auf Seite 2.1. Hier stellt dir das Plugin Steuerungspfeile zur Verfügung, mit denen du nach rechts auf Seite 2.2 und wieder nach links auf Seite 2.1 wechseln kannst.

Fazit

fullPage.js ist ein sehr einfaches und dennoch eindrucksvolles Tool, um Inhalte eines One-Pagers seitenfüllend darzustellen und strukturieren zu können. Dank der zusätzlichen zweiten Ebene bringst du auch durchaus komplexe Inhalte ansprechend unter. Das Plugin eignet sich somit auch prima, um Präsentationen im Browser halten zu können.

Die Einstellungsmöglichkeiten sind sehr vielfältig. Eine umfangreiche Dokumentation verrät dir sehr anschaulich, was alles möglich ist. Die Animationen basieren zeitgemäß auf CSS3. fullPage.js läuft in allen modernen Browsern und sogar im Internet Explorer ab Version 8. Außerdem ist es auch für Mobilgeräte wie Tablets geeignet.

Das ganze Plugin steht unter der MIT-Lizenz, welche dir vielfältige – auch kommerzielle – Einsätze gestattet. Das Downloadpaket beinhaltet zudem mehrere Beispiele, an denen du dich direkt versuchen kannst.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] so etwas nicht. Doch Interesse so eine Seite selbst zu basteln hätte ich schon. Da kommt jetzt der Artikel bei Dr.Web gerade recht. Denis Potschien stellt darin ein JavaScript mit dem Namen fullPage.js vor. Mit Hilfe […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen