fullPage.js4.0.29
English | Español | Français | Pусский | 中文 | 한국어 | 日本語 | Português Brasileiro
Disponible pour Vue, React et Angular.
| Created by @imac2
- Demo en ligne | Codepen
- Wordpress plugin for Gutenberg and WordPress pluging fo Elementor
- Thème Wordpress
- Extensions fullpage.js
- Questions fréquemment demandées
- [Migration from fullPage v3 to fullpage v4]
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
- Compatibilité
- Licence
- Usage
- Options
- Méthodes
- Callbacks
- Signaler les problèmes
- Contribuer à fullpage.js
- Changelog
- Build tasks
- Ressources
- Qui utilise fullpage.js
- Dons
- Sponsors
IntroductionIntroduction
IntroductionLes 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é
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
LicenceLicence commercialLicence commercial
Licence commercialSi 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
Licence open-sourceSi 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
UsageComme 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 npmEn 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
Utilisation facultative du CDNSi 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
Structure HTML requiseCommencez 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
InitialisationInitialisation avec Vanilla JavascriptInitialisation avec Vanilla Javascript
Initialisation avec Vanilla JavascriptTout 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
Initialisation avec jQueryVous 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
Exemple de Vanille JS avec toutes les optionsUne 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
Créer des liens vers des sections ou des diapositivesSi 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
Créer des sections plus petites ou plus grandesDé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
Classes d'états ajoutées par fullpage.jsFullpage.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émentbody
du site. (ex :fp-viewing-secondPage-0
)) Les partiesSECTION
etSLIDE
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émentbody
lorsque l'entrée en mode réactiffp-enabled
est ajouté à l'élémenthtml
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
Lazy LoadingDemo 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
Lecture automatique/pause automatique des médias intégrésDemo 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
Utiliser des extensionsfullpage.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
OptionslicenseKeylicenseKey
licenseKey(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'.
});
controlArrowscontrolArrows
controlArrowsDemo(défaut true
) Détermine s'il faut utiliser les flèches de contrôle pour que les diapositives se déplacent vers la droite ou vers la gauche.
controlArrowsHTMLcontrolArrowsHTML
controlArrowsHTMLDemo(default ['<div class="fp-arrow"></div>', '<div class="fp-arrow"></div>'],
). Provides a way to define the HTML structure and the classes that you want to apply to the control arrows for sections with horizontal slides. The array contains the structure for both arrows. The first item is the left arrow and the second, the right one. (translation needed)
verticalCenteredverticalCentered
verticalCentered(défaut true
) Centrer verticalement le contenu à l'intérieur des sections. (Uses flexbox) You might want to wrap your content in a div
to avoid potential issues. (Uses flex-direction: column; display: flex; justify-content: center;
)
scrollingSpeedscrollingSpeed
scrollingSpeedDemo(défaut 700
) Vitesse en millisecondes pour les transitions de défilement.
sectionsColorsectionsColor
sectionsColorDemo(default none
) Définissez la propriété CSS background-color
pour chaque section.
Exemple :
Copiernew fullpage('#fullpage', {
sectionsCouleur : ['#f2f2f2f2','#4BBFC3','#7BAABE','whitesmoke','#000'],
}) ;
anchorsanchors
anchorsDemo(default []
) Définit les liens d'ancrage (#exemple) à afficher sur l'URL de chaque section. La valeur des ancres doit être unique. La position des ancres dans le tableau définira à quelles sections l'ancre est appliquée. (deuxième position pour la deuxième section et ainsi de suite). L'utilisation des ancres permet également de naviguer vers l'avant et vers l'arrière par le biais du navigateur. Cette option permet également aux utilisateurs de mettre en signet une section ou une diapositive spécifique. Attention, les ancres ne peuvent pas avoir la même valeur que n'importe quel élément ID sur le site (ou élément NOM pour IE). Maintenant les ancres peuvent être définies directement dans la structure HTML en utilisant l'attribut data-anchor
comme expliqué ici.
lockAnchorslockAnchors
lockAnchors(default false
) Détermine si les ancres dans l'URL auront un effet dans la bibliothèque. Vous pouvez toujours utiliser les ancres en interne pour vos propres fonctions et rappels, mais elles n'auront aucun effet sur le défilement du site. Utile si vous voulez combiner fullPage.js avec d'autres plugins en utilisant l'ancre dans l'URL.
easingeasing
easingDemo(default easeInOutCubic
) Définit l'effet de transition à utiliser pour le défilement vertical et horizontal. Il nécessite le fichier vendors/easings.min.js
ou jQuery UI pour utiliser certaines deses transitions. D'autres bibliothèques pourraient être utilisées à la place.
easingcss3easingcss3
easingcss3Demo(default ease
) Définit l'effet de transition à utiliser en cas d'utilisation de css3:true
. Vous pouvez utiliser les prédéfinis (tels que linear
, ease-out
...) ou créer vos propres en utilisant la fonction cubic-bezier
. Vous pouvez utiliser Matthew Lein CSS Easing Animation Tool pour cela.
loopToploopTop
loopTopDemo(défaut false
) Définit si le défilement vers le haut dans la première section doit défiler jusqu'à la dernière section ou non.
loopBottomloopBottom
loopBottomDemo(défaut false
) Définit si le défilement vers le bas dans la dernière section doit défiler vers la première ou non.
loopHorizontalloopHorizontal
loopHorizontalDemo(défaut true
) Définit si les curseurs horizontaux boucleront après avoir atteint la dernière diapositive ou la précédente ou non.
css3css3
css3(défaut true
). Définit s'il faut utiliser des transformations JavaScript ou CSS3 pour faire défiler les sections et les diapositives. Utile pour accélérer le mouvement dans les tablettes et les appareils mobiles avec les navigateurs supportant CSS3. Si cette option est définie sur true
et que le navigateur ne supporte pas CSS3, un repli sera utilisé à la place.
autoScrollingautoScrolling
autoScrollingDemo(défaut true
) Définit s'il faut utiliser le défilement "automatique" ou "normal". Cela a également une incidence sur la façon dont les sections s'intègrent dans la fenêtre du navigateur/de l'appareil dans les tablettes et les téléphones mobiles.
fitToSectionfitToSection
fitToSectionDemo(défaut true
) Détermine si des sections doivent ou non être ajustées à la fenêtre d'affichage. Lorsqu'elle est réglée sur true
, la section active courante remplira toujours toute la fenêtre d'affichage. Sinon, l'utilisateur sera libre de s'arrêter au milieu d'une section.
fitToSectionDelayfitToSectionDelay
fitToSectionDelayDemo(défaut 1000). Si fitToSection
est mis à true, cela retarde l'adaptation par millisecondes configurées.
scrollBarscrollBar
scrollBarDemo(défaut false
) Détermine s'il faut utiliser la barre de défilement pour le site ou non. En cas d'utilisation de la barre de défilement, la fonctionnalité autoScrolling
fonctionnera toujours comme prévu. L'utilisateur sera également libre de faire défiler le site avec la barre de défilement et fullPage.js s'adaptera à la section à l'écran lorsque le défilement sera terminé.
paddingToppaddingTop
paddingTop(défaut 0
) Définit le remplissage supérieur de chaque section avec une valeur numérique et sa mesure (paddingTop:'10px', paddingTop:'10em'...) Utile en cas d'utilisation d'un en-tête fixe.
paddingBottompaddingBottom
paddingBottom(défaut 0
) Définit le rembourrage inférieur de chaque section avec une valeur numérique et sa mesure (rembourrageBottom:'10px', rembourrageBottom:'10em'...). Utile en cas d'utilisation d'un pied de page fixe.
fixedElementsfixedElements
fixedElements(default null
) Définit les éléments qui seront retirés de la structure déroulante du plugin, ce qui est nécessaire lorsque l'option css3
est utilisée pour les garder fixes. Il faut une chaîne de caractères avec les sélecteurs Javascript pour ces éléments. (Par exemple : fixedElements:'#element1, .element2'
)
normalScrollElementsnormalScrollElements
normalScrollElements(défaut null
) Demo Si vous voulez éviter le défilement automatique lorsque vous faites défiler certains éléments, c'est l'option que vous devez utiliser. (utile pour les cartes, les scrolling divs, etc.) Il faut une chaîne de caractères avec les sélecteurs Javascript pour ces éléments. (Par exemple : normalScrollElements:'#element1, .element2'
). Cette option ne doit pas être appliquée à une section ou à un élément de diapositive en soi.
bigSectionsDestinationbigSectionsDestination
bigSectionsDestination(défaut null
) Définit comment faire défiler jusqu'à une section dont la taille est supérieure à celle de la fenêtre. Par défaut, fullPage.js fait défiler vers le haut si vous venez d'une section située au-dessus de celle de destination et vers le bas si vous venez d'une section située au-dessous de celle de destination. Les valeurs possibles sont haut
,bas
et null
.
KeyboardScrollingKeyboardScrolling
KeyboardScrollingDemo(défaut true
) Définit si le contenu peut être navigué à l'aide du clavier.
touchSensitivitytouchSensitivity
touchSensitivity(défaut 5
) Définit un pourcentage de la largeur/hauteur de la fenêtre du navigateur, et la distance que doit mesurer un glissement pour naviguer vers la section / diapositive suivante
skipIntermediateItemsskipIntermediateItems
skipIntermediateItemsDemo(valeur par défaut false
). Détermine s'il faut ignorer l'animation de défilement lors de la navigation entre des sections verticales ou des diapositives horizontales non consécutives. Les valeurs possibles sont true
, false
, sections
et slides
, permettant d'appliquer ce comportement verticalement, horizontalement ou dans les deux directions.
continuousVerticalcontinuousVertical
continuousVerticalDemo(défaut false
) Définit si le défilement vers le bas dans la dernière section ou doit descendre jusqu'à la première et si le défilement vers le haut dans la première section doit monter jusqu'à la dernière. Non compatible avec loopTop
, loopBottom
ou toute barre de défilement présente dans le site (scrollBar:true
ou autoScrolling:false
).
continuousHorizontalcontinuousHorizontal
continuousHorizontalDemo(défaut false
) Extension de fullpage.js. Définit si le défilement à droite dans la dernière diapositive doit glisser à droite vers la première ou non, et si le défilement à gauche dans la première diapositive doit glisser à gauche vers la dernière ou non. Non compatible avec loopHorizontal
. Nécessite fullpage.js >= 3.0.1.
scrollHorizontallyscrollHorizontally
scrollHorizontallyDemo(défaut false
) Extension de fullpage.js. Définit si l'on doit glisser horizontalement dans les curseurs en utilisant la molette de la souris ou le pavé tactile. Il ne peut être utilisé que lors de l'utilisation : autoScrolling:true
. Idéal pour raconter une histoire. Nécessite fullpage.js >= 3.0.1.
interlockedSlidesinterlockedSlides
interlockedSlidesDemo(défaut false
) Extension de fullpage.js. Détermine si le déplacement d'un curseur horizontal va forcer le glissement des curseurs de l'autre section dans la même direction. Les valeurs possibles sont true
, false
ou un tableau avec les sections imbriquées. Par exemple, [1,3,5]
commençant par 1. Nécessite fullpage.js >= 3.0.1.
dragAndMovedragAndMove
dragAndMoveDemo(défaut false
) Extension de fullpage.js. Active ou désactive le glisser-déposer de sections et de diapositives en utilisant la souris ou les doigts. Nécessite fullpage.js >= 3.0.1. Les valeurs possibles sont :
true
: active la fonction.false
: désactive la fonctionnalité.vertical
: active la fonctionnalité uniquement verticalement.horizontal
: active la fonctionnalité seulement horizontalement.fingersonly
: active la fonction pour les périphériques tactiles seulement.mouseonly
: active la fonctionnalité pour les périphériques de bureau uniquement (souris et trackpad).
offsetSectionsoffsetSections
offsetSectionsDemo(défaut false
) Extension de fullpage.js. Fournit un moyen d'utiliser des sections non plein écran basées sur le pourcentage. Idéal pour montrer aux visiteurs qu'il y a plus de contenu dans le site en affichant une partie de la section suivante ou précédente. Nécessite fullPage.js >= 3.0.1.
Pour définir le pourcentage de chaque section, l'attribut data-percentage
doit être utilisé. Le centrage de la section dans le viewport peut être déterminé en utilisant une valeur booléenne dans l'attribut data-centered
(défaut à true
si non spécifié). Par exemple :
Copier<div class="section" data-percentage="80" data-centered="true">
resetSlidersresetSliders
resetSlidersDemo(défaut false
). Extension de fullpage.js](https://alvarotrigo.com/fullPage/extensions/). Définit s'il faut ou non réinitialiser chaque curseur après avoir quitté sa section. Nécessite fullpage.js >= 3.0.1.
fadingEffectfadingEffect
fadingEffectDemo(défaut false
). Extension de fullpage.js. Définit si un effet de fondu enchaîné doit être utilisé ou non à la place de l'effet de défilement par défaut. Les valeurs possibles sont true
, false
, sections
, slides
. Il peut donc être appliqué juste verticalement ou horizontalement, ou aux deux à la fois. Il ne peut être utilisé que lors de l'utilisation : autoScrolling:true
. Nécessite fullpage.js >= 3.0.1.
animateAnchoranimateAnchor
animateAnchorDemo(défaut true
) Définit si le chargement du site quand on lui donne une ancre (#) va défiler avec l'animation jusqu'à sa destination ou va se charger directement sur la section donnée.
recordHistoryrecordHistory
recordHistoryDemo(défaut true
) Définit si l'état du site doit être poussé dans l'historique du navigateur. Quand il est défini à true
, chaque section/glissière du site agira comme une nouvelle page et les boutons avant et arrière du navigateur feront défiler les sections/glissières pour atteindre l'état précédent ou suivant du site. Quand il est réglé sur false
, l'URL continuera à changer mais n'aura aucun effet sur l'historique du navigateur. Cette option est automatiquement désactivée lors de l'utilisation de autoScrolling:false
.
menumenu
menuDemo(défaut false
) Un sélecteur peut être utilisé pour spécifier le menu à lier avec les sections. De cette façon, le défilement des sections activera l'élément correspondant dans le menu en utilisant la classe active
.
Cela ne générera pas de menu mais ajoutera simplement la classe active
à l'élément du menu donné avec les liens d'ancrage correspondants.
Afin de lier les éléments du menu avec les sections, un data-tag HTML 5 (data-menuanchor
) sera nécessaire à utiliser avec les mêmes liens d'ancrage que ceux utilisés dans les sections. Exemple :
Copier<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">Première section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Seconde section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Troisième section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Quatrième section</a></li>
</ul>
Copiernew fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu : #myMenu
}) ;
Note: l'élément de menu doit être placé en dehors du wrapper de la page entière afin d'éviter tout problème lors de l'utilisation de css3:true
. Sinon, il sera ajouté au body
par le plugin lui-même.
navigationnavigation
navigationDemo(défaut false
) Si elle est définie à true
, elle affichera une barre de navigation composée de petits cercles.
navigationPositionnavigationPosition
navigationPositionDemo(défaut none
) Il peut être mis à left
ou right
et définit quelle position la barre de navigation sera affichée (si vous en utilisez une).
navigationTooltipsnavigationTooltips
navigationTooltipsDemo(défaut []) Définit les info-bulles à afficher pour les cercles de navigation au cas où ils seraient utilisés. Exemple : navigationTooltips
: 'premierSlide', 'secondSlide']. Vous pouvez aussi les définir en utilisant l'attribut
data-tooltip` dans chaque section si vous préférez.
- Voir aussi l'attribut
showActiveTooltip
: (défautfalse
) Affiche une info-bulle persistante pour la section visualisée activement dans la navigation verticale.
slidesNavigationslidesNavigation
slidesNavigationDemo(défaut false
) Si défini à true
, il affichera une barre de navigation composée de petits cercles pour chaque curseur de paysage sur le site.
slidesNavPositionslidesNavPosition
slidesNavPositionDemo(défaut bottom
) Définit la position de la barre de navigation en mode paysage pour les curseurs. Admet les valeurs top
et bottom
. Vous pouvez modifier les styles CSS pour déterminer la distance du haut ou du bas ainsi que tout autre style tel que la couleur.
scrollOverflowscrollOverflow
scrollOverflowDemo(défaut true
) définit si oui ou non il faut créer un défilement pour la section/glissière dans le cas où son contenu est plus grand que la hauteur de celle-ci. It requires the default value scrollBar: false
. Afin d'éviter que fullpage.js ne crée la barre de défilement dans certaines sections ou diapositives, utilisez la classe fp-noscroll
. Par exemple : <div class="section fp-noscroll">
Vous pouvez aussi empêcher le scrolloverflow d'être appliqué en mode réactif lorsque vous utilisez fp-auto-height-responsive
dans l'élément section.
scrollOverflowMacStylescrollOverflowMacStyle
scrollOverflowMacStyleDemo(default false
). When active, this option will use a "mac style" for the scrollbar instead of the default one, which will look quite different in Windows computers. (translation needed)
scrollOverflowResetscrollOverflowReset
scrollOverflowResetDemo(défaut false
) Extension de fullpage.js. Quand il est défini à true
, il fait défiler le contenu de la section/glissière avec la barre de défilement en partant vers une autre section verticale. De cette façon, la section/glissière affichera toujours le début de son contenu, même si elle défile à partir d'une section située en dessous. Possible values are true
, false
, sections
, slides
.Adding the class fp-no-scrollOverflowReset
on the section or slide will disable this feature for that specific panel.
sectionSelectorsectionSelector
sectionSelectorDemo(défaut .section
) Définit le sélecteur Javascript utilisé pour les sections du plugin. Il peut avoir besoin d'être changé parfois pour éviter des problèmes avec d'autres plugins utilisant les mêmes sélecteurs que fullpage.js.
slideSelectorslideSelector
slideSelectorDemo(défaut .slide
) Définit le sélecteur Javascript utilisé pour les diapositives du plugin. Il peut avoir besoin d'être changé parfois pour éviter des problèmes avec d'autres plugins utilisant les mêmes sélecteurs que fullpage.js.
responsiveWidthresponsiveWidth
responsiveWidthDemo(défaut 0
) Un défilement normal (autoScrolling:false
) sera utilisé sous la largeur définie en pixels. Une classe fp-responsive
est ajoutée à la balise body au cas où l'utilisateur voudrait l'utiliser pour son propre CSS réactif. Par exemple, si elle est définie à 900, chaque fois que la largeur du navigateur est inférieure à 900, le plugin défile comme un site normal.
responsiveHeightresponsiveHeight
responsiveHeightDemo(défaut 0
) Un défilement normal (autoScrolling:false
) sera utilisé sous la hauteur définie en pixels. Une classe fp-responsive
est ajoutée à la balise body au cas où l'utilisateur voudrait l'utiliser pour son propre CSS réactif. Par exemple, si elle est définie à 900, chaque fois que la hauteur du navigateur est inférieure à 900, le plugin défile comme un site normal.
responsiveSlidesresponsiveSlides
responsiveSlidesDemo(défaut false
) Extension de fullpage.js. Quand il est réglé sur true
, les diapositives seront transformées en sections verticales quand le mode réactif est activé. (en utilisant les options responsiveWidth
ou responsiveHeight
détaillées ci-dessus). Nécessite fullpage.js >= 3.0.1.
parallax:trueparallax:true
parallax:trueEn savoir plus sur la façon d'appliquer l'option parallax.
parallaxOptionsparallaxOptions
parallaxOptions(default: { type: 'reveal', percentage: 62, property: 'translate'}
).
Allows to configure the parameters for the parallax backgrounds effect when using the option parallax:true
. Read more about how to apply the parallax option.
dropEffectdropEffect
dropEffectDemo(default false
) Extension of fullpage.js. Defines whether or not to use the drop effect on sections / slides. Read more about how to apply the the drop effect option.
dropEffectOptionsdropEffectOptions
dropEffectOptions(default: { speed: 2300, color: '#F82F4D', zIndex: 9999}
).
Allows to configure the parameters for the drop effect when using the option dropEffect:true
.Read more about how to apply the the drop effect option.
waterEffectwaterEffect
waterEffectDemo(default false
) Extension of fullpage.js. Defines whether or not to use the water effect on sections / slides. Read more about how to apply the the water effect option.
waterEffectOptionswaterEffectOptions
waterEffectOptions(default: { animateContent: true, animateOnMouseMove: true}
).
Allows to configure the parameters for the water effect when using the option waterEffect:true
.Read more about how to apply the the water effect option.
cardscards
cardsDemo(défaut false
) Extension de fullpage.js. Définit s'il faut ou non utiliser l'effet des cartes sur les sections/glissières. Lire plus sur comment appliquer l'option cartes.
cardsOptionscardsOptions
cardsOptions(défaut : { perspective : 100, fadeContent : true, fadeBackground : true}
).
Vous permet de configurer les paramètres pour l'effet des cartes quand vous utilisez l'option cards:true
. Lire plus sur comment appliquer l'option cartes.
lazyLoadinglazyLoading
lazyLoadingDemo(défaut true
) Le chargement paresseux est actif par défaut ce qui signifie qu'il chargera paresseusement tout élément média contenant l'attribut data-src
comme détaillé dans la Lazy Loading docs . Si vous voulez utiliser une autre bibliothèque de chargement paresseux, vous pouvez désactiver cette fonctionnalité de fullpage.js.
lazyLoadThresholdlazyLoadThreshold
lazyLoadThresholdDemo(par défaut 0
) Spécifie le nombre de sections verticales adjacentes et de diapositives horizontales dont les éléments multimédias doivent être chargés de manière différée par rapport à la section actuelle. Utilisez un nombre pour spécifier combien de sections ou diapositives précédentes et suivantes doivent être préchargées.
observerobserver
observerDemo(default true
) Defines whether or not to observe changes in the HTML structure of the page. When enabled, fullPage.js will automatically react to those changes and update itself accordingly. Ideal when adding, removing or hidding sections or slides. (translation needed)
creditscredits
credits(default {enabled: true, label: 'Made with fullpage.js', position: 'right'}
).
Defines whether to use fullPage.js credits. As per clause 0, 4, 5 and 7 of the GPLv3 licecense, those using fullPage.js under the GPLv3 are required to give prominent notice that fullPage.js is in use. We recommend including attribution by keeping this option enabled. (translation needed)
MéthodesMéthodes
MéthodesVous pouvez les voir en action ici
getActiveSection()getActiveSection()
getActiveSection()Demo Obtient un objet (type Section) contenant la section active et ses propriétés.
Copierfullpage_api.getActiveSection() ;
getActiveSlide()getActiveSlide()
getActiveSlide()Demo Obtient un objet (type Diapositive) contenant la diapositive active et ses propriétés.
Copierfullpage_api.getActiveSlide() ;
getScrollY() & getScrollXgetScrollY() & getScrollX
getScrollY() & getScrollXDemo getScrollY
Gets the Y position of the fullPage wrapper. getScrollX
gets the X position of the active horizontal slide.
Copierfullpage_api.getScrollY();
fullpage_api.getScrollX();
moveSectionUp()moveSectionUp()
moveSectionUp()Demo Fait défiler une section vers le haut :
Copierfullpage_api.moveSectionUp() ;
moveSectionDown()moveSectionDown()
moveSectionDown()Demo Fait défiler une section vers le bas :
Copierfullpage_api.moveSectionDown() ;
moveTo(section, slide)moveTo(section, slide)
moveTo(section, slide)Demo Fait défiler la page jusqu'à la section donnée et fait glisser. La première section aura l'index 1 tandis que la première diapositive, celle qui est visible par défaut, aura l'index 0.
Copier/*Défilement vers la section avec le lien d'ancrage `firstSlide` et vers le 2nd Slide */
fullpage_api.moveTo('firstSlide', 2) ;
Copier//Se rendre à la 3ème section (avec l'index 3) du site
fullpage_api.moveTo(3, 0) ;
//Qui est identique à
fullpage_api.moveTo(3) ;
silentMoveTo(section, slide)silentMoveTo(section, slide)
silentMoveTo(section, slide)Démo
Exactement la même chose que moveTo
mais dans ce cas il effectue le défilement sans animation. Un saut direct vers la destination.
Copier/*Défilement vers la section avec le lien d'ancrage `firstSlide` et vers le 2nd Slide */
fullpage_api.silentMoveTo('firstSlide', 2) ;
moveSlideRight()moveSlideRight()
moveSlideRight()Démo Fait défiler le curseur horizontal de la section en cours jusqu'à la diapositive suivante :
Copierfullpage_api.moveSlideRight() ;
moveSlideLeft()moveSlideLeft()
moveSlideLeft()Démo Fait défiler le curseur horizontal de la section en cours jusqu'à la diapositive précédente :
Copierfullpage_api.moveSlideLeft() ;
setAutoScrolling(booléen)setAutoScrolling(booléen)
setAutoScrolling(booléen)Demo Définit la configuration de défilement en temps réel.
Définit le comportement du défilement de la page. S'il est réglé sur true
, il utilisera le défilement automatique
, sinon, il utilisera le défilement manuel
ou normal
du site.
Copierfullpage_api.setAutoScrolling(false) ;
setFitToSection(booléen)setFitToSection(booléen)
setFitToSection(booléen)Démo
Définit la valeur de l'option fitToSection
déterminant si la section doit être affichée à l'écran ou non.
Copierfullpage_api.setFitToSection(false) ;
fitToSection()fitToSection()
fitToSection()Démo Fait défiler jusqu'à la section active la plus proche qui s'adapte dans la fenêtre de visualisation.
Copierfullpage_api.fitToSection() ;
setLockAnchors(booléen)setLockAnchors(booléen)
setLockAnchors(booléen)Démo
Définit la valeur de l'option lockAnchors
déterminant si les ancres auront un effet dans l'URL ou non.
Copierfullpage_api.setLockAnchors(false) ;
setKeyboardScrolling(boolean, [directions])setKeyboardScrolling(boolean, [directions])
setKeyboardScrolling(boolean, [directions])Demo Ajoute ou supprime la possibilité de faire défiler les sections/glissières en utilisant la roulette de la souris/le trackpad ou les gestes du toucher (qui est actif par défaut). Notez que cela ne désactivera pas le défilement du clavier. Vous
aurait besoin d'utiliser setKeyboardScrolling
pour cela.
directions
: (paramètre optionnel) Valeurs admises :all
,up
,down
,left
,right
ou une combinaison de ces valeurs séparées par des virgules commedown, right
. Il définit la direction pour laquelle le défilement sera activé ou désactivé.
Copier//désactivation de tout le défilement du clavier
fullpage_api.setKeyboardScrolling(false) ;
//désactivation du défilement du clavier
fullpage_api.setKeyboardScrolling(false, 'down') ;
//désactivation du défilement du clavier vers le bas et vers la droite
fullpage_api.setKeyboardScrolling(false, 'down, right') ;
setRecordHistory(booléen)setRecordHistory(booléen)
setRecordHistory(booléen)Demo Définit s'il faut enregistrer l'historique pour chaque changement de hachage dans l'URL.
Copierfullpage_api.setRecordHistory(false) ;
setScrollingSpeed(millisecondes)setScrollingSpeed(millisecondes)
setScrollingSpeed(millisecondes)Démo Définit la vitesse de défilement en millisecondes.
Copierfullpage_api.setScrollingSpeed(700) ;
destroy(type)destroy(type)
destroy(type)Demo Détruit les événements du plugin et éventuellement son balisage HTML et ses styles. Idéal à utiliser lorsque vous utilisez AJAX pour charger du contenu.
type
: (paramètre optionnel) peut être vide ouall
. Siall
est passé, le balisage HTML et les styles utilisés par fullpage.js seront supprimés. De cette façon, le balisage HTML original, celui utilisé avant toute modification du plugin, sera maintenu.
Copier//destruction de tous les événements Javascript créés par fullPage.js (défilement, hashchange dans l'URL...)
fullpage_api.destroy() ;
//déstruction de tous les événements Javascript et de toute modification faite par fullPage.js par rapport à votre balisage HTML d'origine.
fullpage_api.destroy('all') ;
reBuild()reBuild()
reBuild()Met à jour la structure du DOM pour l'adapter à la nouvelle taille de la fenêtre ou à son contenu.
Idéal à utiliser en combinaison avec des appels AJAX ou des changements externes dans la structure DOM du site, spécialement quand on utilise scrollOverflow:true
.
Copierfullpage_api.reBuild() ;
setResponsive(booléen)setResponsive(booléen)
setResponsive(booléen)Demo Définit le mode de réponse de la page. Quand il est réglé sur true
, le défilement automatique sera désactivé et le résultat sera exactement le même que lorsque les options responsiveWidth
ou responsiveHeight
sont activées.
Copierfullpage_api.setResponsive(true) ;
responsiveSlides.toSections()responsiveSlides.toSections()
responsiveSlides.toSections()Extension de fullpage.js. Nécessite fullpage.js >= 3.0.1. Transforme les diapositives horizontales en sections verticales.
Copierfullpage_api.responsiveSlides.toSections() ;
responsiveSlides.toSlides()responsiveSlides.toSlides()
responsiveSlides.toSlides()Extension de fullpage.js. Nécessite fullpage.js >= 3.0.1. Retourne les diapositives originales (maintenant converties en sections verticales) en diapositives horizontales à nouveau.
Copierfullpage_api.responsiveSlides.toSlides() ;
CallbacksCallbacks
CallbacksDémo Vous pouvez les voir en action ici.
Certains callbacks, tels que onLeave
contiendront des paramètres de type Object contenant les propriétés suivantes :
anchor
: (String) l'ancre de l'objet.- Index : ( Number) index de l'objet.
item
: (élément DOM) élément de l'article.isFirst
: ( Boolean ) détermine si l'item est le premier enfant.isLast
: ( Boolean) détermine si l'item est le dernier enfant.
afterLoad (origin
, destination
, direction
, trigger
)afterLoad (origin
, destination
, direction
, trigger
)
afterLoad (origin
, destination
, direction
, trigger
)
Le callback est déclenché une fois que les sections ont été chargées, après la fin du défilement. Paramètres :
origin
: (Objet) section d'origine.destination
: (Objet) section de destination.direction
: (Chaîne) elle prendra les valeursup
oudown
selon la direction de défilement.
Exemple :
Copiernew fullpage('#fullpage', {
des ancres : ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad : function(origine, destination, direction, trigger){
var origin = this;
//indice d'utilisation
if(origin.index == 2){
alert("Section 3 a terminé le chargement") ;
}
//utilisation de anchorLink
if(origin.anchor == 'secondSlide'){
alert("Section 2 a terminé le chargement") ;
}
}
}) ;
Exemple:s
Copiernew fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(origin, destination, direction, trigger){
var origin = this;
//using index
if(origin.index == 2){
alert("Section 3 ended loading");
}
//using anchorLink
if(origin.anchor == 'secondSlide'){
alert("Section 2 ended loading");
}
}
});
onLeave (origin
, destination
, direction
, trigger
)onLeave (origin
, destination
, direction
, trigger
)
onLeave (origin
, destination
, direction
, trigger
)
Ce callback est déclenché dès que l'utilisateur quitte une section, dans la transition vers la nouvelle section.
Si vous retournez false
, le coup sera annulé avant qu'il n'ait lieu.
Paramètres :
origine
: (Objet) Section d'origine .destination
: (Objet) Section de destination.direction
: (Chaîne de caractères) il prendra les valeursup
oudown
en fonction du sens de défilement.
Exemple :
Copiernew fullpage('#fullpage', {
onLeave : function(origine, destination, direction, trigger){
var leavingSection = this;
//après avoir quitté la section 2
if(origin.index == 1 && direction ==='down'){
alert("Aller à la section 3 !");
}
else if(origin.index == 1 && direction =='up'){
alert("Aller à la section 1 !");
}
}
}) ;
beforeLeave (origin
, destination
, direction
, trigger
)beforeLeave (origin
, destination
, direction
, trigger
)
beforeLeave (origin
, destination
, direction
, trigger
)
Demo This callback is fired right before leaving the section, just before the transition takes place.
You can use this callback to prevent and cancel the scroll before it takes place by returning false
.
Parameters:
origin
: (Object) section of origin.destination
: (Object) destination section.direction
: (String) it will take the valuesup
ordown
depending on the scrolling direction.trigger
: (String) indicates what triggered the scroll. It can be: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".
Example:
Copier
var cont = 0;
new fullpage('#fullpage', {
beforeLeave: function(origin, destination, direction, trigger){
// prevents scroll until we scroll 4 times
cont++;
return cont === 4;
}
});
afterRender()afterRender()
afterRender()Demo Ce callback est déclenché juste après la génération de la structure de la page. C'est le callback que vous voulez utiliser pour initialiser d'autres plugins ou lancer tout code qui nécessite que le document soit prêt (car ce plugin modifie le DOM pour créer la structure résultante). Voir FAQs pour plus d'informations.
Exemple :
Copiernew fullpage('#fullpage', {
afterRender : function(){
var pluginContainer = this ;
alert("La structure DOM résultante est prête");
}
}) ;
afterResize(largeur
, hauteur
)afterResize(largeur
, hauteur
)
afterResize(largeur
, hauteur
)
Demo Ce rappel est déclenché après le redimensionnement de la fenêtre du navigateur. Juste après le redimensionnement des sections.
Paramètres :
Largeur
: (Nombre) Largeur de la fenêtre.Hauteur
: (Nombre) Hauteur de la fenêtre.
Exemple :
Copiernew fullpage('#fullpage', {
afterResize : function(largeur, hauteur){
var fullpageContainer = this;
alert("Le redimensionnement des sections est terminé");
}
}) ;
afterReBuild()afterReBuild()
afterReBuild()Demo Ce rappel est lancé après la reconstruction manuelle de fullpage.js en appelant fullpage_api.reBuild()
.
Exemple :
Copiernew fullpage('#fullpage', {
afterReBuild : function(){
console.log("fullPage.js a été reconstruit manuellement");
}
}) ;
afterResponsive(isResponsive
)afterResponsive(isResponsive
)
afterResponsive(isResponsive
)
Demo Ce callback est déclenché après le passage de fullpage.js du mode normal au mode réactif ou du mode réactif au mode normal.
Paramètres :
- ìsResponsive : (Booléen) détermine s'il entre en mode réactif (
true
) ou retourne en mode normal (false
).
Exemple :
Copiernew fullpage('#fullpage', {
afterResponsive : function(isResponsive){
alert("Is responsive : " + isResponsive);
}
}) ;
afterSlideLoad (section
), origine
, destination
, direction
, trigger
)afterSlideLoad (section
), origine
, destination
, direction
, trigger
)
afterSlideLoad (section
), origine
, destination
, direction
, trigger
)
Demo Callback tiré une fois que la diapositive d'une section a été chargée, après que le défilement soit terminé.
Paramètres :
section
: (Objet) Section verticale active.Origin
: (Objet) Diapositive horizontale d'origine.destination
: (Objet) Diapositive horizontale de destination.direction
: (Chaîne)à droite
ouà gauche
selon le sens de défilement.
Exemple :
Copiernew fullpage('#fullpage', {
anchors : 'firstPage','secondPage','thirdPage','fourthPage','lastPage'],
afterSlideLoad : function( section, origin, destination, direction, trigger){
var loadedSlide = this;
//première diapositive de la deuxième section
if(section.anchor =='secondPage' && destination.index == 1){
alert("Première diapositive chargée");
}
//seconde diapositive de la deuxième section (en supposant que #secondSlide est le
//anchor pour la deuxième diapositive)
if(section.index == 1 && destination.anchor =='secondSlide'){
alert("Deuxième diapositive chargée");
}
}
}) ;
onSlideLeave (section
, origine
, destination
, direction
, trigger
)onSlideLeave (section
, origine
, destination
, direction
, trigger
)
onSlideLeave (section
, origine
, destination
, direction
, trigger
)
Demo Ce callback est déclenché une fois que l'utilisateur quitte une glissière pour aller vers une autre, dans la transition vers la nouvelle glissière. Si vous retournez `false', le coup sera annulé avant qu'il n'ait lieu.
Paramètres :
section
: (Objet) Section verticale active .Origin
: (Objet) Diapositive horizontale d'origine.destination
: Diapositive horizontale de destination (Objet).direction
: (Chaîne)à droite
ouà gauche
selon le sens de défilement.
Exemple :
Copiernew fullpage('#fullpage', {
onSlideLeave : function( section, origine, destination, direction, trigger){
var leavingSlide = this;
//en laissant la première diapositive de la 2ème section vers la droite
if(section.index == 1 && origine.index == 0 && direction =='right'){
alert("Quitter la première diapositive!!");
}
//en laissant la 3ème diapositive de la 2ème section vers la gauche
if(section.index == 1 && origine.index == 2 && direction =='left'){
alert("Going to slide 2 !");
}
}
}) ;
Annuler un coup avant qu'il n'ait lieuAnnuler un coup avant qu'il n'ait lieu
Annuler un coup avant qu'il n'ait lieuVous pouvez annuler un coup en retournant false
sur le callback onSlideLeave
. Identique à l'annulation d'un mouvement avec onLeave
.
onScrollOverflow (section
, slide
, position
, direction
)onScrollOverflow (section
, slide
, position
, direction
)
onScrollOverflow (section
, slide
, position
, direction
)
Demo This callback gets fired when a scrolling inside a scrollable section when using the fullPage.js option scrollOverflow: true
.
Parameters:
section
: (Object) active vertical section.slide
: (Object) horizontal slide of origin.position
: (Integer) scrolled amount within the section/slide. Starts on 0.direction
: (String)up
ordown
Example:
Copiernew fullpage('#fullpage', {
onScrollOverflow: function( section, slide, position, direction){
console.log(section);
console.log("position: " + position);
}
});
Signaler les problèmes
- S'il vous plaît, cherchez votre problème avant de demander à l'aide de la recherche de problèmes github.
- Assurez-vous d'utiliser la dernière version de fullpage.js. Aucun support n'est fourni pour les anciennes versions.
- Utilisez [le forum Github Issues] (https://github.com/alvarotrigo/fullPage.js/issues) pour créer des problèmes.
- Une reproduction isolée du numéro sera exigée. Si possible, utilisezjsfiddle oucodepen pour cela.
Contribuer à fullpage.js
Veuillez consulter[Contribuer à fullpage.js] (https://github.com/alvarotrigo/fullPage.js/wiki/Contributing-to-fullpage.js)
Changelog
Pour voir la liste des changements récents, voir la section[Communiqués] (https://github.com/alvarotrigo/fullPage.js/releases).
Build tasks
Vous voulez créer des fichiers de distribution fullpage.js ? Veuillez consulter Tâches de construction
Ressources
- Wordpress Plugin for Gutenberg and for Elementor.
- Thème Wordpress
- composant d'emballage officiel de Vue.js
- composant d'emballage officiel de React.js
- Composant d'emballage angulaire officiel
- CSS Easing Animation Tool - Matthew Lein (utile pour définir la valeur
easingcss3
) - fullPage.js jsDelivr CDN
- plugin fullPage.js pour octobre CMS
- Directive fullPage.js Angular2
- directive angulaire fullPage.js
- fullPage.js ember-cli addon
- fullPage.js Rails Ruby Gem
- Angular fullPage.js - Adaptation for Angular.js v1.x
- Intégration de fullPage.js avec Wordpress (Tutoriel)
Qui utilise fullPage.jsQui utilise fullPage.js
Qui utilise fullPage.js- http://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02
- http://medoff.ua/en/
- http://promo.prestigio.com/grace1/
- http://torchbrowser.com/
- http://www.boxreload.com/
- http://boxx.hk/
- http://www.villareginateodolinda.it
Des donsDes dons
Des donsLes dons seraient plus que bienvenus :)
Les sponsorsLes sponsors
Les sponsorsDevenez sponsor et obtenez votre logo sur notre README sur Github avec un lien vers votre site. [Devenez sponsor] | [Devenez patreon]
GensGens
GensContributorsContributors
ContributorsDo you have questions?
Find answers for your questions on fullPage.js, its extensions and WordPress plugins.
Go to Help Center