De nos jours, de plus en plus de sites sont conçus selon l'approche d'une seule page (appelés sites d'une page ou une page). Dans cet article, nous allons explorer comment créer une telle expérience pour un site de démonstration en tirant parti de fullPage.js.. 

Regardez ce que nous allons construire sur cette démo de Codepen. En outre, tous les fichiers de cette démo sont disponibles sur ce référentiel Github..

Qu'est-ce que fullPage.js?

fullPage.js est un plugin basé sur jQuery qui nous permet de créer des sites Web à défilement d’une page. Créé par le développeur Web Alvaro Trigo, comme nous le verrons dans les prochaines sections, il propose différentes options de personnalisation.. 

De plus, ce plugin fournit une documentation bien organisée avec de nombreux exemples pratiques.. 

Heureusement, cela fonctionne non seulement dans tous les navigateurs modernes, mais aussi dans certains exemples plus anciens comme IE 8 et Opera 12..  

Enfin, vous voudrez peut-être jeter un coup d’œil à sa version Wordpress.

Débuter avec fullPage.js

Pour commencer à utiliser fullPage, vous devez télécharger et installer les fichiers suivants dans votre projet:

• La bibliothèque jQuery (≥1.6.0)
• le jquery.fullPage.css Fichier CSS
  
• le jquery.fullPage.js Fichier JS ou sa version abrégée (c.-à-d.. jquery.fullPage.min.js)
  

Vous pouvez récupérer une copie de ces fichiers en visitant le dépôt Github, en utilisant un gestionnaire de packages (par exemple, Bower) ou en chargeant les ressources nécessaires via un CDN (par exemple, cdnjs). Pour ce tutoriel, nous choisirons la dernière option.

Placez un lien vers le fichier CSS dans le  de votre document HTML:

… Et les scripts JS avant la fermeture étiquette:

Maintenant, nous sommes prêts à plonger plus profondément dans le plugin!

Création de sections de page complète

Tout d'abord, nous devons spécifier les sections de notre site. Pour ce faire, nous assignons le section classe aux éléments cibles et les envelopper dans un conteneur ayant un identifiant unique. Plus tard, cet identifiant sera utilisé pour initialiser une instance de fullPage.

Par défaut, le plugin considère la première section comme étant la section active. Mais, si nous voulons, nous pouvons changer ce comportement en ajoutant le actif classe à la section désirée. 

Voici la structure HTML requise pour notre exemple:

 
 
fullPage.js
 
Ceci est la première section
 
 
Sauter dans la dernière diapositive
  
 
  
 
  
 
  
 
  
 

Notez que toutes les sections partagent un nom de classe commun (i.e. défilement vertical) que nous avons choisi d’être différent de celui prédéfini (c.-à-d.. section). Ceci étant le cas, nous devons informer le plugin de ce changement pendant le processus d'initialisation..

Création de diapositives horizontales

Chacune de ces sections empilées verticalement peut éventuellement être un curseur horizontal avec une ou plusieurs diapositives. Pour identifier les diapositives, nous appliquons le glissades classer aux éléments cibles et les imbriquer dans la section correspondante.

En outre, il est important de mentionner que, techniquement, la première diapositive est égale à la section parent. Nous examinerons ce comportement assez tôt!   

Retour à notre exemple, l'extrait de code ci-dessous montre comment nous avons configuré deux diapositives dans notre cinquième section:

 
 
fullPage.js
 
Ceci est la cinquième section et il contient la première diapositive
 
 
 
fullPage.js
 
Ceci est la deuxième diapositive
 
Je vous remercie!
 
 

Encore une fois, comme vous pouvez le constater, nous avons attribué à nos diapositives un nom de classe personnalisé (i.e. défilement horizontal).

Contrôle de l'apparence du site

Nous pouvons contrôler l'apparence de nos sections et diapositives en tirant parti des paramètres de configuration disponibles. L'un de ces paramètres est le sectionColor propriété qui nous donne un moyen facile de définir le CSS Couleur de fond propriété pour chaque section.

De plus, nous pouvons définir nos propres styles afin de personnaliser davantage les pages. Par exemple, imaginons que nous voulions appliquer une image d’arrière-plan complète à la deuxième section. Voici comment nous pourrions y arriver:

section: nth-of-type (2) background: url ('https://unsplash.it/1910/1221?image=626') no-repeat center / cover; 

Personnaliser les options de navigation

Le plugin offre de nombreuses options intégrées pour se déplacer entre les sections et les diapositives. Certaines de ces options sont activées par défaut (molette de la souris et clavier, par exemple), tandis que d’autres sont déclenchées manuellement via l’objet de configuration (par exemple, des points circulaires).. 

Dans notre projet, nous souhaitons ajouter une navigation supplémentaire sous forme de points. De plus, nous choisissons de masquer les flèches gauche et droite qui apparaissent normalement sur le curseur. Ainsi, après avoir activé la navigation par points, nous pouvons modifier son apparence en écrasant les styles par défaut. Voici les nouvelles règles:

# fp-nav est un intervalle, .fp-slidesNav ul est un intervalle fond: blanc; largeur: 8px; hauteur: 8px; marge: -4px 0 0 -4px;  # fp-nav ul.intervalle actif, .fp-SlidesNav ul.intervalle actif, # fp-nav ul li: survolez un intervalle.active, .fp-slidesNav ul li: survolez a.active span width : 16px; hauteur: 16px; marge: -8px 0 0 -8px; fond: transparent; taille de la boîte: boîte-frontière; bordure: solide 1px # 24221F; 

Et ci-dessous est une capture d'écran qui montre les modifications que nous avons apportées:

Par défaut, vs styles personnalisés

Veuillez noter que nous incluons les règles ci-dessus dans notre feuille de style personnalisée, évitant ainsi de modifier le fichier CSS du plugin..

Création de liens vers des sections et des diapositives

fullPage.js nous permet de modifier l'URL de notre site au fur et à mesure que nous parcourons les différentes sections. Pour ce faire, nous utilisons le les ancres paramètre. Plus spécifiquement, ce paramètre est un tableau contenant les liens d'ancrage devant être affichés dans l'URL de chaque section. Par exemple, dans notre exemple, nous spécifions les liens d'ancrage suivants (qui devraient être uniques):

ancres: ['firstSection', 'secondSection', 'thirdSection', 'thirdSection', 'fifthSection']

Ceci fait, lorsque nous visitons la première section, l’URL du site aura la #Première section identifiant à la fin, à la seconde l'URL se terminera par #secondSection etc.

De la même manière, le plugin modifie également l'URL pendant le défilement des diapositives. À ce stade cependant, nous devons nous rappeler que la première diapositive (qui a un index de 0) est la section parent correspondante. Dans cet esprit, dans notre projet, lorsque nous nous trouverons dans la première diapositive de la cinquième section, l’URL se terminera par le texte suivant: #fifthSection lien d'ancrage. Le chargement de la deuxième diapositive de la même section déclenchera une URL se terminant par # cinquièmeSection / 1 parce que la deuxième diapositive (qui a un index de 1) est en fait notre "première" diapositive.

Il est à noter que nous pouvons modifier les ancres de nos diapositives en ajoutant le ancre de données attribuez-leur les noms d'ancre souhaités (qui doivent également être uniques), comme dans l'exemple suivant:

Remarque: Pour voir les URL changer au fur et à mesure que vous faites défiler, consultez la vue de débogage de notre démo.

Liaison de menus à des sections et à des diapositives

Pour mieux comprendre comment lier un menu à la page complète, examinons notre en-tête fixe. La capture d'écran ci-dessous montre son apparence:

Et le HTML:

 
 Votre logo 
      

Tant que l'icône du menu hamburger est déclenchée, la superposition du menu principal apparaît:

Voici le code lié à ce menu:

Donc, pour que fullPage connaisse le menu, nous devons l’enregistrer en utilisant le menu propriété de configuration. Ensuite, nous devons relier les éléments de menu aux sections appropriées. Pour cela, nous ajoutons le data-menuanchor attribuer à nos articles avec les liens respectifs que les valeurs. Tant que ces valeurs correspondent, le plugin ajoute le actif classe (comme nous faisons défiler) à l'élément de menu correspondant. 

Notez que le plugin n’ajoute pas encore la actif classe aux diapositives. Pour résoudre ce problème, nous pouvons utiliser soit jQuery (meilleure solution) ou CSS. Dans notre exemple, nous résolvons ce problème en ajoutant la règle CSS suivante:

body.fp-visualisation-fifthSection-1 #menu li: dernier-enfant a background: # 453659; 

Voir le résultat ci-dessous:

En réalité, nous n’avons pas ajouté le actif classe à la deuxième diapositive. En profitant de la différence corps classes que le plugin ajoute à chaque section et diapositive, nous donnons simplement à cet élément la modes du actif classe.

Remarque: Nous ne nous concentrerons pas davantage sur le fonctionnement de ce menu car il dépasse le cadre de ce didacticiel..

Rappel de tir pour les sections

le afterLoad callback est déclenché une fois qu'une section est chargée et le en congé rappel une fois qu'un utilisateur le quitte.

Dans notre projet, nous masquons la navigation par points verticale lorsque la cinquième section est chargée:

Section4, puis Section5 sans points

Voici comment nous y parvenons:

afterLoad: function (anchorLink, index) if (index == 5) $ ('# fp-nav'). hide ();  onLeave: function (index, nextIndex, direction) if (index == 5) $ ('# fp-nav'). show (); 

Rappel de tir pour les diapositives

le afterSlideLoad Le rappel est déclenché quand une diapositive est chargée et la onSlideLeave rappel lorsque l'utilisateur le quitte.

Dans notre cas, nous nous concentrons sur la deuxième diapositive pour effectuer un certain nombre d’actions différentes. Par exemple, une fois la diapositive chargée, nous désactivons la possibilité de faire défiler vers le haut. De plus, nous changeons le Couleur de fond propriété de cette diapositive ainsi que l'apparence des éléments qui lui appartiennent.

Une partie du code que nous utilisons est indiquée ci-dessous:

afterSlideLoad: fonction (anchorLink, index, slideAnchor, slideIndex) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (false, 'up'); $ (this) .css ('arrière-plan', '# 374140'); $ (this) .find ('h2'). css ('color', 'white'); $ (this) .find ('h3'). css ('color', 'white'); $ (this) .find ('p'). css ('color': '# DC3522', 'opacity': 1, 'transformer': 'translateY (0)');  onSlideLeave: fonction (anchorLink, index, slideIndex, direction) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (true, 'up'); 

Initialiser le plugin

Il s’agit de la dernière étape requise pour déclencher la fonctionnalité de fullPage. Ici, nous transmettons dans le cadre de l’objet de configuration toutes nos personnalisations. Regardez l'extrait de code correspondant ci-dessous:

$ ('# fullpage'). fullpage (sectionSelector: '.vertical-scrolling', slideSelector: '.horizontal-scrolling', controlArrows: false // d'autres options ici);

Conclusion

Dans ce didacticiel, nous avons apprécié une rapide visite guidée du plugin fullPage.js jQuery et avons appris à créer un site de défilement plein page réactif. Il est important de comprendre que ce type de site Web ne convient pas à tous les cas. Outre leur design attrayant, ils sont soumis à de nombreuses restrictions et leur maintenabilité peut être difficile, en particulier pour les sites dynamiques. De plus, ce format peut causer des complications avec le référencement.

Prochaines étapes

Si vous souhaitez utiliser le site de démonstration comme base d'expérimentation du plugin, je vous suggère les défis suivants:

• Incorporez l'excellente bibliothèque animate.css au projet et essayez de créer des animations à base de défilement..
• Utilisez vos connaissances jQuery pour activer la actif classe à la deuxième diapositive (voir Liaison du menu aux sections et aux diapositives section).

Enfin, si vous avez de l'expérience avec des sites d'une page, n'hésitez pas à nous faire part de vos réflexions dans les commentaires ci-dessous.!