Vollbild-Scrolling mit reinem CSS ist mühsam. scroll-snap verhält sich in Chrome und Safari unterschiedlich, ruckelt auf Mobilgeräten, und Browser-Historie sowie URL-Anker können Sie vergessen. jQuery-Lösungen benötigen über 200 Zeilen Code und scheitern trotzdem an variierenden Bildschirmhöhen.

fullPage.js bewältigt diese Aufgabe vollständig. Eine Bibliothek mit mehr als 35.000 Sternen auf ihrem GitHub-Repository und 2,5 Millionen monatlichen Downloads über das jsDelivr-CDN liefert vorhersehbares abschnittsweises Scrollen, horizontale Slides, Lazy Loading und über 80 Optionen direkt einsatzbereit. Version 4.0.41 (März 2026) läuft auf Vanilla JS, jQuery wird nicht mehr benötigt.

Nachfolgend eine Schritt-für-Schritt-Anleitung zur Integration von fullPage.js in WordPress: vom Laden per wp_enqueue_script bis hin zu einem Video-Hintergrund und selektivem Deaktivieren von Styles. Keine Plugins, volle Kontrolle über jeden Pixel.

💡 Kurzüberblick:

• fullPage.js per wp_enqueue_script laden, ein Hook, keine zusätzlichen Plugins
• Sections, Anker und Navigation passend zur Seitenstruktur konfigurieren
• Einen Video-Hintergrund einbinden, der automatisch pausiert, wenn Sie den Abschnitt verlassen
• Das Problem langer Blöcke mit scrollOverflow und fp-auto-height lösen
• Die Bibliotheks-Styles selektiv deaktivieren, ohne sie komplett zu entfernen

Was fullPage.js ist

fullPage.js ist eine JavaScript-Bibliothek für Websites mit vertikalem Vollbild-Scrolling. Die Seite wird in Sections unterteilt, die jeweils exakt die Bildschirmhöhe einnehmen. Ein Scrollen oder eine Berührung bewegt den Nutzer mit einer sanften Animation zwischen den Abschnitten. Innerhalb der Sections gibt es horizontale Slides.

Die aktuelle Version ist 4.0.41 (März 2026). Die Bibliothek wurde vollständig in Vanilla JS neu geschrieben: Der Verzicht auf jQuery sparte rund 80 KB. Alle modernen Browser und Mobilgeräte werden unterstützt. IE11 funktioniert mit der Version 3.x.

Für WordPress gibt es offizielle Plugins für Elementor, Gutenberg und Divi. Die Plugins sind kostenpflichtig, bauen eine Landingpage aber visuell auf, ohne Code. Wenn Sie volle Kontrolle benötigen, binden Sie die Bibliothek manuell ins Theme ein.

Schritt 1. fullPage.js in WordPress einbinden

Der korrekte Weg führt über wp_enqueue_script in der functions.php. Kein hartcodiertes <script> im Footer, keine Einfügungen über wp_head.

Laden Sie fullpage.min.js und fullpage.min.css aus dem offiziellen Repository herunter oder beziehen Sie sie per CDN. Für den Produktivbetrieb ist eine lokale Datei zuverlässiger, weniger externe Abhängigkeiten und schnelleres Laden.

Legen Sie die Dateien in einem Theme-Ordner ab, zum Beispiel /assets/fullpage/, und fügen Sie dies in die functions.php ein:

1
/**
2
 * Loading fullPage.js only on the front page.
3
 */
4
function sd_register_fullpage() {
5
    if ( ! is_front_page() ) {
6
        return;
7
    }
8
 
9
    wp_enqueue_style(
10
        'sd-fullpage',
11
        get_template_directory_uri() . '/assets/fullpage/fullpage.min.css',
12
        array(),
13
        '4.0.41'
14
    );
15
 
16
    wp_enqueue_script(
17
        'sd-fullpage',
18
        get_template_directory_uri() . '/assets/fullpage/fullpage.min.js',
19
        array(),
20
        '4.0.41',
21
        true
22
    );
23
}
24
add_action( 'wp_enqueue_scripts', 'sd_register_fullpage' );

