Spezifische Verwendung des Vollbild-Scrollens von fullpage.js

<link rel="stylesheet" href="css/jquery.fullPage.css" rel="externes nofollow" >

<script src="js/jquery.min.js"></script>
 
<!-- jquery.easings.min.js ist erforderlich und wird für Easing-Parameter verwendet. Sie können stattdessen auch die vollständige jQuery-Benutzeroberfläche verwenden -->
<script src="js/jquery.easings.min.js"></script>
 
<!-- Wenn scrollOverflow auf true gesetzt ist, müssen Sie jquery.slimscroll.min.js importieren, was normalerweise nicht notwendig ist. -->
<script src="js/jquery.slimscroll.min.js"></script>
 
<script src="js/jquery.fullPage.js"></script>

/*Klickbare Navigation hinzufügen*/
<ul id="Menü">
    <li data-menuanchor="Seite1" class="aktiv">
        <a href="#page1" rel="external nofollow" >Erster Bildschirm</a>
    </li>
    <li data-menuanchor="Seite2">
        <a href="#page2" rel="external nofollow" >Zweiter Bildschirm</a>
    </li>
    <li data-menuanchor="Seite3">
        <a href="#page3" rel="external nofollow" >Dritter Bildschirm</a>
    </li>
    <li data-menuanchor="Seite4">
        <a href="#page4" rel="external nofollow" >Vierter Bildschirm</a>
    </li>
