Je viens de construire le site Web de l'entreprise et de faire défiler le plein écran, ce qui a considérablement amélioré l'expérience de navigation du site officiel. Résumons donc la méthode d'utilisation de FullPage.js. Bienvenue pour me corriger
1. Introduction à fullpage.js
FullPage.js est un ensemble de plug-ins JS qui implémentent le défilement complet du navigateur. De nombreux sites Web l'utilisent désormais pour obtenir une meilleure expérience de navigation.
Fonctions qui peuvent être atteintes:
• Prise en charge du contrôle avant et arrière et clavier
• Plusieurs fonctions de rappel
• Prise en charge des événements de téléphone mobile et de tablette Touch
• Soutenir les animations CSS3
• Support Zoom de la fenêtre
• Réglage automatique lorsque la fenêtre zoom
• Peut définir la largeur de défilement, la couleur d'arrière-plan, la vitesse de défilement, les options de boucle, les rappels, l'alignement du texte, etc.
2. Téléchargement du plugin
npm | npm installer fullpage.js
bower | bower installer 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: vous devez d'abord introduire jQuery, puis introduire FullPage. Lorsque j'ai commencé à écrire une démo, l'effet n'a pas été réalisé en raison du mauvais ordre et de l'erreur du navigateur dans FullPage.js. JQUERY n'est pas défini.
4. Écrivez le code HTML
<div id = "fullpage"> <div> section1 </div> <div> section2 </div> <div> section3 </div> <div> section4 </div> </div>
Tout le contenu est inclus dans la div avec le nom ID FullPage, et vous ne pouvez pas l'ajouter au corps.
L'élément div avec le nom de classe .Section est une seule page. Le remplacement entre différentes pages peut être contrôlé via la roue de la souris et le clavier, et la navigation de liste peut également être définie.
En même temps, si vous souhaitez faire un effet de coupe d'écran horizontal dans une page, vous pouvez ajouter Div.Slide dans Div.Section. Le code est le suivant:
<div> <div> Slide 1 </div> <div> Slide 2 </div> <div> Slide 3 </div> <div> Slide 4 </div> </div>
5. Initialiser la pleinepage
$ (document) .ready (function () {$ ('# fullpage'). fullpage ({..... // Options pour plus de détails, veuillez vous référer à https://github.com/alvarotrigo/fullpage.js/});});Configuration de la navigation sur la barre latérale
Cette navigation est généralement disponible sur la conception du site Web. Le style de navigation par défaut de FullPage est de petits points noirs, et il prend également en charge la définition d'autres styles.
<ul id="myMenu"> <li data-menuanchor="firstPage"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#secondPage">Second Section </a> </li> <li data-menuanchor = "Quatrithpage"> <a href = "# quatrième"> Quatrième section </a> </li>
#MyMenu {position: fixe; ...} $ ('# fullpage'). FullPage ({ancrages: ['FirstPage', 'SecondPage', 'Thirdpage', 'Quatrethpage', 'Lastpage'], menu: '#MyMenu'});6. Problèmes rencontrés et solutions
Une fois le site Web terminé, j'ai découvert que je venais d'entrer sur la page et avant que le fichier FullPage.js ne soit initialisé, le DOM CSS se chargeait, et tous les contenus de style affichés seraient pressés ensemble et seraient restaurés après le chargement. Si le site Web est optimisé et que la vitesse Internet est très puissante, cette période sera courte, mais elle apportera toujours une mauvaise expérience utilisateur.
Alors essayez diverses solutions:
1.Div.Section
Section {débordement: caché}
Après les tests, cette méthode n'a aucune utilité.
2. Définissez un masque vide, seul le masque s'affiche avant la fin de toutes les pages, le contenu du thème est masqué et après le chargement, le masque d'affichage de contenu est supprimé. Bien sûr, vous pouvez également configurer du contenu lié au site Web dans la couche de masque.
Démo de méthode d'implémentation spécifique:
<Html> <A-head> <méta http-equiv = "contenu-type" contenu = "text / html; charset = gb2312"> <ititle> un document intitulé </ title> <script linguisse = "javascript" type = "text / javascrip document.getElementByIdx ("ShowContent"). Style.display = status1; document.getElementByIdx ("showload"). style.display = status2; } </script> </head><body onLoad='showAllContent("","none")'><div id="showLoad" style="z-index:2; display:block; width:auto; height:auto;">The page is loading...</div><div id="showContent" style="z-index:1; ">//The content to be displayed in the end </div>
<Script> ShowallContent ("None", ""); </script>
</docy>
</html>
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.