Entscheidend ist hier: is_front_page() beschränkt das Laden auf die Startseite, sodass die Bibliothek nicht auf der gesamten Website mitläuft. Der vierte Parameter true platziert das Skript im Footer, und die Seite wird ohne Verzögerung dargestellt. Die Version im dritten Argument hilft, den Cache bei einem Update zurückzusetzen, damit der Browser die neue Datei abruft und nicht die zwischengespeicherte alte verwendet.

Wenn ein CDN bequemer ist, ersetzen Sie get_template_directory_uri() durch direkte Links aus dem jsDelivr-Netzwerk oder von cdnjs. Pinnen Sie die Version explizit in der URL ([email protected]), verwenden Sie nicht @latest, ein Major-Versionsupdate kann die Website ohne Vorwarnung zerstören.

Schritt 2. Grundkonfiguration

Die HTML-Struktur ist einfach: ein Wrapper mit id="fullpage" und Sektionen mit der Klasse section. Innerhalb der Sektionen befinden sich horizontale Slides mit der Klasse slide.

1
<div id="fullpage">
2
    <div class="section">First section</div>
3
    <div class="section">Second section</div>
4
    <div class="section">
5
        <div class="slide">Slide 1</div>
6
        <div class="slide">Slide 2</div>
7
    </div>
8
</div>

Die Initialisierung erfolgt in Vanilla JS, in der Datei fullpage-init.js, die nach der Bibliothek geladen wird:

1
document.addEventListener('DOMContentLoaded', function () {
2
    new fullpage('#fullpage', {
3
        // Navigation
4
        anchors: ['intro', 'features', 'pricing', 'contact'],
5
        navigation: true,
6
        navigationPosition: 'right',
7
 
8
        // Scrolling
9
        scrollingSpeed: 700,
10
        autoScrolling: true,
11
        fitToSection: true,
12
        scrollBar: false,
13
        easing: 'easeInOutCubic',
14
 
15
        // Responsive
16
        responsiveWidth: 1024,
17
        responsiveHeight: 768,
18
 
19
        // Design
20
        verticalCentered: true,
21
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f5f5f5'],
22
        paddingTop: '2em',
23
 
24
        // Performance
25
        lazyLoading: true,
26
        observer: true
27
    });
28
});

Die wichtigsten Optionen, die es sich lohnt, von Anfang an bewusst zu konfigurieren:

• anchors, Anker für direkte Links zu Sektionen (site.com/#features). Ohne sie ändert sich die URL beim Scrollen nicht, und Sie können nicht auf einen bestimmten Block verlinken.
• navigation, Punkte auf der rechten Seite. Der Nutzer sieht sofort, wie viele Sektionen es gibt und wo er sich befindet.
• scrollingSpeed, Animationsgeschwindigkeit in ms. 700 ist der goldene Mittelweg: nicht ruckartig und nicht in die Länge gezogen.
• responsiveWidth und responsiveHeight, bei Bildschirmen kleiner als die eingestellten Werte wird das Vollbild-Scrolling automatisch deaktiviert. Andernfalls werden Inhalte auf Tablets und Smartphones abgeschnitten.
• scrollBar, die Bildlaufleiste. false für einen cleanen Fullpage-Effekt; true ist praktisch für das Debugging.

Die vollständige Liste mit über 80 Optionen finden Sie in der offiziellen Dokumentation.

Schritt 3. Vertikale Navigation

Die eingebauten Navigationspunkte werden über das Flag navigation: true aktiviert. Das Standard-Styling ist jedoch minimal, graue Kreise auf der rechten Seite. Wir passen sie mit CSS an das Design an:

1
/* Color and size of the navigation dots */
2
#fp-nav ul li a span {
3
    background: #4b944e;
4
    width: 10px;
5
    height: 10px;
6
    margin: -5px 0 0 -5px;
7
}
8
 