</ul>
/*Zum Ändern mit der Maus scrollen/*
<div id="dowebok">
    <div Klasse="Abschnitt">
        <h3>Erster Bildschirm</h3>
        <p>fullPage.js – Demo des Bindungsmenüs</p>
    </div>
    <div Klasse="Abschnitt aktiv">
        <h3>Zweiter Bildschirm</h3>
        <p>Bitte überprüfen Sie die obere linke Ecke und klicken Sie, um zu steuern</p>
    </div>
    <div Klasse="Abschnitt">
        <h3>Dritter Bildschirm</h3>
        <p>Das gebundene Menü hat keinen Standardstil, Sie müssen ihn selbst schreiben</p>
    </div>
    <div Klasse="Abschnitt">
        <h3>Vierter Bildschirm</h3>
        <p>Dies ist der letzte Bildschirm</p>
    </div>
</div>

<Skript>
$(Funktion(){
    $('#dowebok').volleseite({
    AbschnitteFarbe: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
    //Farbparameter festlegen Anker: ['Seite1', 'Seite2', 'Seite3', 'Seite4'],
    //Ankerlink-Menü definieren: '#menu'
    // Binden Sie das Menü, legen Sie die relevanten Eigenschaften so fest, dass sie den Werten der Anker entsprechen, und das Menü kann das Scrollen steuern});
});
</Skript>

$(Dokument).bereit(Funktion() {
    $('#volleSeite').volleSeite({
        //Navigation
        Menü: '#Menü',
        lockAnchors: false,
        Anker:['ersteSeite', 'zweiteSeite'],
        Navigation: falsch,
        Navigationsposition: 'rechts',
        NavigationTooltips: ['ersteFolie', 'zweiteFolie'],
        showActiveTooltip: false,
        FolienNavigation: false,
        slidesNavPosition: 'unten',

        //Scrollen
        css3: wahr,
        Scrollgeschwindigkeit: 700,
        autoScrolling: true,
        fitToSection: wahr,
        fitToSectionDelay: 1000,
        ScrollBar: falsch,
        Beschleunigung: 'easeInOutCubic',
        easingcss3: "Leichtigkeit",
        loopBottom: falsch,
        loopTop: falsch,
        loopHorizontal: wahr,
        continuousVertical: falsch,
        continuousHorizontal: falsch,
        scrollHorizontal: false,
        interlockedSlides: falsch,
        dragAndMove: falsch,
        Offsetabschnitte: false,
        Schieberegler zurücksetzen: false,
        FadingEffect: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: falsch,
        scrollOverflowReset: false,
        scrollOverflowOptions: null,
        Berührungsempfindlichkeit: 15,
        normalScrollElementTouchThreshold: 5,
        bigSectionsDestination: null,

        //Zugänglichkeit
        TastaturScrollen: true,
        animateAnchor: wahr,
        Datensatzhistorie: wahr,

        //Design
        Kontrollpfeile: true,
        vertikalZentriert: wahr,
        AbschnitteFarbe: ['#ccc', '#fff'],
        paddingTop: '3em',
        paddingBottom: '10px',
        festeElemente: '#header, .footer',
        Reaktionsbreite: 0,
        Reaktionshöhe: 0,
        responsiveSlides: false,
        Parallaxe: falsch,
        ParallaxOptions: {Typ: „anzeigen“, Prozentsatz: 62, Eigenschaft: „übersetzen“},

        //Benutzerdefinierte Selektoren
        Abschnittsauswahl: ".Abschnitt",
        Folienauswahl: ".slide",

        lazyLoading: wahr,

        //Veranstaltungen
        onLeave: Funktion (Index, nächsterIndex, Richtung) {},
        nach Laden: Funktion (Ankerlink, Index) {},
        nachRender: function(){},
        nachGrößenänderung: function(){},
        nachResponsive: Funktion(isResponsive){},
        afterSlideLoad: Funktion (Ankerlink, Index, Folienanker, Folienindex) {},
        onSlideLeave: Funktion (Ankerlink, Index, Folienindex, Richtung, nächster Folienindex) {}
    });
});

controlArrows: (Standard: true) Bestimmt, ob Steuerpfeile zum Verschieben der Folien nach rechts oder links verwendet werden.

verticalCentered: (Standard: true) Vertikale Zentrierung des Inhalts innerhalb von Abschnitten. Wenn auf true gesetzt, wird Ihr Inhalt von der Bibliothek umschlossen. Erwägen Sie die Verwendung von Delegation oder laden Sie Ihre anderen Skripte in den afterRender-Callback.

scrollingSpeed: (Standard 700) Geschwindigkeit in Millisekunden für die Scroll-Übergänge.

sectionsColor: (Standard: keine) Definieren Sie die CSS-Eigenschaft background-color für jeden Abschnitt. Beispiel:

$('#volleSeite').volleSeite({
    AbschnitteFarbe: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
Anker: (Standard []) Definiert die Ankerlinks (#Beispiel), die in der URL für jeden Abschnitt angezeigt werden sollen. Der Ankerwert sollte eindeutig sein. Die Position der Anker im Array definiert, auf welche Abschnitte der Anker angewendet wird. (zweite Position für zweiten Abschnitt und so weiter). Mit Ankern ist auch die Vorwärts- und Rückwärtsnavigation über den Browser möglich. Mit dieser Option können Benutzer auch einen bestimmten Abschnitt oder eine bestimmte Folie als Lesezeichen speichern. Achtung! Anker können nicht denselben Wert wie ein ID-Element auf der Site haben (oder das NAME-Element für IE). Jetzt können Anker direkt in der HTML-Struktur definiert werden, indem das Attribut data-anchor verwendet wird, wie hier erklärt.

lockAnchors: (Standard: false) Legt fest, ob Anker in der URL überhaupt eine Auswirkung in der Bibliothek haben. Sie können Anker weiterhin intern für Ihre eigenen Funktionen und Rückrufe verwenden, aber sie haben keine Auswirkung auf das Scrollen der Site. Nützlich, wenn Sie fullPage.js mit anderen Plugins kombinieren möchten, die Anker in der URL verwenden.

Wichtig: Es ist hilfreich zu verstehen, dass die Werte im Ankeroptions-Array durch ihre Position im Markup direkt mit dem Element mit der Klasse .section korrelieren.

easing: (Standard easeInOutCubic) Definiert den Übergangseffekt, der für das vertikale und horizontale Scrollen verwendet werden soll. Für die Verwendung einiger seiner Übergänge ist die Datei vendor/jquery.easings.min.js oder jQuery UI erforderlich. Stattdessen können auch andere Bibliotheken verwendet werden.

easingcss3: (Standard-Easing) Definiert den zu verwendenden Übergangseffekt, wenn css3:true verwendet wird. Sie können die vordefinierten Effekte verwenden (wie linear, ease-out...) oder Ihre eigenen mit der Funktion cubic-bezier erstellen. Sie können hierfür das CSS Easing Animation Tool von Matthew Lein verwenden.

loopTop: (Standard: false) Definiert, ob beim Hochscrollen im ersten Abschnitt zum letzten gescrollt werden soll oder nicht.

loopBottom: (Standard: false) Definiert, ob beim Herunterscrollen im letzten Abschnitt zum ersten gescrollt werden soll oder nicht.

loopHorizontal: (Standard: true) Definiert, ob horizontale Schieberegler nach Erreichen der letzten oder vorherigen Folie wiederholt werden oder nicht.

css3: (Standard: true). Definiert, ob JavaScript- oder CSS3-Transformationen zum Scrollen innerhalb von Abschnitten und Folien verwendet werden sollen. Nützlich, um die Bewegung auf Tablets und Mobilgeräten mit Browsern, die CSS3 unterstützen, zu beschleunigen. Wenn diese Option auf true gesetzt ist und der Browser CSS3 nicht unterstützt, wird stattdessen ein jQuery-Fallback verwendet.

autoScrolling: (Standard: true) Definiert, ob das „automatische“ oder das „normale“ Scrollen verwendet werden soll. Es wirkt sich auch darauf aus, wie die Abschnitte in das Browser-/Gerätefenster auf Tablets und Mobiltelefonen passen.

fitToSection: (Standard: true) Legt fest, ob Abschnitte in das Ansichtsfenster eingepasst werden oder nicht. Wenn auf true gesetzt, füllt der aktuell aktive Abschnitt immer das gesamte Ansichtsfenster. Andernfalls kann der Benutzer mitten in einem Abschnitt anhalten.

fitToSectionDelay: (Standard 1000). Wenn fitToSection auf true gesetzt ist, verzögert dies die Anpassung um die konfigurierten Millisekunden.

scrollBar: (Standard: false) Legt fest, ob für die Site eine Bildlaufleiste verwendet werden soll oder nicht. Bei Verwendung einer Bildlaufleiste funktioniert die AutoScrolling-Funktion weiterhin wie erwartet. Der Benutzer kann die Site auch mit der Bildlaufleiste scrollen und fullPage.js passt den Abschnitt auf dem Bildschirm an, wenn das Scrollen abgeschlossen ist.

paddingTop: (Standard: 0) Definiert die obere Polsterung für jeden Abschnitt mit einem numerischen Wert und seinem Maß (paddingTop: „10px“, paddingTop: „10em“ …). Nützlich bei Verwendung einer festen Kopfzeile.

paddingBottom: (Standard 0) Definiert die untere Polsterung für jeden Abschnitt mit einem numerischen Wert und dessen Maß (paddingBottom: „10px“, paddingBottom: „10em“ …). Nützlich bei Verwendung einer festen Fußzeile.

fixedElements: (Standard: null) Definiert, welche Elemente aus der Scroll-Struktur des Plugins entfernt werden, was bei Verwendung der CSS3-Option erforderlich ist, um sie fixiert zu halten. Es ist eine Zeichenfolge mit den jQuery-Selektoren für diese Elemente erforderlich. (Beispiel: fixedElements: '#element1, .element2')

normalScrollElements: (Standard: null) Wenn Sie das automatische Scrollen beim Scrollen über einige Elemente vermeiden möchten, müssen Sie diese Option verwenden. (nützlich für Karten, scrollende Divs usw.) Es ist eine Zeichenfolge mit den jQuery-Selektoren für diese Elemente erforderlich. (Beispiel: normalScrollElements: „#element1, .element2“). Diese Option sollte nicht auf ein Abschnitts-/Folienelement selbst angewendet werden.

normalScrollElementTouchThreshold: (Standard 5) Definiert den Schwellenwert für die Anzahl der Sprünge im HTML-Knotenbaum. Fullpage prüft, ob normalScrollElements übereinstimmt, um die Scrollfunktion für Divs auf einem Touch-Gerät zuzulassen. (Beispiel: normalScrollElementTouchThreshold: 3)

bigSectionsDestination: (Standard: null) Definiert, wie zu einem Abschnitt gescrollt wird, dessen Größe größer als das Ansichtsfenster ist. Standardmäßig scrollt fullPage.js nach oben, wenn Sie aus einem Abschnitt über dem Zielabschnitt kommen, und nach unten, wenn Sie aus einem Abschnitt unter dem Zielabschnitt kommen. Mögliche Werte sind top, bottom, null.

keyboardScrolling: (Standard: true) Definiert, ob der Inhalt mithilfe der Tastatur navigiert werden kann.

touchSensitivity: (Standard 5) Definiert einen Prozentsatz der Breite/Höhe des Browserfensters und wie weit ein Wisch reichen muss, um zum nächsten Abschnitt/Folie zu navigieren

continuousVertical: (Standard: false) Definiert, ob im letzten Abschnitt nach unten gescrollt werden soll oder zum ersten Abschnitt, und ob im ersten Abschnitt nach oben gescrollt werden soll, bis zum letzten Abschnitt. Nicht kompatibel mit loopTop, loopBottom oder einer anderen auf der Site vorhandenen Bildlaufleiste (scrollBar:true oder autoScrolling:false).

continuousHorizontal: (Standard: false) Erweiterung von fullpage.js. Definiert, ob beim Scrollen nach rechts im letzten Bild nach rechts zum ersten Bild gescrollt werden soll oder nicht, und ob beim Scrollen nach links im ersten Bild nach links zum letzten Bild gescrollt werden soll oder nicht. Nicht kompatibel mit loopHorizontal. Erfordert fullpage.js >= 2.8.3.

scrollHorizontally: (Standard: false) Erweiterung von fullpage.js. Definiert, ob innerhalb von Slidern mithilfe des Mausrads oder des Trackpads horizontal gescrollt werden soll. Ideal zum Geschichtenerzählen. Erfordert fullpage.js >= 2.8.3.

interlockedSlides: (Standard: false) Erweiterung von fullpage.js. Legt fest, ob das Verschieben eines horizontalen Schiebereglers das Verschieben der Schieberegler in anderen Abschnitten in die gleiche Richtung erzwingt. Mögliche Werte sind true, false oder ein Array mit den ineinandergreifenden Abschnitten. Zum Beispiel [1,3,5] beginnend mit 1. Erfordert fullpage.js >= 2.8.3.

dragAndMove: (Standard: false) Erweiterung von fullpage.js. Aktiviert oder deaktiviert das Ziehen und Wischen von Abschnitten und Folien mithilfe von Maus oder Fingern. Erfordert fullpage.js >= 2.8.9. Mögliche Werte sind:

true: aktiviert die Funktion.
false: deaktiviert die Funktion.
vertikal: aktiviert die Funktion nur vertikal.
horizontal: aktiviert die Funktion nur horizontal.
fingersonly: aktiviert die Funktion nur für Touch-Geräte.
mouseonly: aktiviert die Funktion nur für Desktop-Geräte (Maus und Trackpad).
offsetSections: (Standard: false) Erweiterung von fullpage.js. Bietet eine Möglichkeit, nicht bildschirmfüllende Abschnitte auf Prozentbasis zu verwenden. Ideal, um Besuchern zu zeigen, dass die Site mehr Inhalt enthält, indem ein Teil des nächsten oder vorherigen Abschnitts angezeigt wird. Erfordert fullPage.js >= 2.8.8. Um den Prozentsatz jedes Abschnitts zu definieren, muss das Attribut data-percentage verwendet werden. Die Zentrierung des Abschnitts im Ansichtsfenster kann durch Verwendung eines booleschen Werts im Attribut data-centered bestimmt werden (Standard: true, wenn nicht angegeben). Beispiel:

    <div Klasse="Abschnitt" Daten-Prozentsatz="80" Daten-Centered="true">
resetSliders: (Standard: false). Erweiterung von fullpage.js. Definiert, ob jeder Slider nach Verlassen seines Abschnitts zurückgesetzt werden soll oder nicht. Erfordert fullpage.js >= 2.8.3.

fadingEffect: (Standard: false). Erweiterung von fullpage.js. Definiert, ob anstelle des standardmäßigen Bildlaufeffekts ein Überblendungseffekt verwendet werden soll oder nicht. Mögliche Werte sind true, false, Abschnitte, Folien. Es kann daher nur vertikal oder horizontal oder auf beide gleichzeitig angewendet werden. Erfordert fullpage.js >= 2.8.6.

animateAnchor: (Standard: true) Definiert, ob beim Laden der Site bei Angabe eines Ankers (#) mit einer Animation zu ihrem Ziel gescrollt oder der angegebene Abschnitt direkt geladen wird.

recordHistory: (Standard: true) Definiert, ob der Status der Site in den Browserverlauf übertragen werden soll. Wenn auf true gesetzt, fungiert jeder Abschnitt/jede Folie der Site als neue Seite und die Zurück- und Vorwärts-Schaltflächen des Browsers scrollen durch die Abschnitte/Folien, um den vorherigen oder nächsten Status der Site zu erreichen. Wenn auf false gesetzt, ändert sich die URL weiter, hat aber keinen Einfluss auf den Browserverlauf. Diese Option wird automatisch deaktiviert, wenn autoScrolling:false verwendet wird.

Menü: (Standard: false) Ein Selektor kann verwendet werden, um das Menü anzugeben, das mit den Abschnitten verknüpft werden soll. Auf diese Weise aktiviert das Scrollen der Abschnitte das entsprechende Element im Menü mithilfe der Klasse „active“. Dadurch wird kein Menü generiert, sondern nur die Klasse „active“ mit den entsprechenden Ankerlinks zum Element im angegebenen Menü hinzugefügt. Um die Elemente des Menüs mit den Abschnitten zu verknüpfen, wird ein HTML 5-Datentag (data-menuanchor) benötigt, der mit denselben Ankerlinks verwendet wird, die auch in den Abschnitten verwendet werden. Beispiel:

<ul id="meinMenü">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage" rel="external nofollow" >Erster Abschnitt</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage" rel="external nofollow" >Zweiter Abschnitt</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage" rel="external nofollow" >Dritter Abschnitt</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage" rel="external nofollow" >Vierter Abschnitt</a></li>
</ul>
$('#volleSeite').volleSeite({
    Anker: ['ersteSeite', 'zweiteSeite', 'dritteSeite', 'vierteSeite', 'letzteSeite'],
    Menü: '#meinMenü'
});
Hinweis: Das Menüelement sollte außerhalb des Fullpage-Wrappers platziert werden, um Probleme bei der Verwendung von css3:true zu vermeiden. Andernfalls wird es vom Plugin selbst an den Body angehängt.

Navigation: (Standard: „false“) Wenn auf „true“ gesetzt, wird eine Navigationsleiste angezeigt, die aus kleinen Kreisen besteht.

navigationPosition: (Standard: keine) Kann auf links oder rechts eingestellt werden und definiert, an welcher Position die Navigationsleiste angezeigt wird (falls eine verwendet wird).

navigationTooltips: (Standard []) Definiert die Tooltips, die für die Navigationskreise angezeigt werden sollen, falls diese verwendet werden. Beispiel: navigationTooltips: ['firstSlide', 'secondSlide']. Sie können sie auch definieren, indem Sie in jedem Abschnitt das Attribut data-tooltip verwenden, wenn Sie dies bevorzugen.

showActiveTooltip: (Standard: false) Zeigt einen dauerhaften Tooltip für den aktiv angezeigten Abschnitt in der vertikalen Navigation.

slidesNavigation: (Standard: false) Wenn auf „true“ gesetzt, wird für jeden Querformat-Schieberegler auf der Site eine Navigationsleiste angezeigt, die aus kleinen Kreisen besteht.

slidesNavPosition: (Standard: unten) Definiert die Position der Querformat-Navigationsleiste für Schieberegler. Erlaubt oben und unten als Werte. Sie können die CSS-Stile ändern, um den Abstand von oben oder unten sowie alle anderen Stile wie die Farbe festzulegen.

scrollOverflow: (Standard: false) (nicht kompatibel mit IE 8) definiert, ob ein Scroll für den Abschnitt/die Folie erstellt werden soll, falls deren Inhalt größer als die Höhe ist. Wenn auf true gesetzt, wird Ihr Inhalt vom Plugin umschlossen. Erwägen Sie die Verwendung von Delegation oder laden Sie Ihre anderen Skripte im afterRender-Callback. Wenn Sie es auf true setzen, wird die Vendor-Bibliothek scrolloverflow.min.js benötigt. Diese Datei muss vor dem Plugin fullPage.js, aber nach jQuery geladen werden. Beispiel:

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
Um zu verhindern, dass fullpage.js in bestimmten Abschnitten oder Folien eine Bildlaufleiste erstellt, verwenden Sie die Klasse fp-noscroll. Beispiel: <div class="section fp-noscroll">

Sie können auch verhindern, dass Scrolloverflow im Responsive-Modus angewendet wird, wenn Sie fp-auto-height-responsive im Abschnittselement verwenden.

scrollOverflowReset: (Standard: false) Erweiterung von fullpage.js. Wenn auf true gesetzt, wird der Inhalt des Abschnitts/der Folie mit Bildlaufleiste nach oben gescrollt, wenn zu einem anderen vertikalen Abschnitt gewechselt wird. Auf diese Weise wird im Abschnitt/der Folie immer der Anfang des Inhalts angezeigt, selbst wenn von einem darunterliegenden Abschnitt gescrollt wird.

scrollOverflowOptions: Bei Verwendung von scrollOverflow:true verwendet fullpage.js eine gegabelte und geänderte Version der iScroll.js-Bibliothek. Sie können das Scrollverhalten anpassen, indem Sie fullpage.js die iScroll.js-Optionen bereitstellen, die Sie verwenden möchten. Weitere Informationen finden Sie in der Dokumentation.

sectionSelector: (Standard: .section) Definiert den jQuery-Selektor, der für die Plugin-Abschnitte verwendet wird. Er muss möglicherweise manchmal geändert werden, um Probleme mit anderen Plugins zu vermeiden, die dieselben Selektoren wie fullpage.js verwenden.

slideSelector: (Standard: .slide) Definiert den jQuery-Selektor, der für die Plugin-Folien verwendet wird. Er muss möglicherweise manchmal geändert werden, um Probleme mit anderen Plugins zu vermeiden, die dieselben Selektoren wie fullpage.js verwenden.

responsiveWidth: (Standard 0) Unter der in Pixeln definierten Breite wird ein normales Scrollen (autoScrolling:false) verwendet. Dem Body-Tag wird eine Klasse fp-responsive hinzugefügt, falls der Benutzer sie für sein eigenes responsives CSS verwenden möchte. Wenn der Wert beispielsweise auf 900 eingestellt ist, scrollt das Plugin wie eine normale Site, wenn die Breite des Browsers weniger als 900 beträgt.

responsiveHeight: (Standard 0) Unter der in Pixeln definierten Höhe wird ein normales Scrollen (autoScrolling:false) verwendet. Dem Body-Tag wird eine Klasse fp-responsive hinzugefügt, falls der Benutzer sie für sein eigenes responsives CSS verwenden möchte. Wenn der Wert beispielsweise auf 900 eingestellt ist, scrollt das Plugin wie eine normale Site, wenn die Höhe des Browsers weniger als 900 beträgt.

responsiveSlides: (Standard: false) Erweiterung von fullpage.js. Wenn auf true gesetzt, werden Folien in vertikale Abschnitte umgewandelt, wenn der Responsive-Modus aktiviert wird. (Durch Verwendung der oben beschriebenen Optionen responsiveWidth oder responsiveHeight). Erfordert fullpage.js >= 2.8.5.

Parallaxe: (Standard: „false“) Erweiterung von fullpage.js. Definiert, ob die Parallax-Hintergrundeffekte in Abschnitten/Folien verwendet werden sollen oder nicht. Lesen Sie mehr darüber, wie Sie die Parallax-Option anwenden.

ParallaxOptions: (Standard: {Typ: „reveal“, Prozentsatz: 62, Eigenschaft: „translate“}). Ermöglicht die Konfiguration der Parameter für den Parallax-Hintergrundeffekt bei Verwendung der Option „parallax:true“. Lesen Sie mehr darüber, wie Sie die Parallax-Option anwenden.

lazyLoading: (Standard: true) Lazy Loading ist standardmäßig aktiviert, was bedeutet, dass alle Medienelemente, die das Attribut data-src enthalten, verzögert geladen werden, wie in den Lazy Loading-Dokumenten beschrieben. Wenn Sie eine andere Lazy Loading-Bibliothek verwenden möchten, können Sie diese fullpage.js-Funktion deaktivieren.

Methoden
Hier können Sie sie in Aktion sehen

Abschnitt nach oben verschieben()
Demo Scrollt einen Abschnitt nach oben:

$.fn.fullpage.moveSectionUp();
Abschnitt nach unten verschieben()
Demo Scrollt einen Abschnitt nach unten:

$.fn.fullpage.moveSectionDown();
moveTo(Abschnitt, Folie)
Demo: Scrollt die Seite zum angegebenen Abschnitt und zur angegebenen Folie. Die erste Folie, die standardmäßig sichtbar ist, hat den Index 0.

/*Scrollen zum Abschnitt mit dem Ankerlink `firstSlide` und zur 2. Folie */
$.fn.fullpage.moveTo('erste Folie', 2);
//Scrollen zum 3. Abschnitt der Site
$.fn.fullpage.moveTo(3, 0);

