# fullPage.js ![preview](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png) ![compatibility](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/compatible.png)

English | Español | Français | Pусский | 中文 | 한국어 | Português Brasileiro

Disponible pour Vue, React et Angular.

--- ![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.15-brightgreen.svg) [![License](https://img.shields.io/badge/License-GPL-blue.svg)](https://www.gnu.org/licenses/gpl-3.0.html) [![PayPal Donate](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/alvarotrigo/9.95) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/fullpage.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/fullpage.js) [![Minzipped Size](https://img.shields.io/bundlephobia/minzip/fullpage.js)](https://bundlephobia.com/package/fullpage.js)   **|**   *Created by [@imac2](https://twitter.com/imac2)* - [Demo en ligne](https://alvarotrigo.com/fullPage/) | [Codepen](https://codepen.io/alvarotrigo/pen/qqabrp) - [Wordpress plugin for Gutenberg](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/) and [WordPress pluging fo Elementor](https://alvarotrigo.com/fullPage/wordpress-plugin-elementor/) - [Thème Wordpress](https://alvarotrigo.com/fullPage/utils/wordpress.html) - [Extensions fullpage.js](https://alvarotrigo.com/fullPage/extensions/) - [Questions fréquemment demandées](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions) - [[Migration from fullPage v3 to fullpage v4]](https://alvarotrigo.com/fullPage/help/migration-from-fullpage-3/) --- Une bibliothèque simple et facile à utiliser pour créer des sites Web qui défile en plein écran (aussi connus sous le nom de sites web d'une seule page ou d'une page). Elle permet la création de sites Web à défilement en plein écran, ainsi que l'ajout de quelques carousel panoramique à l'intérieur des sections du site. - [Introduction](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#introduction) - [Compatibilité](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#compatibilité) - [Licence](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#licence) - [Usage](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#usage) - [Créer des liens vers des sections ou des diapositives](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#cr%C3%A9er-des-liens-vers-des-sections-ou-des-diapositives) - [Créer des sections plus petites ou plus grandes](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#créer-des-sections-plus-petites-ou-plus-grandes) - [Classes d'états ajoutées par fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#classes-d%C3%A9tats-ajout%C3%A9es-par-fullpagejs) - [Lazy loading](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#lazy-loading) - [Lecture automatique/pause automatique des médias intégrés](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#lecture-automatiquepause-automatique-des-médias-intégrés) - [Utiliser des extensions](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#utiliser-des-extensions) - [Options](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#options) - [Méthodes](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#méthodes) - [Callbacks](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#callbacks) - [Signaler les problèmes](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#signaler-les-problèmes) - [Contribuer à fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#contribuer-à-fullpagejs) - [Changelog](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#changelog) - [Build tasks](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#build-tasks) - [Ressources](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#ressources) - [Qui utilise fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#qui-utilise-fullpagejs) - [Dons](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#dons) - [Sponsors](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#sponsors) ## Introduction Les suggestions sont les bienvenues, non seulement pour les demandes de fonctionnalités mais aussi pour l'amélioration du style de codage. Faisons de cette bibliothèque une grande bibliothèque pour rendre la vie des gens plus facile ! ## Compatibilité fullPage.js est entièrement fonctionnel sur tous les navigateurs modernes & IE 11. Il fournit également un support tactile pour les téléphones mobiles, les tablettes et les ordinateurs à écran tactile. Remerciements particuliers à [Browserstack](https://www.browserstack.com/) pour son soutien à fullpage.js. ## Licence ### Licence commercial Si vous voulez utiliser fullPage pour développer des sites, thèmes, projets et applications non open-source, la licence commerciale est la licence appropriée. Avec cette option, votre code source reste propriétaire. Ce qui signifie que vous n'aurez pas à changer tout le code source de votre application pour une licence open source. [Achat d'une licence commerciale pleine page](https://alvarotrigo.com/fullPage/pricing/) ### Licence open-source Si vous créez une application open source sous une licence compatible avec la [licence GNU GPL v3](https://www.gnu.org/licenses/gpl-3.0.html), vous pouvez utiliser fullPage sous les termes de la GPLv3. **You will have to provide a prominent notice that fullPage.js is in use. Les commentaires de crédit dans les fichiers JavaScript et CSS doivent être conservés intacts.** (même après la combinaison ou la minification) [En savoir plus sur la licence de fullPage](https://alvarotrigo.com/fullPage/pricing/). ## Usage Comme vous pouvez le voir dans les fichiers d'exemple, vous devrez inclure : - Le fichier JavaScript `fullpage.js` (ou sa version minifié `fullpage.min.js`) - Le fichier css `fullpage.css`. **Optionnellement**, lorsque vous utilisez `css3:false`, vous pouvez ajouter le fichier [easings file](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/easings.min.js) au cas où vous voudriez utiliser d'autres effets d'assouplissement que celui inclus dans la bibliothèque (`easeInOutCubic`). #### Installer avec bower ou npm **En option**, vous pouvez installer fullPage.js avec bower ou npm si vous préférez : Terminal : ```shell // Avec bower bower install fullpage.js // Avec npm npm installer fullpage.js ``` #### Y compris les fichiers : ```html ``` Vous utilisez Webpack, Browserify ou Require.js ? Vérifiez comment utiliser fullPage.js avec les chargeurs de modules . ### Utilisation facultative du CDN Si vous préférez utiliser un CDN pour charger les fichiers nécessaires, fullPage.js est dans CDNJS : https://cdnjs.com/libraries/fullPage.js ### Structure HTML requise Commencez votre document HTML avec la déclaration obligatoire[déclaration DOCTYPE HTML](https://www.corelangs.com/html/introduction/doctype.html) sur la 1ère ligne de votre code HTML. Sinon, vous pourriez avoir des problèmes avec la hauteur des sections. Les exemples fournis utilisent HTML 5 doctype ``. Chaque section sera définie avec un élément contenant la classe `section`. La section active par défaut sera la première section, qui sera considérée comme la page d'accueil. Les sections doivent être placées dans un emballage (`
` dans ce cas). L'emballage ne peut pas être l'élément `body`. ```html
Some section
Some section
Some section
Some section
``` Si vous voulez définir un point de départ différent de la première section ou de la première diapositive d'une section, ajoutez simplement la classe `active` à la section et à la diapositive que vous voulez charger en premier. ```html
Some section
``` Afin de créer un curseur paysage dans une section, chaque diapositive sera définie par défaut avec un élément contenant la classe `slide`: ```html
Slide 1
Slide 2
Slide 3
Slide 4
``` Vous pouvez voir un exemple entièrement fonctionnel de la structure HTML dans le [fichier `simple.html`](https://github.com/alvarotrigo/fullPage.js/blob/master/examples/simple.html). ### Initialisation #### Initialisation avec Vanilla Javascript Tout ce que vous avez à faire est d'appeler fullPage.js avant de fermer la balise ``. ```javascript new fullpage('#fullpage', { //options here autoScrolling:true, scrollHorizontally: true }); ``` #### Initialisation avec jQuery Vous pouvez utiliser fullpage.js comme plugin jQuery si vous le souhaitez ! ```javascript $(document).ready(function() { $('#fullpage').fullpage({ //options here autoScrolling:true, scrollHorizontally: true }); //methods $.fn.fullpage.setAllowScrolling(false); }); ``` Les fonctions et méthodes peuvent toujours être appelées de la manière jQuery, comme [dans fullPage.js v2.X](https://github.com/alvarotrigo/fullPage.js/tree/2.9.7). #### Exemple de Vanille JS avec toutes les options Une initialisation plus complexe avec toutes les options définies pourrait ressembler à ceci : ```javascript var myFullpage = new fullpage('#fullpage', { // Navigation menu: '#menu', lockAnchors: false, anchors:['firstPage', 'secondPage'], navigation: false, navigationPosition: 'right', navigationTooltips: ['firstSlide', 'secondSlide'], showActiveTooltip: false, slidesNavigation: false, slidesNavPosition: 'bottom', // Défilement css3: true, scrollingSpeed: 700, autoScrolling: true, fitToSection: true, fitToSectionDelay: 600, scrollBar: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopBottom: false, loopTop: false, loopHorizontal: true, continuousVertical: false, continuousHorizontal: false, scrollHorizontally: false, interlockedSlides: false, dragAndMove: false, offsetSections: false, resetSliders: false, fadingEffect: false, normalScrollElements: '#element1, .element2', scrollOverflow: true, scrollOverflowMacStyle: false, scrollOverflowReset: false, touchSensitivity: 15, bigSectionsDestination: null, // Accessibilité keyboardScrolling: true, animateAnchor: true, recordHistory: true, // Design controlArrows: true, controlArrowsHTML: [ '
', '
' ], verticalCentered: true, sectionsColor : ['#ccc', '#fff'], paddingTop: '3em', paddingBottom: '10px', fixedElements: '#header, .footer', responsiveWidth: 0, responsiveHeight: 0, responsiveSlides: false, parallax: false, parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'}, dropEffect: false, dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999}, waterEffect: false, waterEffectOptions: { animateContent: true, animateOnMouseMove: true}, cards: false, cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true}, // Sélecteurs personnalisés sectionSelector: '.section', slideSelector: '.slide', lazyLoading: true, observer: true, credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'}, // Événements beforeLeave: function(origin, destination, direction, trigger){}, onLeave: function(origin, destination, direction, trigger){}, afterLoad: function(origin, destination, direction, trigger){}, afterRender: function(){}, afterResize: function(width, height){}, afterReBuild: function(){}, afterResponsive: function(isResponsive){}, afterSlideLoad: function(section, origin, destination, direction, trigger){}, onSlideLeave: function(section, origin, destination, direction, trigger){}, onScrollOverflow: function(section, slide, position, direction){} }); ``` ### Créer des liens vers des sections ou des diapositives Si vous utilisez fullPage.js avec des liens d'ancrage pour les sections (en utilisant l'option `anchors` ou l'attribut `data-anchor` dans chaque section), alors vous pourrez également utiliser des liens d'ancrage pour naviguer directement vers une certaine diapositive dans une section. Ceci serait un exemple d'un lien avec un ancre : https://alvarotrigo.com/fullPage/#secondPage/2 (qui est l'URL que vous verrez une fois que vous accéderez à cette section/diapositive manuellement) Remarquez que la dernière partie de l'URL se termine par `#secondPage/2`. Avoir l'initialisation suivante : ```javascript new fullpage('#fullpage', { ancres :['firstPage','secondPage','thirdPage'] }) ; ``` L'ancre à la fin de l'URL `#secondPage/2` définit respectivement la section et la diapositive de destination. Dans l'URL précédente, la section de destination sera celle définie avec l'ancre `secondPage` et la diapositive sera la 2ème diapositive, car nous utilisons l'index `2` pour cela. (la première diapositive d'une section a l'index 0, car techniquement c'est une section). Nous aurions pu utiliser une ancre personnalisée pour la diapositive au lieu de son index si nous avions utilisé l'attribut `data-anchor` sur le balisage HTML de cette façon : ```html
Slide 1
Slide 1
Slide 2
slide 3
Slide 4
``` Dans ce dernier cas, l'URL que nous utiliserions serait `#secondPage/slide3`, qui est l'équivalent de notre précédente `#secondPage/2`. Notez que les ancres de section peuvent aussi être définies de la même manière, en utilisant l'attribut `data-anchor`, si aucun tableau `anchors` n'est fourni. **Attention!**, les balises `data-anchor` ne peuvent pas avoir la même valeur que n'importe quel élément ID sur le site (ou élément NAME pour IE). ### Créer des sections plus petites ou plus grandes [Démo](https://codepen.io/alvarotrigo/pen/BKjRYm) fullPage.js fournit un moyen de supprimer la restriction de hauteur complète de ses sections et diapositives. Il est possible de créer des sections dont la hauteur est plus petite ou plus grande que la fenêtre. C'est idéal pour les pieds de page. Il est important de réaliser qu'il n'est pas logique d'avoir toutes vos sections utilisant cette fonctionnalité. S'il y a plus d'une section dans le chargement initial du site, fullPage.js ne défilera pas du tout pour voir la section suivante comme elle sera déjà dans la fenêtre. Pour créer des sections plus petites, utilisez simplement la classe `fp-auto-height` dans la section que vous voulez appliquer. Il prendra alors la hauteur définie par le contenu de votre section/diapositive. ```html
Vue d'ensemble
Auto height
``` ##### Sections de hauteur automatique réactives Une hauteur automatique réactive peut être appliquée en utilisant la classe `fp-auto-haut-responsive`. De cette façon, les sections seront en plein écran jusqu'à ce que le mode réactif soit activé. Ensuite, ils prendront la taille requise par leur contenu, qui peut être plus grand ou plus petit que la fenêtre d'affichage. #### Classes d'états ajoutées par fullpage.js Fullpage.js ajoute plusieurs classes dans différents éléments pour garder une trace de l'état du site : - `active` est ajouté la section visible actuelle et la diapositive. - `active` est ajouté à l'élément de menu courant (si vous utilisez l'option "menu"). - Une classe de la forme `fp-viewing-SECTION-SLIDE` est ajoutée à l'élément `body` du site. (ex :[`fp-viewing-secondPage-0`](https://alvarotrigo.com/fullPage/#secondPage))) Les parties ` SECTION ` et ` SLIDE ` seront les ancres (ou index si aucune ancre n'est fournie) de la section et de la glissière courante. - `fp-responsive` est ajouté à l'élément `body` lorsque l'entrée en mode réactif - `fp-enabled ` est ajouté à l'élément `html` lorsque fullpage.js est activé. (et enlevés lorsqu'ils sont détruits). - `fp-destroyed` est ajouté au conteneur fullpage.js lorsque fullPage.js est détruit. #### Lazy Loading [Demo](https://codepen.io/alvarotrigo/pen/eNLBXo) fullPage.js fournit un moyen de charger paresseusement des images, des vidéos et des éléments audio pour qu'ils ne ralentissent pas le chargement de votre site ou le transfert de données inutilement gaspillé. Si vous utilisez un chargement paresseux, tous ces éléments ne seront chargés qu'en entrant dans la fenêtre d'affichage. Pour activer le lazy loading, il vous suffit de changer votre attribut `src` en `data-src` comme indiqué ci-dessous : ```html ``` Si vous utilisez déjà une autre solution de chargement paresseux qui utilise également `data-src`, vous pouvez désactiver le chargement paresseux de fullPage.js en définissant l'option `lazyLoading : false`. ### Lecture automatique/pause automatique des médias intégrés [Demo](https://codepen.io/alvarotrigo/pen/pXEaaK) **Note** : la fonction de lecture automatique peut ne pas fonctionner sur certains appareils mobiles selon le système d'exploitation et le navigateur (i.e. [Safari on iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/) version < 10.0). ##### Jouer sur la section/charge de diapositives : L'utilisation de l'attribut `autoplay` pour les vidéos ou l'audio, ou du paramètre `autoplay=1` pour les iframes youtube entraînera la lecture de l'élément média au chargement de la page. Pour le lire sur le chargement de sections/diapositives, utilisez à la place l'attribut `data-autoplay`. Par exemple : ```html ``` ##### Pause en congé Les iframes HTML5 `