Veille Technologique | fullPage.js

Table des matières

Fullpage.js | Librairie Javascript

FullPage.js est une bibliothèque JavaScript qui permet de créer des pages web à défilement vertical ou horizontal en une seule vue. Elle permet de créer des sites web avec une expérience utilisateur immersive, où le contenu est divisé en sections et chaque section occupe la totalité de l’écran.

Afin d’utiliser fullPage.js il suffit d’ajouter cette ligne dans votre projet en ligne ou local :

Et ajouter de même le CSS en question :

Enfin vous pouvez initialisee fullPage.js avec ce code :

$(document).ready(function() {
   $(‘#fullpage’).fullpage({
          sectionsColor: [‘#1bbc9b’, ‘#4BBFC3’, ‘#7BAABE’],
          anchors: [‘section1’, ‘section2’, ‘section3’],
          menu: ‘#menu’,
          scrollingSpeed: 1000
     });
});

Cet exemple initialise FullPage.js sur l’élément avec l’ID fullpage, divise la page en trois sections, attribue des couleurs spécifiques à chaque section, utilise des ancres pour la navigation et définit une vitesse de défilement de 1000 millisecondes par section.

Exemple d'utilisation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="fullpage.css" />
   <title>FullPage.js Exemple</title>
</head>
<body>

   <div id="fullpage">
      <div class="section">
         <h1>Section 1</h1>
         <p>Bienvenue dans la première section.</p>
      </div>
      <div class="section">
         <h1>Section 2</h1>
         <p>Contenu de la deuxième section.</p>
      </div>
      <div class="section">
         <h1>Section 3</h1>
         <p>C'est la dernière section de l'exemple.</p>
      </div>
   </div>

   <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
   <script type="text/javascript" src="fullpage.js"></script>
   <script>
      $(document).ready(function() {
         $('#fullpage').fullpage({
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            anchors: ['section1', 'section2', 'section3'],
            menu: '#menu',
            scrollingSpeed: 1000
         });
      });
   </script>

</body>
</html>

Explication :
- La page est divisée en trois sections (<div class="section">) avec un titre (<h1>) et un paragraphe (<p>) dans chaque section.
- La bibliothèque jQuery est incluse depuis un CDN pour être utilisée par FullPage.js.
- La bibliothèque FullPage.js est incluse avec le fichier JavaScript qui initialise le plugin.
Personnalisation supplémentaire :
- sectionsColor: Définit les couleurs de fond pour chaque section.
- anchors: Définit les ancres utilisées pour la navigation.
- menu: Si vous avez une barre de navigation externe, vous pouvez l’indiquer ici.
- scrollingSpeed: La vitesse de défilement entre les sections.

Alternatives à fullPage.js

ScrollMagic :
- ScrollMagic est une bibliothèque JavaScript qui permet de déclencher des animations basées sur le défilement. Elle offre un contrôle précis sur les animations et peut être utilisée pour créer des pages web interactives.
AOS (Animate On Scroll) :
- AOS est une petite bibliothèque JavaScript qui ajoute des animations de défilement à votre site. Elle est simple à utiliser et propose plusieurs effets d’animation prédéfinis.
PagePiling.js :
- PagePiling.js est une alternative à FullPage.js qui permet de créer des sites web à défilement vertical. Elle offre des options de personnalisation avancées et prend en charge plusieurs effets de transition.
Locomotive Scroll :
- Locomotive Scroll est une bibliothèque JavaScript légère qui prend en charge le défilement parallèle et les animations basées sur le défilement. Elle offre un bon contrôle sur le défilement et la manipulation du DOM.
Sal.js :
- Sal.js est une bibliothèque légère qui ajoute des animations de défilement à vos éléments HTML. Elle offre une configuration simple et prend en charge plusieurs types d’animations.

Avant de choisir une alternative, assurez-vous de vérifier la documentation et de comprendre les fonctionnalités offertes par chaque bibliothèque. Le choix dépendra de vos besoins spécifiques en termes de fonctionnalités, de personnalisation et de performances.

Veille Technologique | fullPage.js | N°7

Fullpage.js | Librairie Javascript

Exemple d'utilisation

Alternatives à fullPage.js

Laisser un commentaire Annuler la réponse