//Das ist das gleiche wie
$.fn.fullpage.moveTo(3);
silentMoveTo(Abschnitt, Folie)
Demo Genau dasselbe wie moveTo, aber in diesem Fall wird der Bildlauf ohne Animation durchgeführt. Ein direkter Sprung zum Ziel.

/*Scrollen zum Abschnitt mit dem Ankerlink `firstSlide` und zur 2. Folie */
$.fn.fullpage.silentMoveTo('erste Folie', 2);
verschiebenSlideRight()
Demo Scrollt den horizontalen Schieberegler des aktuellen Abschnitts zur nächsten Folie:

$.fn.fullpage.moveSlideRight();
moveSlideLeft()
Demo Scrollt den horizontalen Schieberegler des aktuellen Abschnitts zur vorherigen Folie:

$.fn.fullpage.moveSlideLeft();
setAutoScrolling(boolean)
Demo Legt die Scroll-Konfiguration in Echtzeit fest. Definiert das Verhalten des Seiten-Scrollens. Wenn es auf „true“ gesetzt ist, wird das „automatische“ Scrollen verwendet, andernfalls wird das „manuelle“ oder „normale“ Scrollen der Site verwendet.

$.fn.fullpage.setAutoScrolling(false);
setFitToSection(boolean)
Demo: Legt den Wert für die Option „fitToSection“ fest, die bestimmt, ob der Abschnitt in den Bildschirm eingepasst werden soll oder nicht.