9
#fp-nav ul li a.active span {
10
    background: #fff;
11
    border: 2px solid #4b944e;
12
}
13
 
14
/* Tooltips on hover */
15
#fp-nav ul li .fp-tooltip {
16
    color: #333;
17
    font-size: 14px;
18
    font-family: inherit;
19
}

Wenn die eingebaute Navigation mit dem Theme kollidiert oder nicht gerendert wird, schreiben wir eine manuelle Anbindung mit jQuery. Das folgende Skript überwacht die aktive Klasse auf den Sektionen und hebt den entsprechenden Menüpunkt hervor:

1
jQuery(document).ready(function ($) {
2
    $(window).scroll(function () {
3
        if ($(window).scrollTop() <= 1) return;
4
 
5
        var sections = [
6
            'fullPage-1', 'fullPage-2', 'fullPage-3', 'fullPage-4',
7
            'fullPage-5', 'fullPage-6', 'fullPage-7', 'fullPage-8',
8
            'fullPage-9', 'fullPage-10'
9
        ];
10
 
11
        sections.forEach(function (cls, i) {
12
            var isActive = $('.' + cls).hasClass('active');
13
            var navItem = $('#fp-nav > ul > li:nth-child(' + (i + 1) + ') > a');
14
 
15
            if (isActive) {
16
                navItem.addClass('active');
17
                navItem.find('span').css('background', '#fff');
18
            } else {
19
                navItem.removeClass('active');
20
                navItem.find('span').css('background', '#4b944e');
21
            }
22
        });
23
    });
24
});

Der Code des Navigationspanels selbst, eine ungeordnete Liste mit Links zu den Ankern:

1
<ul id="fp-nav">
2
    <li><a href="#intro" class="active"></a></li>
3
    <li><a href="#features"></a></li>
4
    <li><a href="#pricing"></a></li>
5
    <li><a href="#contact"></a></li>
6
</ul>

In der Praxis rettet Sie dieser Fallback, wenn das Theme fullPage.js-Selektoren überschreibt oder eine nicht standardmäßige DOM-Struktur verwendet. Der Code kommt in die footer.php oder wird über wp_add_inline_script eingebunden.

Schritt 4. Videohintergrund und Wiedergabesteuerung

Ein Video hinter der ersten Sektion ist ein eindrucksvoller Akzent. Ohne Steuerung läuft es jedoch weiter, nachdem Sie die Sektion verlassen haben, und verschwendet Ressourcen. Gelöst wird das mit dem afterLoad-Callback.

Das HTML der ersten Sektion mit Video:

1
<div class="section" id="intro">
2
    <video id="bgVideo" loop muted playsinline data-autoplay>
3
        <source src="/wp-content/uploads/video/background.mp4" type="video/mp4">
4
    </video>
5
    <div class="layer">
6
        <h1>Heading over the video background</h1>
7
    </div>
8
</div>

Das Attribut playsinline ist für iOS zwingend erforderlich, ohne es öffnet Safari das Video in einem Vollbild-Player. Die Kombination loop muted data-autoplay sorgt für eine nahtlose Hintergrundwiedergabe.

Steuerung über afterLoad in der fullPage.js-Konfiguration:

1
new fullpage('#fullpage', {
2
    // ...other options...
3
    afterLoad: function (anchorLink, index) {
4
        var video = document.querySelector('#bgVideo');
5
        if (!video) return;
6
 
7
        if (index === 1) {
8
            video.play();
9
        } else {
10
            video.pause();
11
        }
12
    }
13
});

Der Callback wird ausgelöst, sobald Sie einen Abschnitt betreten. Index 1, der erste Abschnitt, startet das Video. Jeder andere pausiert es. Prozessor und Akku des Mobilgeräts werden so nicht unnötig belastet.

