diff --git a/README.md b/README.md index 5eb66157b..1ad157f97 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ --- -![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.22-brightgreen.svg) +![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.23-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) @@ -385,80 +385,141 @@ Then you will be able to use and configure them as explained in [options](https: ## Options -- `licenseKey`: (default `null`). **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. If your project is open source and it is compatible with the GPLv3 license you can use the option `gplv3-license`. Please read more about licenses [here](https://github.com/alvarotrigo/fullPage.js#license) and [on the website](https://alvarotrigo.com/fullPage/pricing/). Example of usage: +### licenseKey + +(default `null`) **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. If your project is open source and it is compatible with the GPLv3 license you can use the option `gplv3-license`. Please read more about licenses [here](https://github.com/alvarotrigo/fullPage.js#license) and [on the website](https://alvarotrigo.com/fullPage/pricing/). Example of usage: - ```javascript - new fullpage('#fullpage', { - licenseKey: 'YOUR_KEY_HERE' - }); - ``` +```javascript +new fullpage('#fullpage', { + licenseKey: 'YOUR_KEY_HERE' +}); +``` + +### controlArrows -- `controlArrows`: (default `true`) Determines whether to use control arrows for the slides to move right or left. +(default `true`) Determines whether to use control arrows for the slides to move right or left. -- `controlArrowsHTML`: (default `['
', ''],`). 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. +### controlArrowsHTML -- `verticalCentered`: (default `true`) Vertically centering of the content using flexbox. You might want to wrap your content in a `div` to avoid potential issues. (Uses `flex-direction: column; display: flex; justify-content: center;`) +(default `['', ''],`). +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. -- `scrollingSpeed`: (default `700`) Speed in milliseconds for the scrolling transitions. +### verticalCentered -- `sectionsColor`: (default `none`) Define the CSS `background-color` property for each section. +(default `true`) Vertically centering of the content using flexbox. You might want to wrap your content in a `div` to avoid potential issues. (Uses `flex-direction: column; display: flex; justify-content: center;`) + +### scrollingSpeed + +(default `700`) Speed in milliseconds for the scrolling transitions. + +### sectionsColor + +(default `none`) Define the CSS `background-color` property for each section. Example: - ```javascript - new fullpage('#fullpage', { - sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], - }); - ``` +```javascript +new fullpage('#fullpage', { + sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], +}); +``` + +### anchors -- `anchors`: (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). +(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. -- `lockAnchors`: (default `false`) Determines whether anchors in the URL will have any effect at all in the library. 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 + +(default `false`) Determines whether anchors in the URL will have any effect at all in the library. 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. -- `easing`: (default `easeInOutCubic`) Defines the transition effect to use for the vertical and horizontal scrolling. +### easing + +(default `easeInOutCubic`) Defines the transition effect to use for the vertical and horizontal scrolling. It requires the file `vendors/easings.min.js` or [jQuery UI](https://jqueryui.com/) for using some of [its transitions](https://api.jqueryui.com/easings/). Other libraries could be used instead. -- `easingcss3`: (default `ease`) Defines the transition effect to use in case of using `css3:true`. You can use the [pre-defined ones](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) (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](https://matthewlein.com/ceaser/) for it. +### easingcss3 + +(default `ease`) Defines the transition effect to use in case of using `css3:true`. You can use the [pre-defined ones](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) (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](https://matthewlein.com/ceaser/) for it. + +### loopTop + +(default `false`) Defines whether scrolling up in the first section should scroll to the last one or not. + +### loopBottom -- `loopTop`: (default `false`) Defines whether scrolling up in the first section should scroll to the last one or not. +(default `false`) Defines whether scrolling down in the last section should scroll to the first one or not. -- `loopBottom`: (default `false`) Defines whether scrolling down in the last section should scroll to the first one or not. +### loopHorizontal -- `loopHorizontal`: (default `true`) Defines whether horizontal sliders will loop after reaching the last or previous slide or not. +(default `true`) Defines whether horizontal sliders will loop after reaching the last or previous slide or not. -- `css3`: (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 fallback will be used instead. +### css3 -- `autoScrolling`: (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. +(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 fallback will be used instead. -- `fitToSection`: (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. +### autoScrolling -- `fitToSectionDelay`: (default 1000). If `fitToSection` is set to true, this delays the fitting by the configured milliseconds. +(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. -- `scrollBar`: (default `false`) Determines whether to use scroll bar for the **vertical sections** on site or not. In case of using scroll bar, the `autoScrolling` functionality will still work 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. +### fitToSection -- `paddingTop`: (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. +(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. -- `paddingBottom`: (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. +### fitToSectionDelay -- `fixedElements`: (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 Javascript selectors for those elements. (For example: `fixedElements: '#element1, .element2'`) +(default 1000) If `fitToSection` is set to true, this delays the fitting by the configured milliseconds. -- `normalScrollElements`: (default `null`) [Demo](https://codepen.io/alvarotrigo/pen/RmVazM) 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 Javascript selectors for those elements. (For example: `normalScrollElements: '#element1, .element2'`). This option should not be applied to any section/slide element itself. +### scrollBar -- `bigSectionsDestination`: (default `null`) [Demo](https://codepen.io/alvarotrigo/pen/vYLdMrx) Defines how to scroll to a section which height is bigger than the viewport and when not using `scrollOverflow:true`. (Read [how to create smaller or bigger sections](https://github.com/alvarotrigo/fullPage.js#creating-smaller-or-bigger-sections)). 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. Possible values are `top`, `bottom`, `null`. +(default `false`) Determines whether to use scroll bar for the **vertical sections** on site or not. In case of using scroll bar, the `autoScrolling` functionality will still work 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. -- `keyboardScrolling`: (default `true`) Defines if the content can be navigated using the keyboard. +### paddingTop -- `touchSensitivity`: (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 +(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. -- `continuousVertical`: (default `false`) Defines whether scrolling down in the last section should scroll down to the first one and if scrolling up in the first section should scroll up to the last one. Not compatible with `loopTop`, `loopBottom` or any scroll bar present in the site (`scrollBar:true` or `autoScrolling:false`). +### paddingBottom -- `continuousHorizontal`: (default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 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 >= 3.0.1. +(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. -- `scrollHorizontally`: (default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). Defines whether to slide horizontally within sliders by using the mouse wheel or trackpad. It can only be used when using: `autoScrolling:true`. Ideal for story telling. Requires fullpage.js >= 3.0.1. +### fixedElements -- `interlockedSlides`: (default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 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 >= 3.0.1. +(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 Javascript selectors for those elements. (For example: `fixedElements: '#element1, .element2'`) -- `dragAndMove`: (default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). Enables or disables the dragging and flicking of sections and slides by using mouse or fingers. Requires fullpage.js >= 3.0.1. Possible values are: +### normalScrollElements + +(default `null`) [Demo](https://codepen.io/alvarotrigo/pen/RmVazM) 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 Javascript selectors for those elements. (For example: `normalScrollElements: '#element1, .element2'`). This option should not be applied to any section/slide element itself. + +### bigSectionsDestination + +(default `null`) [Demo](https://codepen.io/alvarotrigo/pen/vYLdMrx) Defines how to scroll to a section which height is bigger than the viewport and when not using `scrollOverflow:true`. (Read [how to create smaller or bigger sections](https://github.com/alvarotrigo/fullPage.js#creating-smaller-or-bigger-sections)). 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. Possible values are `top`, `bottom`, `null`. + +### keyboardScrolling + +(default `true`) Defines if the content can be navigated using the keyboard. + +### touchSensitivity + +(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 + +### continuousVertical + +(default `false`) Defines whether scrolling down in the last section should scroll down to the first one and if scrolling up in the first section should scroll up to the last one. Not compatible with `loopTop`, `loopBottom` or any scroll bar present in the site (`scrollBar:true` or `autoScrolling:false`). + +### continuousHorizontal + +(default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 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 >= 3.0.1. + +### scrollHorizontally + +(default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). Defines whether to slide horizontally within sliders by using the mouse wheel or trackpad. It can only be used when using: `autoScrolling:true`. Ideal for story telling. Requires fullpage.js >= 3.0.1. + +### interlockedSlides + +(default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 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 >= 3.0.1. + +### dragAndMove + +(default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). Enables or disables the dragging and flicking of sections and slides by using mouse or fingers. Requires fullpage.js >= 3.0.1. Possible values are: - `true`: enables the feature. - `false`: disables the feature. - `vertical`: enables the feature only vertically. @@ -466,89 +527,160 @@ It requires the file `vendors/easings.min.js` or [jQuery UI](https://jqueryui.co - `fingersonly`: enables the feature for touch devices only. - `mouseonly`: enables the feature for desktop devices only (mouse and trackpad). -- `offsetSections`: (default `false`)[Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 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 >= 3.0.1. +### offsetSections + +(default `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 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 >= 3.0.1. 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: - ``` html --1?"".concat(n,": 0;"):"",e='\n
\n "),i=rn(dn.C),o=!dn.Zn||Tt().credits.enabled;i&&i.item&&o&&i.item.insertAdjacentHTML("beforeend",e)})),function(){vn.D(yn,(function(){var t,u,l;hn({Zn:(Tt().licenseKey,t=Tt().licenseKey,u=function(t){var e=parseInt("514").toString(16);if(!t||t.length<29||4===t.split(n[0]).length)return null;var i=["Each","for"][o()]().join(""),u=t[["split"]]("-"),l=[];u[i]((function(n,t){if(t<4){var i=function(n){var t=n[n.length-1],e=["NaN","is"][o()]().join("");return window[e](t)?r(t):function(n){return n-Kn.length}(t)}(n);l.push(i);var a=r(n[i]);if(1===t){var u=["pa","dS","t","art"].join("");a=a.toString()[u](2,"0")}e+=a,0!==t&&1!==t||(e+="-")}}));var c=0,f="";return t.split("-").forEach((function(n,t){if(t<4){for(var e=0,i=0;i<4;i++)i!==l[t]&&(e+=Math.abs(r(n[i])),isNaN(n[i])||c++);var o=a(e);f+=o}})),f+=a(c),{tt:new Date(e+"T00:00"),et:e.split("-")[2]===8*(Kn.length-2)+"",it:f}}(t),l=function(n){var t=i[o()]().join("");return n&&0===t.indexOf(n)&&n.length===t.length}(t),(u||l)&&(u&&e<=u.tt&&u.it===t.split(n[0])[4]||l||u.et)||!1)})}));var n=["-"],t="2024-0-31".split("-"),e=new Date(t[0],t[1],t[2]),i=["se","licen","-","v3","l","gp"];function o(){return[["re","verse"].join("")]["".length]}function r(n){return n?isNaN(n)?n.charCodeAt(0)-72:n:""}function a(n){var t=72+n;return t>90&&t<97&&(t+=15),String.fromCharCode(t).toUpperCase()}}(),f.setKeyboardScrolling=Co,f.shared.nt=No,f.setAllowScrolling=Bo,f.destroy=function(n){de(!1,"internal"),Bo(!0),fo(!1),Co(!1),L(St(),Un),vn.R(Tn),n&&(Vt(0),p("img[data-src], source[data-src], audio[data-src], iframe[data-src]",St()).forEach((function(n){un(n,"src")})),p("img[data-srcset]").forEach((function(n){un(n,"srcset")})),Z(p("#fp-nav, .fp-slidesNav, .fp-controlArrow")),y(Ot(pn().C),{height:"","background-color":"",padding:""}),y(Ot(pn().slides),{width:""}),y(St(),{height:"",position:"","-ms-touch-action":"","touch-action":""}),y(Gt,{overflow:"",height:""}),D(qt,_n),D(Kt,Wn+" fp-scrollable"),Kt.className.split(/\s+/).forEach((function(n){0===n.indexOf("fp-viewing")&&D(Kt,n)})),Ot(pn().hn).forEach((function(n){Tt().scrollOverflow&&Ve.In(n),D(n,"fp-table active fp-completely "+lt);var t=U(n,"data-fp-styles");t&&n.setAttribute("style",t),m(n,Yn)&&!wt&&n.removeAttribute("data-anchor")})),Bt(St()),[Qn,ot,et].forEach((function(n){p(n,St()).forEach((function(n){z(n)}))})),y(St(),{"-webkit-transition":"none",transition:"none"}),D(St(),Bn),o.scrollTo(0,0),[Yn,Jn,it].forEach((function(n){D(p("."+n),n)})))},o.fp_easings=g(o.fp_easings,{easeInOutCubic:function(n,t,e,i){return(n/=i/2)<1?e/2*n*n*n+t:e/2*((n-=2)*n*n+2)+t}}),o.jQuery&&function(n,t){n&&t?n.fn.fullpage=function(e){e=n.extend({},e,{$:n}),new t(this[0],e),Object.keys(f).forEach((function(n){Tt().$.fn.fullpage[n]=f[n]}))}:v("error","jQuery is required to use the jQuery fullpage adapter!")}(o.jQuery,Uo),Uo})); +!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).fullpage=t()}(this,(function(){"use strict";var n,t,e,i;Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(n){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),e=t.length>>>0;if("function"!=typeof n)throw new TypeError("predicate must be a function");for(var i=arguments[1],o=0;o-1?"".concat(n,": 0;"):"",e='\n
\n "),i=rn(dn.C),o=!dn.nt||Mt().credits.enabled;i&&i.item&&o&&i.item.insertAdjacentHTML("beforeend",e)})),function(){vn.D(yn,(function(){var t,u,l;hn({nt:(Mt().licenseKey,t=Mt().licenseKey,u=function(t){var e=parseInt("514").toString(16);if(!t||t.length<29||4===t.split(n[0]).length)return null;var i=["Each","for"][o()]().join(""),u=t[["split"]]("-"),l=[];u[i]((function(n,t){if(t<4){var i=function(n){var t=n[n.length-1],e=["NaN","is"][o()]().join("");return window[e](t)?r(t):function(n){return n-qn.length}(t)}(n);l.push(i);var a=r(n[i]);if(1===t){var u=["pa","dS","t","art"].join("");a=a.toString()[u](2,"0")}e+=a,0!==t&&1!==t||(e+="-")}}));var c=0,f="";return t.split("-").forEach((function(n,t){if(t<4){for(var e=0,i=0;i<4;i++)i!==l[t]&&(e+=Math.abs(r(n[i])),isNaN(n[i])||c++);var o=a(e);f+=o}})),f+=a(c),{et:new Date(e+"T00:00"),it:e.split("-")[2]===8*(qn.length-2)+"",ot:f}}(t),l=function(n){var t=i[o()]().join("");return n&&0===t.indexOf(n)&&n.length===t.length}(t),(u||l)&&(u&&e<=u.et&&u.ot===t.split(n[0])[4]||l||u.it)||!1)})}));var n=["-"],t="2024-5-20".split("-"),e=new Date(t[0],t[1],t[2]),i=["se","licen","-","v3","l","gp"];function o(){return[["re","verse"].join("")]["".length]}function r(n){return n?isNaN(n)?n.charCodeAt(0)-72:n:""}function a(n){var t=72+n;return t>90&&t<97&&(t+=15),String.fromCharCode(t).toUpperCase()}}(),vn.D(Sn,(function(){Io(!0)})),f.setKeyboardScrolling=Io,f.shared.tt=Bo,f.setAllowScrolling=Ho,f.destroy=function(n){he(!1,"internal"),Ho(!0),so(!1),Io(!1),L(Tt(),_n),vn.R(Mn),n&&(Ut(0),p("img[data-src], source[data-src], audio[data-src], iframe[data-src]",Tt()).forEach((function(n){un(n,"src")})),p("img[data-srcset]").forEach((function(n){un(n,"srcset")})),Z(p("#fp-nav, .fp-slidesNav, .fp-controlArrow")),y(Lt(pn().C),{height:"","background-color":"",padding:""}),y(Lt(pn().slides),{width:""}),y(Tt(),{height:"",position:"","-ms-touch-action":"","touch-action":""}),y(Yt,{overflow:"",height:""}),D(Gt,Kn),D(qt,Vn+" fp-scrollable"),qt.className.split(/\s+/).forEach((function(n){0===n.indexOf("fp-viewing")&&D(qt,n)})),Lt(pn().hn).forEach((function(n){Mt().scrollOverflow&&Ue.Nn(n),D(n,"fp-table active fp-completely "+ct);var t=U(n,"data-fp-styles");t&&n.setAttribute("style",t),m(n,$n)&&!bt&&n.removeAttribute("data-anchor")})),Ht(Tt()),[Xn,rt,it].forEach((function(n){p(n,Tt()).forEach((function(n){z(n)}))})),y(Tt(),{"-webkit-transition":"none",transition:"none"}),D(Tt(),Hn),o.scrollTo(0,0),[$n,Zn,ot].forEach((function(n){D(p("."+n),n)})))},o.fp_easings=g(o.fp_easings,{easeInOutCubic:function(n,t,e,i){return(n/=i/2)<1?e/2*n*n*n+t:e/2*((n-=2)*n*n+2)+t}}),o.jQuery&&function(n,t){n&&t?n.fn.fullpage=function(e){e=n.extend({},e,{$:n}),new t(this[0],e),Object.keys(f).forEach((function(n){Mt().$.fn.fullpage[n]=f[n]}))}:v("error","jQuery is required to use the jQuery fullpage adapter!")}(o.jQuery,_o),_o})); diff --git a/lang/brazilian-portuguese/README.md b/lang/brazilian-portuguese/README.md index ce91e7d42..1399c5efd 100644 --- a/lang/brazilian-portuguese/README.md +++ b/lang/brazilian-portuguese/README.md @@ -18,7 +18,7 @@ --- -![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.22-brightgreen.svg) +![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.23-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) @@ -385,7 +385,8 @@ Então você poderá usá-los e configurá-los conforme explicado em [Opções]( ## Opções -- `licenseKey`: (padrão `null`). **Esta opção é obrigatória.** Se você usar fullPage em um projeto de código não aberto, deverá usar a chave de licença fornecida na compra da licença comercial fullPage. Se o seu projeto for de código aberto e for compatível com a licença GPLv3, você pode usar a opção `gplv3-license`. Leia mais sobre licenças [aqui](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese/#licença) e [no site](https://alvarotrigo.com/fullPage/pricing/). Exemplo de uso: +### licenseKey: +(padrão `null`). **Esta opção é obrigatória.** Se você usar fullPage em um projeto de código não aberto, deverá usar a chave de licença fornecida na compra da licença comercial fullPage. Se o seu projeto for de código aberto e for compatível com a licença GPLv3, você pode usar a opção `gplv3-license`. Leia mais sobre licenças [aqui](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese/#licença) e [no site](https://alvarotrigo.com/fullPage/pricing/). Exemplo de uso: ```javascript new fullpage('#fullpage', { @@ -393,15 +394,20 @@ new fullpage('#fullpage', { }); ``` -- `controlArrows`: (padrão `true`) Determina se as setas de controle devem ser usadas para mover os slides para a direita ou para a esquerda. +### controlArrows: +(padrão `true`) Determina se as setas de controle devem ser usadas para mover os slides para a direita ou para a esquerda. -- `controlArrowsHTML`: (padrão `['', ''],`). Fornece uma maneira de definir a estrutura HTML e as classes que você deseja aplicar às setas de controle para seções com slides horizontais. A matriz contém a estrutura para ambas as setas. O primeiro item é a seta para a esquerda e o segundo, a seta para a direita. +### controlArrowsHTML: +(padrão `['', ''],`). Fornece uma maneira de definir a estrutura HTML e as classes que você deseja aplicar às setas de controle para seções com slides horizontais. A matriz contém a estrutura para ambas as setas. O primeiro item é a seta para a esquerda e o segundo, a seta para a direita. -- `verticalCentered`: (padrão `true`) Centralização vertical do conteúdo usando flexbox. Você pode querer envolver seu conteúdo em um `div` para evitar possíveis problemas. (Usa `flex-direction: column; display: flex; justify-content: center;`) +### verticalCentered: +(padrão `true`) Centralização vertical do conteúdo usando flexbox. Você pode querer envolver seu conteúdo em um `div` para evitar possíveis problemas. (Usa `flex-direction: column; display: flex; justify-content: center;`) -- `scrollingSpeed`: (padrão `700`) Velocidade em milissegundos para as transições de rolagem. +### scrollingSpeed: +(padrão `700`) Velocidade em milissegundos para as transições de rolagem. -- `sectionsColor`: (padrão `none`) Defina a propriedade CSS `background-color` para cada seção. +### sectionsColor: +(padrão `none`) Defina a propriedade CSS `background-color` para cada seção. Example: ```javascript new fullpage('#fullpage', { @@ -409,58 +415,82 @@ new fullpage('#fullpage', { }); ``` -- `anchors`: (padrão `[]`) Define os links âncora (#example) a serem mostrados na URL de cada seção. O valor das âncoras deve ser único. A posição das âncoras na matriz definirá em quais seções a âncora será aplicada. (segunda posição para a segunda seção e assim por diante). O uso de âncoras de navegação para frente e para trás também será possível através do navegador. Essa opção também permite que os usuários marquem uma seção ou slide específico. **Cuidado!** âncoras não podem ter o mesmo valor que qualquer elemento de ID no site (ou elemento NAME para IE). +### anchors: +(padrão `[]`) Define os links âncora (#example) a serem mostrados na URL de cada seção. O valor das âncoras deve ser único. A posição das âncoras na matriz definirá em quais seções a âncora será aplicada. (segunda posição para a segunda seção e assim por diante). O uso de âncoras de navegação para frente e para trás também será possível através do navegador. Essa opção também permite que os usuários marquem uma seção ou slide específico. **Cuidado!** âncoras não podem ter o mesmo valor que qualquer elemento de ID no site (ou elemento NAME para IE). Agora as âncoras podem ser definidas diretamente na estrutura HTML usando o atributo `data-anchor` conforme explicado aqui. -- `lockAnchors`: (padrão `false`) Determina se as âncoras na URL terão algum efeito na biblioteca. Você ainda pode usar âncoras internamente para suas próprias funções e retornos de chamada, mas elas não terão nenhum efeito na rolagem do site. Útil se você quiser combinar fullPage.js com outros plugins usando âncora na URL. +### lockAnchors: +(padrão `false`) Determina se as âncoras na URL terão algum efeito na biblioteca. Você ainda pode usar âncoras internamente para suas próprias funções e retornos de chamada, mas elas não terão nenhum efeito na rolagem do site. Útil se você quiser combinar fullPage.js com outros plugins usando âncora na URL. **Importante** É útil entender que os valores no array de opções `anchors` se correlacionam diretamente com o elemento com a classe `.section` por sua posição na marcação. -- `easing`: (padrão `easeInOutCubic`) Define o efeito de transição a ser usado para a rolagem vertical e horizontal. +### easing: +(padrão `easeInOutCubic`) Define o efeito de transição a ser usado para a rolagem vertical e horizontal. Requer o arquivo `vendors/easings.min.js` ou [jQuery UI](https://jqueryui.com/) para usar algumas de [suas transições](https://api.jqueryui.com/easings/) . Outras bibliotecas podem ser usadas em vez disso. -- `easingcss3`: (padrão `ease`) Define o efeito de transição a ser usado no caso de usar `css3:true`. Você pode usar os [predefinidos](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) (como `linear`, `ease-out`...) ou criar seu próprios usando a função `cubic-bezier`. Você pode querer usar [Matthew Lein CSS Easing Animation Tool](https://matthewlein.com/ceaser/) para isso. +### easingcss3: +(padrão `ease`) Define o efeito de transição a ser usado no caso de usar `css3:true`. Você pode usar os [predefinidos](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) (como `linear`, `ease-out`...) ou criar seu próprios usando a função `cubic-bezier`. Você pode querer usar [Matthew Lein CSS Easing Animation Tool](https://matthewlein.com/ceaser/) para isso. -- `loopTop`: (padrão `false`) Define se a rolagem para cima na primeira seção deve rolar para a última ou não. +### loopTop: +(padrão `false`) Define se a rolagem para cima na primeira seção deve rolar para a última ou não. -- `loopBottom`: (padrão `false`) Define se a rolagem para baixo na última seção deve rolar para a primeira ou não. +### loopBottom: +(padrão `false`) Define se a rolagem para baixo na última seção deve rolar para a primeira ou não. -- `loopHorizontal`: (padrão `true`) Define se os controles deslizantes horizontais farão um loop após alcançar o último slide ou o anterior ou não. +### loopHorizontal`: + (padrão `true`) Define se os controles deslizantes horizontais farão um loop após alcançar o último slide ou o anterior ou não. -- `css3`: (padrão `true`). Define se as transformações JavaScript ou CSS3 devem ser usadas para rolar nas seções e slides. Útil para acelerar o movimento em tablets e dispositivos móveis com navegadores que suportem CSS3. Se esta opção estiver definida como `true` e o navegador não suportar CSS3, um substituto será usado. +### css3`: + (padrão `true`). Define se as transformações JavaScript ou CSS3 devem ser usadas para rolar nas seções e slides. Útil para acelerar o movimento em tablets e dispositivos móveis com navegadores que suportem CSS3. Se esta opção estiver definida como `true` e o navegador não suportar CSS3, um substituto será usado. -- `autoScrolling`: (padrão `true`) Define se deve ser usada a rolagem "automática" ou a "normal". Também afeta a maneira como as seções se encaixam na janela do navegador/dispositivo em tablets e telefones celulares. +### autoScrolling: +(padrão `true`) Define se deve ser usada a rolagem "automática" ou a "normal". Também afeta a maneira como as seções se encaixam na janela do navegador/dispositivo em tablets e telefones celulares. -- `fitToSection`: (padrão `true`) Determina se as seções devem ou não ser ajustadas à viewport. Quando definido como `true`, a seção ativa atual sempre preencherá toda a janela de visualização. Caso contrário, o usuário estará livre para parar no meio de uma seção. +### fitToSection: +(padrão `true`) Determina se as seções devem ou não ser ajustadas à viewport. Quando definido como `true`, a seção ativa atual sempre preencherá toda a janela de visualização. Caso contrário, o usuário estará livre para parar no meio de uma seção. -- `fitToSectionDelay`: (default 1000). If `fitToSection` is set to true, this delays +### fitToSectionDelay: +(default 1000). If `fitToSection` is set to true, this delays the fitting by the configured milliseconds. -- `scrollBar`: (padrão `false`) Determina se a barra de rolagem deve ser usada para as **seções verticais** no site ou não. No caso de usar a barra de rolagem, a funcionalidade `autoScrolling` ainda funcionará conforme o esperado. O usuário também estará livre para rolar o site com a barra de rolagem e fullPage.js caberá na seção na tela quando a rolagem terminar. +### scrollBar: +(padrão `false`) Determina se a barra de rolagem deve ser usada para as **seções verticais** no site ou não. No caso de usar a barra de rolagem, a funcionalidade `autoScrolling` ainda funcionará conforme o esperado. O usuário também estará livre para rolar o site com a barra de rolagem e fullPage.js caberá na seção na tela quando a rolagem terminar. -- `paddingTop`: (padrão `0`) Define o preenchimento superior para cada seção com um valor numérico e sua medida (paddingTop: '10px', paddingTop: '10em'...) Útil no caso de usar um cabeçalho fixo. +### paddingTop: +(padrão `0`) Define o preenchimento superior para cada seção com um valor numérico e sua medida (paddingTop: '10px', paddingTop: '10em'...) Útil no caso de usar um cabeçalho fixo. -- `paddingBottom`: (padrão `0`) Define o preenchimento inferior de cada seção com um valor numérico e sua medida (paddingBottom: '10px', paddingBottom: '10em'...). Útil no caso de usar um rodapé fixo. +### paddingBottom: +(padrão `0`) Define o preenchimento inferior de cada seção com um valor numérico e sua medida (paddingBottom: '10px', paddingBottom: '10em'...). Útil no caso de usar um rodapé fixo. -- `fixedElements`: (padrão `null`) Define quais elementos serão retirados da estrutura de rolagem do plugin que é necessário ao usar a opção `css3` para mantê-los fixos. Requer uma string com os seletores Javascript para esses elementos. (Por exemplo: `fixedElements: '#element1, .element2'`) +### fixedElements: +(padrão `null`) Define quais elementos serão retirados da estrutura de rolagem do plugin que é necessário ao usar a opção `css3` para mantê-los fixos. Requer uma string com os seletores Javascript para esses elementos. (Por exemplo: `fixedElements: '#element1, .element2'`) -- `normalScrollElements`: (padrão `null`) [Demonstração](https://codepen.io/alvarotrigo/pen/RmVazM) Se você quiser evitar a rolagem automática ao rolar sobre alguns elementos, esta é a opção que você precisa usar. (útil para mapas, divs de rolagem etc.) Requer uma string com os seletores Javascript para esses elementos. (Por exemplo: `normalScrollElements: '#element1, .element2'`). Esta opção não deve ser aplicada a nenhum elemento de seção/slide. +### normalScrollElements: +(padrão `null`) [Demonstração](https://codepen.io/alvarotrigo/pen/RmVazM) Se você quiser evitar a rolagem automática ao rolar sobre alguns elementos, esta é a opção que você precisa usar. (útil para mapas, divs de rolagem etc.) Requer uma string com os seletores Javascript para esses elementos. (Por exemplo: `normalScrollElements: '#element1, .element2'`). Esta opção não deve ser aplicada a nenhum elemento de seção/slide. -- `bigSectionsDestination`: (padrão `null`) [Demonstração](https://codepen.io/alvarotrigo/pen/vYLdMrx) Define como rolar para uma seção cuja altura é maior que a viewport e quando não estiver usando `scrollOverflow: verdadeiro`. (Leia [como criar seções menores ou maiores](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese/#criando-seções-maiores-ou-menores)). Por padrão, fullPage.js rola para o topo se você vier de uma seção acima do destino e para baixo se você vier de uma seção abaixo do destino. Os valores possíveis são `top`, `bottom`, `null`. +### bigSectionsDestination: +(padrão `null`) [Demonstração](https://codepen.io/alvarotrigo/pen/vYLdMrx) Define como rolar para uma seção cuja altura é maior que a viewport e quando não estiver usando `scrollOverflow: verdadeiro`. (Leia [como criar seções menores ou maiores](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese/#criando-seções-maiores-ou-menores)). Por padrão, fullPage.js rola para o topo se você vier de uma seção acima do destino e para baixo se você vier de uma seção abaixo do destino. Os valores possíveis são `top`, `bottom`, `null`. -- `keyboardScrolling`: (padrão `true`) Define se o conteúdo pode ser navegado usando o teclado. +### keyboardScrolling: +(padrão `true`) Define se o conteúdo pode ser navegado usando o teclado. -- `touchSensitivity`: (padrão `5`) Define uma porcentagem da largura/altura da janela do navegador e a distância que um deslize deve medir para navegar para a próxima seção/slide +### touchSensitivity: +(padrão `5`) Define uma porcentagem da largura/altura da janela do navegador e a distância que um deslize deve medir para navegar para a próxima seção/slide -- `continuousVertical`: (padrão `false`) Define se a rolagem para baixo na última seção deve rolar para a primeira e se a rolagem para cima na primeira seção deve rolar para a última. Não compatível com `loopTop`, `loopBottom` ou qualquer barra de rolagem presente no site (`scrollBar:true` ou `autoScrolling:false`). +### continuousVertical: +(padrão `false`) Define se a rolagem para baixo na última seção deve rolar para a primeira e se a rolagem para cima na primeira seção deve rolar para a última. Não compatível com `loopTop`, `loopBottom` ou qualquer barra de rolagem presente no site (`scrollBar:true` ou `autoScrolling:false`). -- `continuousHorizontal`: (padrão `false`) [Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Define se deslizar para a direita no último slide deve deslizar para a direita para o primeiro ou não, e se rolar para a esquerda no primeiro slide deve deslizar para a esquerda para o último ou não. Não compatível com `loopHorizontal`. Requer fullpage.js >= 3.0.1. +### continuousHorizontal: +(padrão `false`) [Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Define se deslizar para a direita no último slide deve deslizar para a direita para o primeiro ou não, e se rolar para a esquerda no primeiro slide deve deslizar para a esquerda para o último ou não. Não compatível com `loopHorizontal`. Requer fullpage.js >= 3.0.1. -- `scrollHorizontally`: (padrão `false`) [Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Define se desliza horizontalmente nos controles deslizantes usando a roda do mouse ou o trackpad. Ele só pode ser usado ao usar: `autoScrolling:true`. Ideal para contar histórias. Requer fullpage.js >= 3.0.1. +### scrollHorizontally: +(padrão `false`) [Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Define se desliza horizontalmente nos controles deslizantes usando a roda do mouse ou o trackpad. Ele só pode ser usado ao usar: `autoScrolling:true`. Ideal para contar histórias. Requer fullpage.js >= 3.0.1. -- `interlockedSlides`: (padrão `false`) [Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Determina se mover um controle deslizante horizontal forçará o deslizamento dos controles deslizantes em outra seção na mesma direção. Os valores possíveis são `true`, `false` ou uma matriz com as seções interligadas. Por exemplo, `[1,3,5]` começando por 1. Requer fullpage.js >= 3.0.1. +### interlockedSlides: +(padrão `false`) [Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Determina se mover um controle deslizante horizontal forçará o deslizamento dos controles deslizantes em outra seção na mesma direção. Os valores possíveis são `true`, `false` ou uma matriz com as seções interligadas. Por exemplo, `[1,3,5]` começando por 1. Requer fullpage.js >= 3.0.1. -- `dragAndMove`: (padrão `false`) [Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Ativa ou desativa o arrastar e deslizar de seções e slides usando o mouse ou os dedos. Requer fullpage.js >= 3.0.1. Os valores possíveis são: +### dragAndMove: +(padrão `false`) [Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Ativa ou desativa o arrastar e deslizar de seções e slides usando o mouse ou os dedos. Requer fullpage.js >= 3.0.1. Os valores possíveis são: - `true`: habilita o recurso. - `false`: desativa o recurso. - `vertical`: habilita o recurso apenas verticalmente. @@ -468,21 +498,27 @@ the fitting by the configured milliseconds. - `fingersonly`: habilita o recurso apenas para dispositivos de toque. - `mouseonly`: habilita o recurso apenas para dispositivos desktop (mouse e trackpad). -- `offsetSections`: (padrão `false`)[Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Fornece uma maneira de usar seções que não sejam de tela cheia com base na porcentagem. Ideal para mostrar aos visitantes que há mais conteúdo no site, mostrando parte da seção seguinte ou anterior. Requer fullPage.js >= 3.0.1. +### offsetSections +(padrão `false`)[Extensão de fullpage.js](https://alvarotrigo.com/fullPage/extensions/br/). Fornece uma maneira de usar seções que não sejam de tela cheia com base na porcentagem. Ideal para mostrar aos visitantes que há mais conteúdo no site, mostrando parte da seção seguinte ou anterior. Requer fullPage.js >= 3.0.1. Para definir a porcentagem de cada seção deve-se usar o atributo `data-percentage`. A centralização da seção na janela de visualização pode ser determinada usando um valor booleano no atributo `data-centered` (o padrão é `true` se não for especificado). Por exemplo: ``` html