$.fn.fullpage.setFitToSection(false);
fitToSection()
Demo: Scrollt zum nächstgelegenen aktiven Abschnitt, der in das Ansichtsfenster passt.

$.fn.fullpage.fitToSection();
setLockAnchors(boolesch)
Demo: Legt den Wert für die Option „lockAnchors“ fest, die bestimmt, ob Anker in der URL eine Auswirkung haben oder nicht.

$.fn.fullpage.setLockAnchors(false);
setAllowScrolling(boolean, [Richtungen])
Demo Fügt die Möglichkeit hinzu oder entfernt sie, mit dem Mausrad/Trackpad oder Touch-Gesten durch Abschnitte/Folien zu scrollen (standardmäßig aktiviert). Beachten Sie, dass das Scrollen über die Tastatur dadurch nicht deaktiviert wird. Sie müssen dafür setKeyboardScrolling verwenden.

Richtungen: (optionaler Parameter) Zulässige Werte: alle, hoch, runter, links, rechts oder eine durch Kommas getrennte Kombination davon wie runter, rechts. Definiert die Richtung, für die das Scrollen aktiviert oder deaktiviert wird.
// Scrollen deaktivieren
$.fn.fullpage.setAllowScrolling(false);

//Deaktivierung des Scrollens nach unten
$.fn.fullpage.setAllowScrolling(false, 'nach unten');