Für die manuelle Steuerung fügen Sie einen Wiedergabe/Pause-Button hinzu, dessen Handler das Icon umschaltet und video.play() / video.pause() aufruft. Der Nutzer erhält eine Wahlmöglichkeit, und die Vollbild-Scrollmechanik bleibt intakt.

Schritt 5. Lange Blöcke, scrollOverflow und automatische Höhe

Wenn der Inhalt eines Abschnitts nicht in die Bildschirmhöhe passt, wird der untere Teil abgeschnitten. Wir aktivieren scrollOverflow:

1
new fullpage('#fullpage', {
2
    scrollOverflow: true
3
});

Die Option fügt diesem spezifischen Abschnitt eine innere Scrollleiste hinzu, die anderen Abschnitte bleiben unberührt. Das genügt in den meisten Fällen.

Für eine feinere Steuerung setzen wir CSS-Klassen direkt auf den Abschnitt:

1
<div class="section fp-normal-scroll fp-auto-height">
2
    <!-- Long content with free scrolling -->
3
</div>

fp-auto-height entfernt die strikte 100vh-Vorgabe, die Höhe des Abschnitts wird durch den Inhalt bestimmt. fp-normal-scroll deaktiviert den Einrast-Effekt, der Abschnitt scrollt auf natürliche Weise. Die Kombination ist ideal für Footer, lange Tabellen und Seiten mit variablen Blockhöhen.

In Block-Editoren wie King Composer werden die Klassen in den Zeileneinstellungen hinzugefügt:

Schritt 6. fullPage.js-Stile gezielt deaktivieren

Gelegentlich überschreibt die Bibliothek das CSS der Website, verschiebt die Positionierung, ändert Padding oder Abschnittsbreiten. Es ist nicht nötig, fullPage.js komplett zu entfernen: Wir deaktivieren nur die problematischen Stile.

Ein Beispiel für das Zurücksetzen der Positionierung für die Abschnitte 3 bis 8:

1
/* Reset of fullPage.js styles for the selected sections */
2
.fullpage-wrapper section:nth-child(n+3):nth-child(-n+8) {
3
    left: inherit !important;
4
    padding-left: inherit !important;
5
    width: inherit !important;
6
    height: inherit !important;
7
    padding-top: inherit !important;
8
    padding-bottom: inherit !important;
9
    background-color: inherit !important;
10
}

Der Selektor :nth-child(n+3):nth-child(-n+8) trifft exakt diesen Bereich. !important ist hier gerechtfertigt, da fullPage.js Stile inline setzt und Sie diese nur auf diesem Wege überschreiben können. Wenden Sie es jedoch selektiv an: Ein !important über die gesamte Seite, und die Kaskade wird unbrauchbar.

Vorgefertigte WordPress-Themes mit fullPage.js

Wenn Sie die Bibliothek nicht manuell in ein bestehendes Theme integrieren möchten, nehmen Sie einen fertigen Starter. Aktuelle Starter-Themes auf GitHub:

• starter-fullpagejs, ein minimaler Starter, ein guter Ausgangspunkt für eigenes Markup
• wordpress-onepager, ein schlankes Theme für One-Page-Seiten (Repository nicht verfügbar, suchen Sie nach Forks)
• derkodde_fullpagetheme, ein Theme mit Unterstützung für Sections und Slides (Repository entfernt, nutzen Sie es als Konzept)
• MyPortfolio, ein Portfolio auf Basis von fullPage.js
• dandelion, ein One-Page-Theme mit klarem Design

Alle Themes stehen unter der GPL und müssen an das jeweilige Projekt angepasst werden. Sie liefern Ihnen aber eine fertige Section-Struktur und die grundlegende fullPage.js-Integration, was einen halben Arbeitstag spart.

Es gibt außerdem ein offizielles WordPress-Theme vom Entwickler sowie die oben erwähnten Plugins für Elementor, Gutenberg und Divi. Die Plugins sind kostenpflichtig, decken aber 95% der Aufgaben ohne eine einzige Codezeile ab.

