Exemple d'utilisation du plug-in de défilement plein écran Fullpage.js

Le site Web de l'entreprise vient d'être achevé et grâce au défilement plein écran, l'expérience de navigation sur le site officiel a été considérablement améliorée. Résumons donc les méthodes d'utilisation de fullpage.js. Corrections bienvenues

1. Introduction à fullpage.js

fullpage.js est un ensemble de plug-ins js qui réalisent le défilement plein écran dans les navigateurs. De nombreux sites Web sont désormais tous utilisés pour offrir une meilleure expérience de navigation.
Fonctions possibles :

•Prend en charge le contrôle avant, arrière et clavier
•Fonctions de rappel multiples
•Prend en charge les événements tactiles sur téléphone mobile et tablette
•Prend en charge l'animation CSS3
•Prend en charge la mise à l'échelle de la fenêtre
•S'ajuste automatiquement lorsque la fenêtre est mise à l'échelle
•Peut définir la largeur de défilement, la couleur d'arrière-plan, la vitesse de défilement, les options de cycle, les rappels, l'alignement du texte, etc.

2 .Téléchargement du plug-in

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. Méthode d'introduction du fichier

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

Remarque : Soyez assurez-vous d'introduire d'abord jquery, puis d'introduire fullpage. Lorsque j'ai commencé à écrire la démo, l'effet n'a pas pu être obtenu en raison d'un mauvais ordre. Le navigateur a signalé une erreur indiquant que jquery dans fullpage.js n'était pas défini.

4. Écrivez le code HTML

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

Tout le contenu est contenu dans le div avec le nom d'identification fullpage. Vous ne pouvez pas l'ajouter au corps.
L'élément div avec le nom de classe .section est une seule page. Vous pouvez contrôler le remplacement entre différentes pages via la molette de la souris et le clavier, et vous pouvez également configurer la navigation dans la liste.
En parallèle, si vous souhaitez créer un effet de découpe d'écran horizontale au sein d'une page, vous pouvez ajouter div.slide à div.section. Le code est le suivant :

<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. Initialiser la page complète

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

Définir la navigation dans la barre latérale

Cette navigation est courante dans les conceptions de sites Web. Le style de navigation par défaut en pleine page est un petit point noir, et d'autres styles sont également pris en charge.

<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. Problèmes rencontrés et solutions

Trouvés lors du post-test du site, juste entrez dans la page, avant que le fichier fullpage.js n'ait terminé l'initialisation, le CSS DOM est en cours de chargement à ce moment-là, tout le contenu de style affiché sera regroupé et il sera restauré après le chargement. Si le site Web est optimisé et que la vitesse d'Internet est élevée, cette période de temps sera relativement courte, mais elle apportera quand même une mauvaise expérience utilisateur.

J'ai donc essayé différentes solutions :
1.div.section
section{overflow:hidden}
Après test, cette méthode ne sert à rien.

2. Définissez un masque vide. Seul le masque sera affiché avant que toutes les pages ne soient terminées, et le contenu du thème sera masqué une fois le chargement terminé, le masque d'affichage du contenu sera supprimé. Bien entendu, vous pouvez également définir le contenu lié au site Web dans le calque de masque.

Démo de la méthode de mise en œuvre spécifique :

<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>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde le fera. prend en charge le site Web PHP chinois.

Pour plus d'articles liés aux exemples d'utilisation du plug-in de défilement plein écran fullpage.js, veuillez faire attention au site Web PHP chinois !