//Deaktivierung des Scrollens nach unten und rechts
$.fn.fullpage.setAllowScrolling(false, 'nach unten, nach rechts');
setKeyboardScrolling(boolean, [Richtungen])
Demo Fügt die Möglichkeit hinzu oder entfernt sie, mithilfe der Tastatur durch Abschnitte zu scrollen (die standardmäßig aktiv ist).

Richtungen: (optionaler Parameter) Zulässige Werte: alle, hoch, runter, links, rechts oder eine durch Kommas getrennte Kombination davon wie runter, rechts. Definiert die Richtung, für die das Scrollen aktiviert oder deaktiviert wird.
//Deaktivierung des gesamten Tastatur-Scrollens
$.fn.fullpage.setKeyboardScrolling(false);

//Deaktivierung des Scrollens nach unten über die Tastatur
$.fn.fullpage.setKeyboardScrolling(false, 'nach unten');

//Deaktivierung des Scrollens per Tastatur nach unten und rechts
$.fn.fullpage.setKeyboardScrolling(false, 'nach unten, nach rechts');
setRecordHistory(boolean)
Demo Definiert, ob der Verlauf für jede Hash-Änderung in der URL aufgezeichnet werden soll.

$.fn.fullpage.setRecordHistory(false);
setzeScrollingSpeed(Millisekunden)
Demo Definiert die Scrollgeschwindigkeit in Millisekunden.

