fullPage.js4.0.31

preview compatibility

Disponible pour Vue, React et Angular.

| Created by @imac2

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.

IntroductionIntroduction

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é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 pour son soutien à fullpage.js.

LicenceLicence

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

Licence open-sourceLicence open-source

Si vous créez une application open source sous une licence compatible avec la licence GNU GPL v3, 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.

UsageUsage

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 au cas où vous voudriez utiliser d'autres effets d'assouplissement que celui inclus dans la bibliothèque (easeInOutCubic).

Installer avec bower ou npmInstaller avec bower ou npm
Installer avec bower ou npm
En option, vous pouvez installer fullPage.js avec bower ou npm si vous préférez :

Terminal :
```
Copier// Avec bower
bower install fullpage.js

// Avec npm
npm installer fullpage.js
```
Y compris les fichiers :Y compris les fichiers :
Y compris les fichiers :

Copier<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- Cette ligne suivante est facultative. Seulement nécessaire si vous utilisez l'option css3:false et que vous voulez utiliser d'autres effets d'assouplissement plutôt que "easeInOutCubic". -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Vous utilisez Webpack, Browserify ou Require.js ? Vérifiez comment utiliser fullPage.js avec les chargeurs de modules.

Utilisation facultative du CDNUtilisation 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 requiseStructure HTML requise

Commencez votre document HTML avec la déclaration obligatoiredéclaration 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 <!DOCTYPE html>.

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 (<div id="fullpage"> dans ce cas). L'emballage ne peut pas être l'élément body.

Copier<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

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.

Copier<div class="section active">Some section</div>

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:

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

Vous pouvez voir un exemple entièrement fonctionnel de la structure HTML dans le fichier simple.html.

InitialisationInitialisation

Initialisation avec Vanilla JavascriptInitialisation avec Vanilla Javascript

Tout ce que vous avez à faire est d'appeler fullPage.js avant de fermer la balise </body>.

Copiernew fullpage('#fullpage', {
    //options here
    autoScrolling:true,
    scrollHorizontally: true
});

Initialisation avec jQueryInitialisation avec jQuery

Vous pouvez utiliser fullpage.js comme plugin jQuery si vous le souhaitez !

Copier$(document).ready(function() {
    $('#fullpage').fullpage({
        //options here
        autoScrolling:true,
        scrollHorizontally: true
    });

    // Example of how to use fullpage.js methods
    $.fn.fullpage.setAllowScrolling(false);
});

Exemple de Vanille JS avec toutes les optionsExemple de Vanille JS avec toutes les options

Une initialisation plus complexe avec toutes les options définies pourrait ressembler à ceci :

Copier
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: [
        '<div class="fp-arrow"></div>', 
        '<div class="fp-arrow"></div>'
    ],
    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,
    lazyLoadThreshold: 0,
    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 diapositivesCré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 :

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

Copier<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 </div> Slide 1
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide 3"> slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

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 grandesCréer des sections plus petites ou plus grandes

Démo 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.

Copier<div class="section">Vue d'ensemble </div>
<div class="section fp-auto-height">Auto height</div>

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.jsClasses 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)) 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 LoadingLazy Loading

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

Copier<img data-src="image.png">
<vidéo>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
</vidéo>

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ésLecture automatique/pause automatique des médias intégrés

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

Copier<audio data-autoplay>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

Pause en congé

Les iframes HTML5 <video> / <audio> et Youtube sont automatiquement mis en pause lorsque vous vous éloignez d'une section ou d'une diapositive. Ceci peut être désactivé en utilisant l'attribut data-autoplay. Par exemple :

Copier<audio data-autoplay>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

Utiliser des extensionsUtiliser des extensions

fullpage.js fournit un ensemble d'extensions que vous pouvez utiliser pour améliorer ses fonctionnalités par défaut. Toutes ces options sont listées comme options fullpage.js.

Extensions nécessite que vous utilisiez le fichier minifié fullpage.extensions.min.js qui se trouve dans le dossier dist au lieu du fichier fullPage.js habituel (fullpage.js ou fullpage.min.js).

Une fois le fichier d'extension acquis, vous devrez l'ajouter avant fullPage. Par exemple, si je veux utiliser l'extension Continuous Horizontal, j'aurais inclus le fichier d'extension puis la version des extensions du fichier fullPage.

Copier<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>

Une clé d'activation et une clé de licence seront requises pour chaque extension. Voir plus de détails à ce sujet ici.

Vous pourrez ensuite les utiliser et les configurer comme expliqué dans options.

OptionsOptions

licenseKeylicenseKey

(défaut null).Cette option est facultltative. Si vous utilisez fullPage dans un projet non open source, vous devez utiliser la clé de licence fournie lors de l'achat de la Licence Commerciale fullPage. Si votre projet est open source, contactez-moi avec un lien vers son répertoire et je vous fournirai une clé de licence. Pour en savoir plus sur les licences ici et sur le site Web. Par exemple :

Copiernew fullpage('#fullpage', {
    licenceKey:'VOTRE_CLÉ_ICI'.
});

fullPage.js4.0.31

IntroductionIntroduction

CompatibilitéCompatibilité

LicenceLicence

Licence commercialLicence commercial

Licence open-sourceLicence open-source

UsageUsage

Installer avec bower ou npmInstaller avec bower ou npm

Y compris les fichiers :Y compris les fichiers :

Utilisation facultative du CDNUtilisation facultative du CDN

Structure HTML requiseStructure HTML requise

InitialisationInitialisation

Initialisation avec Vanilla JavascriptInitialisation avec Vanilla Javascript

Initialisation avec jQueryInitialisation avec jQuery

Exemple de Vanille JS avec toutes les optionsExemple de Vanille JS avec toutes les options

Créer des liens vers des sections ou des diapositivesCréer des liens vers des sections ou des diapositives

Créer des sections plus petites ou plus grandesCréer des sections plus petites ou plus grandes

Sections de hauteur automatique réactives

Classes d'états ajoutées par fullpage.jsClasses d'états ajoutées par fullpage.js

Lazy LoadingLazy Loading

Lecture automatique/pause automatique des médias intégrésLecture automatique/pause automatique des médias intégrés

Jouer sur la section/charge de diapositives :

Pause en congé

Utiliser des extensionsUtiliser des extensions

OptionsOptions

licenseKeylicenseKey

controlArrowscontrolArrows

controlArrowsHTMLcontrolArrowsHTML

verticalCenteredverticalCentered

scrollingSpeedscrollingSpeed

sectionsColorsectionsColor

anchorsanchors

lockAnchorslockAnchors

easingeasing

easingcss3easingcss3

loopToploopTop

loopBottomloopBottom

loopHorizontalloopHorizontal

css3css3

autoScrollingautoScrolling

fitToSectionfitToSection

fitToSectionDelayfitToSectionDelay