Beispiel für die Verwendung des Fullpage.js-Vollbild-Scroll-Plug-ins

Die Unternehmenswebsite wurde gerade fertiggestellt und durch Scrollen im Vollbildmodus wurde das Surferlebnis auf der offiziellen Website erheblich verbessert. Fassen wir also die Methoden zur Verwendung von fullpage.js zusammen. Korrekturen willkommen

1. Einführung in fullpage.js

fullpage.js ist eine Reihe von js-Plug-Ins, die das Scrollen im Vollbildmodus realisieren In Browsern werden sie alle verwendet, um ein besseres Surferlebnis zu erzielen.
Mögliche Funktionen:

•Unterstützt Vorwärts-, Rückwärts- und Tastatursteuerung
•Mehrere Rückruffunktionen
•Unterstützt Touch-Ereignisse auf Mobiltelefonen und Tablets
•Unterstützt CSS3-Animationen
•Unterstützt die Fensterskalierung
•Passt sich automatisch an, wenn das Fenster skaliert wird
•Kann Bildlaufbreite, Hintergrundfarbe, Bildlaufgeschwindigkeit, Zyklusoptionen, Rückrufe, Textausrichtung usw. festlegen.

2 .Plug-in-Download

npm|npm install fullpage.js
bower|bower install fullpage.js
github|https://github.com/alvarotrigo/fullPage.js/
cdn|https://cdnjs.com/libraries/fullPage.js

3. Dateieinführungsmethode

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

Hinweis: Seien Sie Stellen Sie sicher, dass Sie zuerst jquery und dann fullpage einführen. Als ich mit dem Schreiben der Demo begann, konnte der Effekt aufgrund der falschen Reihenfolge nicht erzielt werden. Der Browser meldete einen Fehler, dass jquery in fullpage.js undefiniert war.

4. HTML-Code schreiben

<div id="fullpage">
    <div class="section">section1</div>
    <div class="section">section2</div>
    <div class="section">section3</div>
    <div class="section">section4</div>
</div>

Der gesamte Inhalt ist im Div mit dem ID-Namen fullpage enthalten. Sie können diesen nicht zum Text hinzufügen.
Das div-Element mit dem Klassennamen .section ist eine einzelne Seite. Sie können das Ersetzen zwischen verschiedenen Seiten über das Mausrad und die Tastatur steuern und auch die Listennavigation einrichten.
Wenn Sie gleichzeitig einen horizontalen Bildschirmausschnitteffekt innerhalb einer Seite erzeugen möchten, können Sie div.slide zu div.section hinzufügen. Der Code lautet wie folgt:

<div class="section">
  <div class="slide"> Slide 1 </div>
  <div class="slide"> Slide 2 </div>
  <div class="slide"> Slide 3 </div>
  <div class="slide"> Slide 4 </div>
</div>

5. Ganzseite initialisieren

$(document).ready(function() {
  $('#fullpage').fullpage(
    {
      .......
      //options 详情参看https://github.com/alvarotrigo/fullPage.js/
    } 
  );
});

Seitenleistennavigation festlegen

Diese Navigation ist in Website-Designs üblich. Der Standardnavigationsstil von Fullpage ist ein kleiner schwarzer Punkt. Es unterstützt auch die Einstellung anderer Stile.

<ul id="myMenu">
      <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
      <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
      <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
      <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

#myMenu{
  position:fixed;
    ...
}
$('#fullpage').fullpage({
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
  menu: '#myMenu'
});

6. Aufgetretene Probleme und Lösungen

Gefunden beim Post-Test der Website, gerade Geben Sie die Seite ein, bevor die Datei fullpage.js die Initialisierung abgeschlossen hat. Zu diesem Zeitpunkt wird das DOM-CSS geladen, der gesamte angezeigte Stilinhalt wird zusammengedrängt und nach dem Laden wiederhergestellt. Wenn die Website optimiert ist und die Internetgeschwindigkeit hoch ist, wird dieser Zeitraum relativ kurz sein, aber dennoch zu einer schlechten Benutzererfahrung führen.
Also habe ich verschiedene Lösungen ausprobiert:
1.div.section
section{overflow:hidden}
Nach dem Testen ist diese Methode nutzlos.

2. Legen Sie eine leere Maske fest, bevor alle Seiten abgeschlossen sind, und der Themeninhalt wird ausgeblendet. Nach Abschluss des Ladevorgangs wird die Inhaltsanzeigemaske entfernt. Natürlich können Sie in der Maskenebene auch Website-bezogene Inhalte festlegen.
Demo der spezifischen Implementierungsmethode:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script language="javascript" type="text/javascript">
        function showAllContent(status1,status2){
         document.getElementByIdx("showContent").style.display=status1;
         document.getElementByIdx("showLoad").style.display=status2;
      }
    </script>
  </head>
<body onLoad=&#39;showAllContent("","none")&#39;>
<div id="showLoad" style="z-index:2; display:block; width:auto; height:auto;">页面加载中......</div>
<div id="showContent" style="z-index:1; ">
//最终要显示的内容<br></div><br><script>showAllContent("none","");</script><br></body><br></html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird, und ich hoffe auch, dass dies für alle hilfreich sein wird Unterstützen Sie die chinesische PHP-Website.

Weitere Artikel zu den Anwendungsbeispielen für das Vollbild-Bildlauf-Plug-in von fullpage.js finden Sie auf der chinesischen PHP-Website!