$.fn.fullpage.setScrollingSpeed(700);
zerstören (Typ)
Demo Zerstört die Plugin-Ereignisse und optional dessen HTML-Markup und -Stile. Ideal zur Verwendung, wenn AJAX zum Laden von Inhalten verwendet wird.

Typ: (optionaler Parameter) kann leer oder „alle“ sein. Wenn „alle“ übergeben wird, werden die von fullpage.js verwendeten HTML-Markups und Stile entfernt. Auf diese Weise bleibt das ursprüngliche HTML-Markup erhalten, das vor jeder Plugin-Änderung verwendet wurde.
//Zerstörung aller von fullPage.js erstellten Javascript-Ereignisse (Scrollen, Hash-Änderungen in der URL ...)
$.fn.fullpage.destroy();

//Zerstörung aller Javascript-Ereignisse und aller von fullPage.js an Ihrer ursprünglichen HTML-Auszeichnung vorgenommenen Änderungen.
$.fn.fullpage.destroy('alle');
neu erstellen()
Aktualisiert die DOM-Struktur, um sie an die neue Fenstergröße oder den Inhalt anzupassen. Ideal in Kombination mit AJAX-Aufrufen oder externen Änderungen in der DOM-Struktur der Site, insbesondere bei Verwendung von scrollOverflow:true.

