UNPKG

ngx-fullpage

Version:
347 lines (346 loc) 19.1 kB
export declare class MnFullpageOptions { /** * This option is compulsory.** If you use fullPage in a non open source project, * then you should use the license key provided on the purchase of the fullPage Commercial License. * Otherwise, you can use the string `OPEN-SOURCE-GPLV3-LICENSE`. Please read more about licenses * [here](https://github.com/alvarotrigo/fullPage.js#license) and [on the website](https://alvarotrigo.com/fullPage/pricing/) */ licenseKey: string; /** * (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will * activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class * to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, * an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. */ menu: string; /** * (default false). Determines whether anchors in the URL will have any effect at all in the plugin. You can still using anchors * internally for your own functions and callbacks, but they won't have any effect in the scrolling of the site. Useful if you want to * combine fullPage.js with other plugins using anchor in the URL. */ lockAnchors: boolean; /** * (default []) Defines the anchor links (#example) to be shown on the URL for each section. Anchors value should be unique. The * position of the anchors in the array will define to which sections the anchor is applied. (second position for second section and so * on). Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to * bookmark a specific section or slide. Be careful! anchors can not have the same value as any ID element on the site (or NAME element * for IE). Now anchors can be defined directly in the HTML structure by using the attribute data-anchor as explained here. */ anchors: string[]; /** * (default false) If set to true, it will show a navigation bar made up of small circles. */ navigation: boolean; /** * (default none) It can be set to left or right and defines which position the navigation bar will be shown (if using one). */ navigationPosition: string; /** * (default []) Defines the tooltips to show for the navigation circles in case they are being used. Example: navigationTooltips: * ['firstSlide', 'secondSlide']. */ navigationTooltips: string[]; /** * (default false) Shows a persistent tooltip for the actively viewed section in the vertical navigation. */ showActiveTooltip: boolean; /** * (default false) If set to true it will show a navigation bar made up of small circles for each landscape slider on the site. */ slidesNavigation: boolean; /** * (default bottom) Defines the position for the landscape navigation bar for sliders. Admits top and bottom as values. You may want to * modify the CSS styles to determine the distance from the top or bottom as well as any other style such as color. */ slidesNavPosition: string; /** * (default true). Defines whether to use JavaScript or CSS3 transforms to scroll within sections and slides. Useful to speed up the * movement in tablet and mobile devices with browsers supporting CSS3. If this option is set to true and the browser doesn't support * CSS3, a jQuery fallback will be used instead. */ css3: boolean; /** * (default 700) Speed in milliseconds for the scrolling transitions. */ scrollingSpeed: number; /** * (default true) Defines whether to use the "automatic" scrolling or the "normal" one. It also has affects the way the sections fit in * the browser/device window in tablets and mobile phones. */ autoScrolling: boolean; /** * (default true). Determines whether or not to fit sections to the viewport or not. When set to true the current active section will * always fill the whole viewport. Otherwise the user will be free to stop in the middle of a section (when ) */ fitToSection: boolean; /** * (default 1000). If fitToSection is set to true, this delays the fitting by the configured milliseconds. */ fitToSectionDelay: number; /** * (default false). Determines whether to use scrollbar for the site or not. In case of using scroll bar, the autoScrolling * functionality will still working as expected. The user will also be free to scroll the site with the scroll bar and fullPage.js will * fit the section in the screen when scrolling finishes. */ scrollBar: boolean; /** * (default easeInOutCubic) Defines the transition effect to use for the vertical and horizontal scrolling. It requires the file * vendors/jquery.easings.min.js or jQuery UI for using some of its transitions. Other libraries could be used instead. */ easing: string; /** * (default ease) Defines the transition effect to use in case of using css3:true. You can use the pre-defined ones (such as linear, * ease-out...) or create your own ones using the cubic-bezier function. You might want to use Matthew Lein CSS Easing Animation Tool * for it. */ easingcss3: string; /** * (default false) Defines whether scrolling down in the last section should scroll to the first one or not. */ loopBottom: boolean; /** * (default false) Defines whether scrolling up in the first section should scroll to the last one or not. */ loopTop: boolean; /** * (default true) Defines whether horizontal sliders will loop after reaching the last or previous slide or not. */ loopHorizontal: boolean; /** * (default false) Defines whether scrolling down in the last section should scroll down to the first one or not, and if scrolling up * in the first section should scroll up to the last one or not. Not compatible with loopTop or loopBottom. */ continuousVertical: boolean; /** * (default false) Extension of fullpage.js. Defines whether sliding right in the last slide should slide right to the first one or * not, and if scrolling left in the first slide should slide left to the last one or not. Not compatible with loopHorizontal. Requires * fullpage.js >= 2.8.3. */ continuousHorizontal: boolean; /** * (default false) Extension of fullpage.js. Defines whether to slide horizontally within sliders by using the mouse wheel or trackpad. * Ideal for story telling. Requires fullpage.js >= 2.8.3. */ scrollHorizontally: boolean; /** * (default false) Extension of fullpage.js. Determines whether moving one horizontal slider will force the sliding of sliders in other * section in the same direction. Possible values are true, false or an array with the interlocked sections. For example [1,3,5] * starting by 1. Requires fullpage.js >= 2.8.3. */ interlockedSlides: boolean | number[]; /** * Enables or disables the dragging and flicking of sections and slides by using mouse or fingers. Requires fullpage.js >= 2.8.9. * Possible values are: true: enables the feature. false: disables the feature. vertical: enables the feature only vertically. * horizontal: enables the feature only horizontally. fingersonly: enables the feature for touch devices only. mouseonly: enables the * feature for desktop devices only (mouse and trackpad). */ dragAndMove: boolean | 'vertical' | 'horizontal' | 'fingersonly' | 'mouseonly'; /** * (default false)Extension of fullpage.js. Provides a way to use non full screen sections based on percentage. Ideal to show visitors * there's more content in the site by showing part of the next or previous section. Requires fullPage.js >= 2.8.8 To define the * percentage of each section the attribute data-percentage must be used. The centering of the section in the viewport can be * determined by using a boolean value in the attribute data-centered (default to true if not specified). For example: */ offsetSections: boolean; /** * (default false). Extension of fullpage.js. Defines whether or not to reset every slider after leaving its section. Requires * fullpage.js >= 2.8.3. */ resetSliders: boolean; /** * Defines whether to use a fading effect or not instead of the default scrolling one. Possible values are true, false, sections, * slides. It can therefore be applied just vertically or horizontally, or to both at the time. Requires fullpage.js >= 2.8.6. */ fadingEffect: boolean | 'sections' | 'slides'; /** * (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful * for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: * normalScrollElements: '#element1, .element2') */ normalScrollElements: string; /** * (default false) defines whether or not to create a scroll for the section/slide in case its content is bigger than the height of it. * When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the * afterRender callback. In case of setting it to true, it requires the vendor library scrolloverflow.min.js and it should be loaded * before the fullPage.js plugin. */ scrollOverflow: boolean; /** * when using scrollOverflow:true fullpage.js will make use of a forked and modified version of iScroll.js libary. You can customize * the scrolling behaviour by providing fullpage.js with the iScroll.js options you want to use. Check its documentation for more info. */ scrollOverflowOptions: any; /** * When set to true it scrolls up the content of the section/slide with scroll bar when leaving to another vertical section. This way * the section/slide will always show the start of its content even when scrolling from a section under it */ scrollOverflowReset: boolean; /** * (default 5) Defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next * section / slide */ touchSensitivity: number; /** * (default 5) Defines the threshold for the number of hops up the html node tree Fullpage will test to see if normalScrollElements is * a match to allow scrolling functionality on divs on a touch device. (For example: normalScrollElementTouchThreshold: 3) */ normalScrollElementTouchThreshold: number; /** * Defines how to scroll to a section which size is bigger than the viewport. By default fullPage.js scrolls to the top if you come * from a section above the destination one and to the bottom if you come from a section below the destination one. */ bigSectionsDestination: 'top' | 'bottom' | null; /** * (default true) Defines if the content can be navigated using the keyboard */ keyboardScrolling: boolean; /** * (default true) Defines whether the load of the site when given an anchor (#) will scroll with animation to its destination or will * directly load on the given section. */ animateAnchor: boolean; /** * (default true) Defines whether to push the state of the site to the browser's history. When set to true each section/slide of the * site will act as a new page and the back and forward buttons of the browser will scroll the sections/slides to reach the previous or * next state of the site. When set to false, the URL will keep changing but will have no effect ont he browser's history. This option * is automatically turned off when using autoScrolling:false. */ recordHistory: boolean; /** * (default: true) Determines whether to use control arrows for the slides to move right or left. */ controlArrows: boolean; /** * (default true) Vertically centering of the content within sections. When set to true, your content will be wrapped by the plugin. * Consider using delegation or load your other scripts in the afterRender callback. */ verticalCentered: boolean; resize: boolean; /** * (default none) Define the CSS background-color property for each section */ sectionsColor: string[]; /** * (default 0) Defines the top padding for each section with a numerical value and its measure (paddingTop: '10px', paddingTop: * '10em'...) Useful in case of using a fixed header. */ paddingTop: string; /** * (default 0) Defines the bottom padding for each section with a numerical value and its measure (paddingBottom: '10px', * paddingBottom: '10em'...). Useful in case of using a fixed footer. */ paddingBottom: string; /** * (default null) Defines which elements will be taken off the scrolling structure of the plugin which is necessary when using the css3 * option to keep them fixed. It requires a string with the jQuery selectors for those elements. (For example: fixedElements: * '#element1, .element2') */ fixedElements: string; /** * (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to * the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width * is less than 900 the plugin will scroll like a normal site. */ responsiveWidth: number; /** * (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to * the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height * is less than 900 the plugin will scroll like a normal site. */ responsiveHeight: number; /** * When set to true slides will be turned into vertical sections when responsive mode is fired. (by using the responsiveWidth or * responsiveHeight options detailed above). Requires fullpage.js >= 2.8.5. */ responsiveSlides: boolean; /** * When set to true slides will be turned into vertical sections when responsive mode is fired. (by using the responsiveWidth or * responsiveHeight options detailed above). Requires fullpage.js >= 2.8.5. */ parallax: boolean; /** * Allows to configure the parameters for the parallax backgrounds effect when using the option parallax:true. */ parallaxOptions: { type: 'cover' | 'reveal'; percentage: number; property: string; }; /** * Lazy loading is active by default which means it will lazy load any media element containing the attribute data-src as detailed in * the Lazy Loading docs . If you want to use any other lazy loading library you can disable this fullpage.js feature. */ lazyLoading: boolean; /** * (default .section) Defines the jQuery selector used for the plugin sections. It might need to be changed sometimes to avoid problem * with other plugins using the same selectors as fullpage.js. */ sectionSelector: string; /** * (default .slide) Defines the jQuery selector used for the plugin slides. It might need to be changed sometimes to avoid problem with * other plugins using the same selectors as fullpage.js. */ slideSelector: string; /** * This callback is fired once the user leaves a section, in the transition to the new section. Returning false will cancel the move * before it takes place. * @param index index of the leaving section. Starting from 1. * @param nextIndex index of the destination section. Starting from 1. * @param direction it will take the values up or down depending on the scrolling direction. */ onLeave: (origin: object, destination: object, direction: string) => void; /** * Callback fired once the sections have been loaded, after the scrolling has ended. * @param anchorLink anchorLink corresponding to the section. * @param index index of the section. Starting from 1. */ afterLoad: (origin: object, destination: object, direction: string) => void; /** * This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other * plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting * structure). */ afterRender: () => void; /** * This callback is fired after resizing the browser's window. Just after the sections are resized. */ afterResize: (width: number, height: number) => void; /** * This callback is fired after fullpage.js changes from normal to responsive mode or from responsive mode to normal mode. * @param {boolean} isResponsive boolean that determines if it enters into responsive mode (true) or goes back to normal mode (false) */ afterResponsive: (isResponsive: boolean) => void; /** * Callback fired once the slide of a section have been loaded, after the scrolling has ended. * * In case of not having anchorLinks defined for the slide or slides the slideIndex parameter would be the only one to use. * * Parameters: * * @param anchorLink anchorLink corresponding to the section. * @param index index of the section. Starting from 1. * @param slideAnchor anchor corresponding to the slide (in case there is) * @param slideIndex index of the slide. Starting from 1. (the default slide doesn't count as slide, but as a section) */ afterSlideLoad: (section: object, origin: object, destination: object, direction: string) => void; /** * This callback is fired once the user leaves an slide to go to another, in the transition to the new slide. Returning false will * cancel the move before it takes place. * @param anchorLink: anchorLink corresponding to the section. * @param index index of the section. Starting from 1. * @param slideIndex index of the slide. Starting from 0. * @param direction takes the values right or left depending on the scrolling direction. * @param nextSlideIndex index of the destination slide. Starting from 0. */ onSlideLeave: (section: object, origin: object, destination: object, direction: string) => void; /** * Index signature */ [key: string]: any; /** * Public factory method * * @param options options js-object */ static create(options?: Object): MnFullpageOptions; }