Ein kurzes Video zur Installation und Konfiguration von fullPage.js in WordPress, es zeigt anschaulich den Integrationsprozess über das offizielle Plugin für Divi.

⁉️🤔 Häufig gestellte Fragen

Ist fullPage.js kostenlos?

Ja, für Open-Source-Projekte unter der GPLv3-Lizenz ist es vollständig kostenlos. Für geschlossene kommerzielle Seiten benötigen Sie eine kommerzielle Lizenz. Die WordPress-Plugins für Elementor, Gutenberg und Divi sind separate kostenpflichtige Produkte, ab 29 $ pro Seite.

Worin ist fullPage.js besser als CSS Scroll Snap?

CSS Scroll Snap verhält sich browserübergreifend unterschiedlich: flüssig in Safari, ruckelig in Chrome, verzögert auf Mobilgeräten. fullPage.js liefert überall das gleiche Verhalten. Dazu kommen out of the box: URL-Anker, Browser-Verlauf, horizontale Slides, inneres Scrollen in Sections und 37 Animationsoptionen. Keine Polyfills und keine manuellen Hilfskonstruktionen.

Wie deaktiviert man fullPage.js auf Mobilgeräten?

Die Optionen responsiveWidth: 1024 und responsiveHeight: 768 in der Konfiguration. Wenn die Bildschirmbreite unter 1024px oder die Höhe unter 768px liegt, deaktiviert die Bibliothek automatisch das Snap-Scrolling und kehrt zum normalen Scrollen zurück. Es sind keine zusätzlichen userAgent-Prüfungen nötig.

Kann man fullPage.js mit WooCommerce nutzen?

Ja, aber mit Bedacht. Produkt- und Warenkorbseiten sollten nicht bildschirmfüllend sein, das beeinträchtigt die Shopping-UX. Binden Sie fullPage.js nur auf der Startseite oder bestimmten Landingpages ein, über WordPress Conditional Tags: is_front_page() oder is_page('landing').

Warum wird das Hintergrundvideo auf iOS nicht abgespielt?

Safari auf iPhone und iPad erfordert das playsinline-Attribut auf dem <video>-Tag. Ohne dieses Attribut öffnet sich das Video in einem Vollbild-Player und funktioniert nicht als Hintergrund. Stellen Sie außerdem sicher, dass das Video in H.264 (MP4) kodiert ist, HEVC wird nicht auf allen Apple-Geräten unterstützt.

FullPage.js 2026: Manuelles Setup oder ein Plugin

Wenn Sie eine Landingpage, ein Portfolio oder eine Präsentationsseite erstellen, liefert fullPage.js einen visuellen Effekt, den reines CSS nicht erreichen kann. Über 35.000 Sterne auf GitHub und 2,5 Millionen Installationen pro Monat bestätigen, dass die Bibliothek lebendig und stabil ist.

Für Onlineshops, Blogs und Admin-Panels lohnt es sich nicht. Das bildschirmfüllende Scrollen behindert Navigation und Inhaltskonsum, der Nutzer ermüdet nach 3 bis 4 Wischbewegungen.

Ihre Entscheidungshilfe: Wenn Sie volle Kontrolle über jede Section benötigen und bereit sind, Code zu schreiben, wählen Sie das manuelle Laden per wp_enqueue_script. Wenn Sie eine Landingpage in einer Stunde visuell in Elementor oder Gutenberg bauen möchten, nehmen Sie das offizielle Plugin. Beide Wege sind in der Praxis bewährt, beide funktionieren ohne Überraschungen.

Haben Sie fullPage.js in eigenen Projekten ausprobiert? Teilen Sie Ihre Erfahrungen in den Kommentaren, dann erstellen wir gemeinsam eine lebendige Liste mit Lösungen für typische Integrationsprobleme.