$.fn.fullpage.reBuild();
setResponsive(boolean)
Demo Legt den responsiven Modus der Seite fest. Wenn dieser Wert auf true gesetzt ist, wird das automatische Scrollen deaktiviert und das Ergebnis ist genau dasselbe wie beim Auslösen der Optionen responsiveWidth oder responsiveHeight.

$.fn.fullpage.setResponsive(true);
responsiveSlides.toSections()
Erweiterung von fullpage.js. Erfordert fullpage.js >= 2.8.5. Wandelt horizontale Folien in vertikale Abschnitte um.

$.fn.fullpage.responsiveSlides.toSections();
responsiveSlides.toSlides()
Erweiterung von fullpage.js. Erfordert fullpage.js >= 2.8.5. Wandelt die ursprünglichen Folien (jetzt in vertikale Abschnitte umgewandelt) wieder in horizontale Folien um.

$.fn.fullpage.responsiveSlides.toSlides();
Rückrufe
Demo. Hier können Sie sie in Aktion sehen.

afterLoad (AnkerLink, Index)
Der Rückruf wird ausgelöst, sobald die Abschnitte geladen wurden, nachdem das Scrollen beendet ist. Parameter:

AnchorLink: AnchorLink, der dem Abschnitt entspricht.
Index: Index des Abschnitts. Beginnend bei 1.
Falls im Plugin keine Ankerlinks definiert sind, kann nur der Indexparameter verwendet werden.

Beispiel:

$('#volleSeite').volleSeite({
    Anker: ['ersteSeite', 'zweiteSeite', 'dritteSeite', 'vierteSeite', 'letzteSeite'],

    nach Laden: Funktion (Ankerlink, Index) {
        var geladener Abschnitt = $(dieser);

        //mit Index
        wenn(index == 3){
            alert("Abschnitt 3 wurde geladen");
        }

        //mit AnchorLink
        wenn(anchorLink == 'zweite Folie'){
            alert("Abschnitt 2 wurde geladen");
        }
    }
});
onLeave (Index, nächsterIndex, Richtung)
Dieser Rückruf wird ausgelöst, sobald der Benutzer beim Übergang zum neuen Abschnitt einen Abschnitt verlässt. Wenn Sie „false“ zurückgeben, wird die Verschiebung abgebrochen, bevor sie stattfindet.

Parameter:

Index: Index des verlassenen Abschnitts. Beginnend bei 1.
nextIndex: Index des Zielabschnitts. Beginnend bei 1.
Richtung: Je nach Bildlaufrichtung werden die Werte nach oben oder unten verschoben.
Beispiel:

$('#volleSeite').volleSeite({
    beimVerlassen: Funktion(Index, nächsterIndex, Richtung){
        var leavingSection = $(dieser);

        //nach dem Verlassen von Abschnitt 2
        wenn(index == 2 && direction =='nach unten'){
            alert("Gehe zu Abschnitt 3!");
        }

        sonst wenn (Index == 2 und Richtung == 'nach oben') {
            alert("Gehe zu Abschnitt 1!");
        }
    }
});
Abbrechen des Scrollvorgangs, bevor er stattfindet
Sie können das Scrollen abbrechen, indem Sie beim onLeave-Rückruf „false“ zurückgeben:

$('#volleSeite').volleSeite({
    beimVerlassen: Funktion(Index, nächsterIndex, Richtung){
        //es wird nicht gescrollt, wenn das Ziel der 3. Abschnitt ist
        wenn(nächsterIndex == 3){
            gibt false zurück;
        }
    }
});
nachRender()
Dieser Rückruf wird unmittelbar nach der Generierung der Seitenstruktur ausgelöst. Mit diesem Rückruf können Sie andere Plugins initialisieren oder Code auslösen, der die Bereitschaft des Dokuments erfordert (da dieses Plugin das DOM ändert, um die resultierende Struktur zu erstellen). Weitere Informationen finden Sie in den FAQs.

Beispiel:

$('#volleSeite').volleSeite({
    nachRender: function(){
        var pluginContainer = $(dies);
        alert("Die resultierende DOM-Struktur ist bereit");
    }
});
nachGrößenänderung()
Dieser Rückruf wird nach der Größenänderung des Browserfensters ausgelöst. Direkt nachdem die Abschnitte in der Größe geändert wurden.

Beispiel:

$('#volleSeite').volleSeite({
    nachGrößenänderung: Funktion(){
        var pluginContainer = $(dies);
        alert("Die Größenanpassung der Abschnitte ist abgeschlossen");
    }
});
nachResponsive(istResponsive)
Dieser Rückruf wird ausgelöst, nachdem fullpage.js vom normalen in den responsiven Modus oder vom responsiven Modus in den normalen Modus wechselt.

Parameter:

isResponsive: Boolescher Wert, der bestimmt, ob in den Reaktionsmodus gewechselt wird (true) oder in den Normalmodus zurückkehrt (false).
Beispiel:

$('#volleSeite').volleSeite({
    nachResponsive: Funktion(istResponsive){
        alert("Ist reaktiv: " + isResponsive);
    }
});
afterSlideLoad (AnkerLink, Index, Folienanker, Folienindex)
Callback, der ausgelöst wird, sobald die Folie eines Abschnitts geladen wurde, nachdem das Scrollen beendet wurde. Parameter:

AnchorLink: AnchorLink, der dem Abschnitt entspricht.
Index: Index des Abschnitts. Beginnend bei 1.
slideAnchor: Anker, der der Folie entspricht (falls vorhanden)
slideIndex: Index der Folie. Beginnend bei 1. (die Standardfolie zählt nicht als Folie, sondern als Abschnitt)
Falls für die Folie oder Folien keine Ankerlinks definiert sind, kann nur der Parameter slideIndex verwendet werden. Beispiel:

$('#volleSeite').volleSeite({
    Anker: ['ersteSeite', 'zweiteSeite', 'dritteSeite', 'vierteSeite', 'letzteSeite'],

    afterSlideLoad: Funktion (AnkerLink, Index, Folienanker, Folienindex) {
        var geladene Folie = $(diese);

        //erste Folie des zweiten Abschnitts
        wenn(anchorLink == 'zweiteSeite' && slideIndex == 1){
            alert("Erste Folie geladen");
        }

        //zweite Folie des zweiten Abschnitts (vorausgesetzt #secondSlide ist die
        //Anker für die zweite Folie)
        wenn(index == 2 && slideIndex == 'zweiteFolie'){
            alert("Zweite Folie geladen");
        }
    }
});
onSlideLeave (Ankerlink, Index, Folienindex, Richtung, nächster Folienindex)
Dieser Rückruf wird ausgelöst, wenn der Benutzer beim Übergang zur neuen Folie eine Folie verlässt, um zu einer anderen zu wechseln. Wenn false zurückgegeben wird, wird der Wechsel abgebrochen, bevor er stattfindet.

Parameter:

AnchorLink: AnchorLink, der dem Abschnitt entspricht.
Index: Index des Abschnitts. Beginnend bei 1.
slideIndex: Index der Folie. Beginnt bei 0.
Richtung: Nimmt die Werte je nach Scrollrichtung rechts oder links an.
nextSlideIndex: Index der Zielfolie. Beginnt bei 0.
Beispiel:

$('#volleSeite').volleSeite({
    onSlideLeave: Funktion (AnkerLink, Index, Folienindex, Richtung, nächster Folienindex) {
        var leavingSlide = $(dies);

        //die erste Folie des 2. Abschnitts nach rechts verschieben
        wenn (Index == 2 && SlideIndex == 0 && Richtung == 'rechts') {
            alert("Verlasse die erste Folie!!");
        }

        //die 3. Folie des 2. Abschnitts nach links verschieben
        wenn(index == 2 && slideIndex == 2 && direction == 'links'){
            alert("Gehe zu Folie 2!");
        }
    }
});
Einen Umzug stornieren, bevor er stattfindet
Sie können eine Bewegung abbrechen, indem Sie beim onSlideLeave-Callback false zurückgeben. Dasselbe wie beim Abbrechen einer Bewegung mit onLeave.