From b26fc0848ade1c294e09afda55a5c22b96e4c42e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Trigo=20Lo=CC=81pez?= Date: Thu, 21 Jun 2018 18:55:30 +0200 Subject: [PATCH] - Updating localised docs --- README.md | 4 +- lang/chinese/README.md | 468 +++++++++--------- .../how-to-activate-fullpage-extension.md | 2 +- lang/chinese/parallax-extensionmd.md | 8 +- lang/korean/README.md | 338 +++++++------ .../how-to-activate-fullpage-extension.md | 2 +- lang/korean/parallax-extension.md | 8 +- lang/russian/README.md | Bin 115838 -> 118290 bytes .../how-to-activate-fullpage-extension.md | 2 +- lang/russian/parallax-extension.md | 8 +- lang/spanish/README.md | 437 ++++++++-------- .../how-to-activate-fullpage-extension.md | 2 +- lang/spanish/parallax-extension.md | 8 +- 13 files changed, 678 insertions(+), 609 deletions(-) diff --git a/README.md b/README.md index 751e13af8..8343ac40a 100644 --- a/README.md +++ b/README.md @@ -722,8 +722,6 @@ Some callbacks, such as `onLeave` will contain Object type of parameters contain - `anchor`: *(String)* item's anchor. - `index`: *(Number)* item's index. - `item`: *(DOM element)* item element. -- `isSlide`: *(Boolean)* determines if the item is a horizonta slide or not. -- `isSection`: *(Boolean)* determines if the item is a vertical section or not. - `isFirst`: *(Boolean)* determines if the item is the first child. - `isLast`: *(Boolean)* determines if the item is the last child. @@ -939,7 +937,7 @@ Want to build fullpage.js distribution files? Please see [Build Tasks](https://g - [Wordpress theme](https://alvarotrigo.com/fullPage/utils/wordpress.html) - [Vue.js wrapper component](https://github.com/alvarotrigo/vue-fullpage.js) - [CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) (useful to define the `easingcss3` value) -- [fullPage.js jsDelivr CDN](http://www.jsdelivr.com/#!jquery.fullpage) +- [fullPage.js jsDelivr CDN](https://www.jsdelivr.com/package/npm/fullpage.js) - [fullPage.js plugin for October CMS](http://octobercms.com/plugin/freestream-parallax) - [fullPage.js wordpress plugin](https://wordpress.org/plugins/wp-fullpage/) - [fullPage.js Angular2 directive](https://github.com/meiblorn/ng2-fullpage) diff --git a/lang/chinese/README.md b/lang/chinese/README.md index cfb6bbf2e..43dd6465c 100644 --- a/lang/chinese/README.md +++ b/lang/chinese/README.md @@ -12,8 +12,8 @@ --- -![fullPage.js version](http://img.shields.io/badge/fullPage.js-v2.9.7-brightgreen.svg) -[![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT) +![fullPage.js version](http://img.shields.io/badge/fullPage.js-v3.0.0-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)    **|**   *7Kb gziped*   **|**   *Created by [@imac2](https://twitter.com/imac2)* @@ -28,14 +28,9 @@ 通过调用本库可轻易创建全屏滚动网站（也称为单页网站）。 本库可创建全屏滚动网站，同时也可在网站中添加横向滚动条。 -请我喝杯咖啡 -[![赞赏](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=BEK5JQCQMED4J&lc=GB&item_name=fullPage%2ejs¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) - -根据要求，可提供模块定制和紧急更改服务，价格合理。。 - 联系我. - - [介绍](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E4%BB%8B%E7%BB%8D) - [兼容性](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%85%BC%E5%AE%B9%E6%80%A7) +- [许可证](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E8%AE%B8%E5%8F%AF%E8%AF%81) - [用法](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E7%94%A8%E6%B3%95) - [创建链接到段落或幻灯片](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%88%9B%E5%BB%BA%E9%93%BE%E6%8E%A5%E5%88%B0%E6%AE%B5%E8%90%BD%E6%88%96%E5%B9%BB%E7%81%AF%E7%89%87) - [创建更小或更大的段落](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%88%9B%E5%BB%BA%E6%9B%B4%E5%B0%8F%E6%88%96%E6%9B%B4%E5%A4%A7%E7%9A%84%E6%AE%B5%E8%90%BD) @@ -53,7 +48,6 @@ - [资源](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%8F%82%E8%80%83%E8%B5%84%E6%BA%90) - [谁在使用fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E8%B0%81%E5%9C%A8%E4%BD%BF%E7%94%A8-fullpagejs) - [赞赏](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E6%8D%90%E7%8C%AE) -- [许可证](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E8%AE%B8%E5%8F%AF%E8%AF%81) ## 介绍 不仅限于提需求，也欢迎提出编码风格改进的建议。 @@ -63,17 +57,29 @@ fullPage.js在所有的现代浏览器，以及一些旧版浏览器，如Internet Explorer 8，9，Opera 12等都能兼容。 可兼容支持CSS3的浏览器与非支持CSS3的浏览器，适用于旧版浏览器。 同时，手机、平板电脑和触摸屏电脑还提供触屏支持。 -[![Browserstack](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/browserstack2.png)](http://www.browserstack.com/) - 特别感谢[Browserstack](http://www.browserstack.com/) 支持fullpage.js。 +##许可证 + +###商业许可证 +如果您想使用fullPage开发商业网站、主题、项目和应用程序，商业许可证是您应使用的许可证。使用这个许可证，您的源代码将保留专有权。 这意味着，您不必将整个应用程序源代码更改为开源许可证。[[点击此处购买fullpage商业许可证]]（https://alvarotrigo.com/fullPage/pricing/） + +###开源许可证 +如果您使用与[GNU GPL license v3]（https://www.gnu.org/licenses/gpl-3.0.html）兼容的许可证创建开源应用程序，则可以在GPLv3条款下使用fullPage。 + +** JavaScript和CSS文件中的信用评论应保持完整**（即使在组合或缩小后）** + +[阅读更多关于fullPage的许可证]（https://alvarotrigo.com/fullPage/pricing/）。 + + + + ## 用法 正如示例文件所示，需要引用： - - [jQuery库](http://jquery.com/). (最低1.6.0) - - JavaScript 文件`jquery.fullPage.js` (或其缩小版本 `jquery.fullPage.min.js`) - - css 文件`jquery.fullPage.css` + - JavaScript 文件`fullpage.js` (或其缩小版本 `fullpage.min.js`) + - css 文件`fullpage.css` - **或者**，当调用`css3:false`, 时，如果想调用jQuery库中(`linear` and `swing` )或fullPage.js (`easeInOutCubic`)中默认包含的其他缓和效果控件，可添加[jQuery UI库](http://jqueryui.com/) 。 +**可选**，使用`css3:false`时，如果您想要使用库中包含的其他缓动效果的功能（`easeInOutCubic`），您可以添加[easings file](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/easings.min.js)。 ### 使用bower或npm进行安装 **或者**，如果您愿意，可以使用bower或npm安装fullPage.js： @@ -89,18 +95,15 @@ npm install fullpage.js ### 包含文件： ```html - - - + - - + - + ``` ### 可选用CDN： @@ -139,90 +142,114 @@ HTML文件中的首行HTML代码必须使用[HTML DOCTYPE 声明](http://www.cor 可以在[`demoPage.html`文件](https://github.com/alvarotrigo/fullPage.js/tree/master/examples/demoPage.html)看到完整的HTML结构的例子 ### 初始化 -你所需要做的就是在`$(document).ready`函数中调用fullPage.js： + +#### 用Vanilla Javascript初始化 +您只需要在关闭``标签之前调用fullPage.js。 ```javascript -$(document).ready(function() { - $('#fullpage').fullpage(); +new fullpage('#fullpage', { + //options here + autoScrolling:true, + scrollHorizontally: true }); + +//methods +fullpage_api.setAllowScrolling(false); ``` -所有选项设置的更复杂的初始化如下所示： +#### 使用jQuery进行初始化 +如果您需要，您也可以将fullpage.js作为jQuery插件使用！ + ```javascript $(document).ready(function() { $('#fullpage').fullpage({ - //导航 - menu: '#menu', - lockAnchors: false, - anchors:['firstPage', 'secondPage'], - navigation: false, - navigationPosition: 'right', - navigationTooltips: ['firstSlide', 'secondSlide'], - showActiveTooltip: false, - slidesNavigation: false, - slidesNavPosition: 'bottom', - - //滚动 - css3: true, - scrollingSpeed: 700, - autoScrolling: true, - fitToSection: true, - fitToSectionDelay: 1000, - 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: false, - scrollOverflowReset: false, - scrollOverflowOptions: null, - touchSensitivity: 15, - normalScrollElementTouchThreshold: 5, - bigSectionsDestination: null, - - //可访问 - keyboardScrolling: true, - animateAnchor: true, - recordHistory: true, - - //设计 - controlArrows: true, - 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'}, - - //自定义选择器 - sectionSelector: '.section', - slideSelector: '.slide', - - lazyLoading: true, - - //事件 - onLeave: function(index, nextIndex, direction){}, - afterLoad: function(anchorLink, index){}, - afterRender: function(){}, - afterResize: function(){}, - afterResponsive: function(isResponsive){}, - afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, - onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){} + //options here + autoScrolling:true, + scrollHorizontally: true }); + + //methods + $.fn.fullpage.setAllowScrolling(false); +}); +``` + +函数和方法仍然可以用jQuery方式调用，如在[fullPage.js v2.X]中一样（https://github.com/alvarotrigo/fullPage.js/tree/2.9.7）。 + +#### 带有所有功能选项的Vanilla JS 演示 +所有选项设置的更复杂的初始化如下所示： +```javascript +var myFullpage = new fullpage('#fullpage', { + //导航 + menu: '#menu', + lockAnchors: false, + anchors:['firstPage', 'secondPage'], + navigation: false, + navigationPosition: 'right', + navigationTooltips: ['firstSlide', 'secondSlide'], + showActiveTooltip: false, + slidesNavigation: false, + slidesNavPosition: 'bottom', + + //滚动 + css3: true, + scrollingSpeed: 700, + autoScrolling: true, + fitToSection: true, + fitToSectionDelay: 1000, + 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: false, + scrollOverflowReset: false, + scrollOverflowOptions: null, + touchSensitivity: 15, + normalScrollElementTouchThreshold: 5, + bigSectionsDestination: null, + + //可访问 + keyboardScrolling: true, + animateAnchor: true, + recordHistory: true, + + //设计 + controlArrows: true, + 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'}, + + //自定义选择器 + sectionSelector: '.section', + slideSelector: '.slide', + + lazyLoading: true, + + //事件 + onLeave: function(index, nextIndex, direction){}, + afterLoad: function(origin, destination, direction){}, + afterRender: function(){}, + afterResize: function(width, height){}, + afterResponsive: function(isResponsive){}, + afterSlideLoad: function(section, origin, destination, direction){}, + onSlideLeave: function(section, origin, destination, direction){} }); ``` @@ -236,10 +263,8 @@ http://alvarotrigo.com/fullPage/#secondPage/2 （在你手动访问该段落/幻 以下初始化： ```javascript -$(document).ready(function() { - $('#fullpage').fullpage({ - anchors:['firstPage', 'secondPage', 'thirdPage'] - }); +new fullpage('#fullpage', { + anchors:['firstPage', 'secondPage', 'thirdPage'] }); ``` @@ -325,13 +350,13 @@ Fullpage.js在不同的元素中添加多个类来保存网站状态的记录： ### 使用扩展 fullpage.js [提供了一组扩展](http://alvarotrigo.com/fullPage/extensions/)您可以使用它来增强其默认功能。 所有这些都被列为 [fullpage.js 选项](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E9%80%89%E9%A1%B9). -扩展需要使用在[`dist` 文件夹](https://github.com/alvarotrigo/fullPage.js/tree/master/dist/)中的缩小文件 [`jquery.fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/dist/jquery.fullpage.extensions.min.js)，而不是通常的fullPage.js文件 (`jquery.fullpage.js` 或 `jquery.fullpage.min.js`)。 +扩展需要使用在[`dist` 文件夹](https://github.com/alvarotrigo/fullPage.js/tree/master/dist/)中的缩小文件 [`fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/dist/fullpage.extensions.min.js)，而不是通常的fullPage.js文件 (`fullpage.js` 或 `fullpage.min.js`)。 一旦你需要扩展文件，你需要在fullPage之前添加它。 例如，如果我想要使用Continuos Horizontal扩展，我将包含扩展文件，然后包含fullPage文件的扩展版本。 ```html - + ``` 每个扩展都需要激活密钥和许可证密钥。[在这里看到更多细节](https://github.com/alvarotrigo/fullPage.js/blob/master/lang/chinese/how-to-activate-fullpage-extension.md). @@ -340,6 +365,10 @@ fullpage.js [提供了一组扩展](http://alvarotrigo.com/fullPage/extensions/) ## 选项 +-`licenseKey`：（默认`null`）。 **此选项是强制性的。**如果您在非开源项目中使用fullPage，则应使用购买fullPage商业许可证时提供的许可证密钥。 否则，您可以使用字符串`OPEN-SOURCE-GPLV3-LICENSE`。 请阅读更多关于许可[这里]（https://github.com/alvarotrigo/fullPage.js#license）和[在网页上]（https://alvarotrigo.com/fullPage/pricing/）。 + +- `v2compatible`: (默认 `false`). 确定是否使其与版本2编写的任何代码100％兼容，忽略版本3的新功能或api更改。状态类，回调签名等的工作方式与在版本2上完全相同。**请注意该选项将在之后的某个时候被删除。**。 + - `controlArrows`：（默认为 `true`）确定是否将幻灯片的控制箭头向右或向左移动。 - `verticalCentered`：（默认为`true`）在段落内部垂直居中。 当设置为`true`时，您的代码将被库包装。可考虑使用委托或在`afterRender`回调中加载其他脚本。 @@ -349,7 +378,7 @@ fullpage.js [提供了一组扩展](http://alvarotrigo.com/fullPage/extensions/) - `sectionsColor`：（默认`none`）为每个部分定义CSS`background-color`属性。 例： ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], }); ``` @@ -362,7 +391,7 @@ $('#fullpage').fullpage({ **重要**理解 `anchors`选项数组中的值通过在标记中的位置直接关联到具有`.section` 类的元素是有帮助的。 - `easing`:(默认`easeInOutCubic`）定义用于垂直和水平滚动的过渡效果。 -它需要文件`vendors / jquery.easings.min.js`或[jQuery UI](http://jqueryui.com/)来使用[它的转换](http://api.jqueryui.com/easings/)。 其他库可以用来代替。 +它需要文件`vendors / easings.min.js`或[jQuery UI](http://jqueryui.com/)来使用[它的转换](http://api.jqueryui.com/easings/)。 其他库可以用来代替。 - `easingcss3`: （默认`ease`）定义在使用`css3：true`的情况下使用的过渡效果。 你可以使用[预定义的](http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp)（比如`linear`，`ease-out` ...）或者使用`立方bezier`功能创建你自己的。 你可能想使用[Matthew Lein CSS缓动动画工具](http://matthewlein.com/ceaser/)。 @@ -372,7 +401,7 @@ $('#fullpage').fullpage({ - `loopHorizontal`:（默认为`true`）定义水平滑块是否在到达上一张或上一张幻灯片后循环。 -- `css3`: （默认`true`）。 定义是否使用JavaScript或CSS3变换在部分和幻灯片中滚动。 有助于通过支持CSS3的浏览器加速平板电脑和移动设备的移动。 如果此选项设置为`true，并且浏览器不支持CSS3，则将使用jQuery后备。 +- `css3`: （默认`true`）。 定义是否使用JavaScript或CSS3变换在部分和幻灯片中滚动。 有助于通过支持CSS3的浏览器加速平板电脑和移动设备的移动。 如果此选项设置为`true，并且浏览器不支持CSS3，则将使用后备。 - `autoScrolling`: （默认为`true`）定义是使用“自动”滚动还是“正常”滚动。 它同时也影响了平板电脑和移动电话中浏览器/设备窗口部分适配的方式。 @@ -387,9 +416,9 @@ $('#fullpage').fullpage({ - `paddingBottom`: （默认为`0`）用数值和度量（paddingBottom：'10px'，paddingBottom：'10em'...）定义每个部分的底部填充。 使用固定页脚的情况下会有用。 -- `fixedElements`: （默认`null`）定义当使用`css3`选项保持固定时，哪些元素将从插件的滚动结构中移除。 它需要一个字符串与这些元素的jQuery选择器。 （例如：`fixedElements：'＃element1，.element2'`） +- `fixedElements`: （默认`null`）定义当使用`css3`选项保持固定时，哪些元素将从插件的滚动结构中移除。 它需要一个字符串与这些元素的Javascript选择器。 （例如：`fixedElements：'＃element1，.element2'`） -- `normalScrollElements`: （默认`null`）如果你想在滚动某些元素时避免自动滚动，这是你需要使用的选项。 （地图，滚动div等有用）它需要一个字符串与这些元素的jQuery选择器。 （例如：`normalScrollElements：'＃element1，.element2'`）。 此选项不应该应用于任何节/幻灯片元素本身。 +- `normalScrollElements`: （默认`null`）如果你想在滚动某些元素时避免自动滚动，这是你需要使用的选项。 （地图，滚动div等有用）它需要一个字符串与这些元素的Javascript选择器。 （例如：`normalScrollElements：'＃element1，.element2'`）。 此选项不应该应用于任何节/幻灯片元素本身。 - `normalScrollElementTouchThreshold` : （默认`5`）定义html节点树的跳数阈值Fullpage将测试`normalScrollElements是否匹配，以允许在触摸设备上的div的滚动功能。 （例如：`normalScrollElementTouchThreshold：3`） @@ -423,7 +452,7 @@ $('#fullpage').fullpage({ - `resetSliders`: （默认`false`）。 [fullpage.js的扩展](http://alvarotrigo.com/fullPage/extensions/)。 定义是否在离开节后重置每个滑块。 需要fullpage.js> = 2.8.3。 -- `fadingEffect`: （默认`false`）。 [fullpage.js的扩展](http://alvarotrigo.com/fullPage/extensions/)。 定义是否使用淡入淡出效果，而不是默认的滚动效果。 可能的值是`true`，`false`，`sections`，`slideides`。 因此，可以垂直或水平地应用，或者同时应用于两者。 需要fullpage.js> = 2.8.6。 +- `fadingEffect`: （默认`false`）。 [fullpage.js的扩展](http://alvarotrigo.com/fullPage/extensions/)。 定义是否使用淡入淡出效果，而不是默认的滚动效果。 可能的值是`true`，`false`，`sections`，`slides`。 因此，可以垂直或水平地应用，或者同时应用于两者。 需要fullpage.js> = 2.8.6。 - `animateAnchor`: （默认`true`）定义给定锚点（＃）的站点的负载是否会随着动画滚动到其目的地或直接加载给定部分。 @@ -441,7 +470,7 @@ $('#fullpage').fullpage({ ``` ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu' }); @@ -462,12 +491,12 @@ $('#fullpage').fullpage({ - `slidesNavPosition`: （默认`bottom`）定义滑块的横向导航栏的位置。 值为`top`和`bottom`。 您可能需要修改CSS样式以确定从顶部或底部以及任何其他样式（如颜色）的距离。 - `scrollOverflow`: （默认为`false`）（与IE 8不兼容）定义在内容大于它的高度的情况下是否为节/幻灯片创建滚动。 当设置为`true`时，您的内容将被插件包装。 考虑使用委托或在`afterRender`回调中加载其他脚本。 -如果设置为`true`，则需要库[`scrolloverflow.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/scrolloverflow.min.js)。 这个文件必须在fullPage.js插件之前而非jQuery加载。 +如果设置为`true`，则需要库[`scrolloverflow.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/scrolloverflow.min.js)。 这个文件必须在fullPage.js插件之前而非jQuery（在使用它的情况下）加载。 例如： ```html - + ``` 为了防止fullpage.js在某些节或幻灯片中创建滚动条，请使用`fp-noscroll`类。 例如： `
` @@ -478,9 +507,9 @@ $('#fullpage').fullpage({ - `scrollOverflowOptions`: 当使用scrollOverflow：true时，fullpage.js将使用[iScroll.js库文件](https://github.com/cubiq/iscroll/)的分叉和修改版本。 您可以通过为要使用的iScroll.js选项提供fullpage.js来自定义滚动行为。 查看[它的文档](http://iscrolljs.com/)了解更多信息。 -- `sectionSelector`: （默认`.section`）定义用于插件部分的jQuery选择器。 有时可能需要更改，以避免与使用与fullpage.js相同的选择器的其他插件的问题。 +- `sectionSelector`: （默认`.section`）定义用于插件部分的Javascript选择器。 有时可能需要更改，以避免与使用与fullpage.js相同的选择器的其他插件的问题。 -- `slideSelector`: （默认`.slide`）定义用于插件幻灯片的jQuery选择器。 有时可能需要更改，以避免与使用与fullpage.js相同的选择器的其他插件的问题。 +- `slideSelector`: （默认`.slide`）定义用于插件幻灯片的Javascript选择器。 有时可能需要更改，以避免与使用与fullpage.js相同的选择器的其他插件的问题。 - `responsiveWidth`: （默认`0`）一个正常的滚动（`autoScrolling：false`）将在定义的宽度下以像素为单位使用。 如果用户希望将自己的响应式CSS用于身体标记，则会将`fp-responsive`类添加到身体标记中。 例如，如果设置为900，则每当浏览器的宽度小于900时，插件将像正常站点一样滚动。 @@ -497,51 +526,65 @@ $('#fullpage').fullpage({ ## 方法 你可以在[这里](http://alvarotrigo.com/fullPage/examples/methods.html)看到它们 +### getActiveSection() +[示例](https://codepen.io/alvarotrigo/pen/VdpzRN/) 获取包含活跃部分及其属性的对象（键入[Section](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#callbacks））。 + +```javascript +fullpage_api.getActiveSection(); +``` + +### getActiveSlide() +[示例](https://codepen.io/alvarotrigo/pen/VdpzRN/) 获取包含活跃部分及其属性的对象（键入[Slide](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#callbacks））。）。 + +```javascript +fullpage_api.getActiveSlide(); +``` + ### moveSectionUp() [示例](http://codepen.io/alvarotrigo/pen/GJXNMN) 向上滚动一节： ```javascript -$.fn.fullpage.moveSectionUp(); +fullpage_api.moveSectionUp(); ``` --- ### moveSectionDown() [示例](http://codepen.io/alvarotrigo/pen/jPvVZx) 向下滚动一节： ```javascript -$.fn.fullpage.moveSectionDown(); +fullpage_api.moveSectionDown(); ``` --- ### moveTo(第节, 幻灯片) [示例](http://codepen.io/alvarotrigo/pen/doqOmY) 将页面滚动到给定节并滑动。 第一张幻灯片，默认情况下，将有索引0。 ```javascript /*滚动到锚链接`firstSlide`和第二张幻灯片的部分 */ -$.fn.fullpage.moveTo('firstSlide', 2); +fullpage_api.moveTo('firstSlide', 2); ``` ```javascript //滚动到网站的第三节 -$.fn.fullpage.moveTo(3, 0); +fullpage_api.moveTo(3, 0); //这是一样的 -$.fn.fullpage.moveTo(3); +fullpage_api.moveTo(3); ``` --- ### silentMoveTo(第节, 幻灯片) [示例](http://codepen.io/alvarotrigo/pen/doqOeY) 与[`moveTo`](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#moveto%E7%AC%AC%E8%8A%82-%E5%B9%BB%E7%81%AF%E7%89%87)完全相同，但是在这种情况下，它将执行没有动画的滚动。 直接跳到目的地。 ```javascript /*滚动到锚链接`firstSlide`和第二张幻灯片的部分 */ -$.fn.fullpage.silentMoveTo('firstSlide', 2); +fullpage_api.silentMoveTo('firstSlide', 2); ``` --- ### moveSlideRight() [示例](http://codepen.io/alvarotrigo/pen/Wvgoyz) 将当前节的水平滑块滚动到下一张幻灯片： ```javascript -$.fn.fullpage.moveSlideRight(); +fullpage_api.moveSlideRight(); ``` --- ### moveSlideLeft() [示例](http://codepen.io/alvarotrigo/pen/gpdLjW) 将当前节的水平滑块滚动到上一张幻灯片: ```javascript -$.fn.fullpage.moveSlideLeft(); +fullpage_api.moveSlideLeft(); ``` --- ### setAutoScrolling(boolean) @@ -549,7 +592,7 @@ $.fn.fullpage.moveSlideLeft(); 定义页面滚动行为的方式。 如果设置为`true`，则将使用"自动"滚动，否则将使用站点的"手动"或"正常"滚动。 ```javascript -$.fn.fullpage.setAutoScrolling(false); +fullpage_api.setAutoScrolling(false); ``` --- ### setFitToSection(boolean) @@ -557,21 +600,21 @@ $.fn.fullpage.setAutoScrolling(false); ```JavaScript -$.fn.fullpage.setFitToSection(false); +fullpage_api.setFitToSection(false); ``` --- ### fitToSection() [示例](http://codepen.io/alvarotrigo/pen/JWWagj) 滚动到最近的适合视口的活动节。 ```javascript -$.fn.fullpage.fitToSection(); +fullpage_api.fitToSection(); ``` --- ### setLockAnchors(boolean) [示例](http://codepen.io/alvarotrigo/pen/yNxVRQ) 设置选项`lockAnchors`的值，确定锚是否在URL中有效。 ```javascript -$.fn.fullpage.setLockAnchors(false); +fullpage_api.setLockAnchors(false); ``` --- ### setAllowScrolling(boolean, [directions]) @@ -582,13 +625,13 @@ $.fn.fullpage.setLockAnchors(false); ```javascript //禁用滚动 -$.fn.fullpage.setAllowScrolling(false); +fullpage_api.setAllowScrolling(false); //禁用向下滚动 -$.fn.fullpage.setAllowScrolling(false, 'down'); +fullpage_api.setAllowScrolling(false, 'down'); //禁用向下和向右滚动 -$.fn.fullpage.setAllowScrolling(false, 'down, right'); +fullpage_api.setAllowScrolling(false, 'down, right'); ``` --- ### setKeyboardScrolling(boolean, [directions]) @@ -598,27 +641,27 @@ $.fn.fullpage.setAllowScrolling(false, 'down, right'); ```javascript //禁用所有键盘滚动 -$.fn.fullpage.setKeyboardScrolling(false); +fullpage_api.setKeyboardScrolling(false); //禁用键盘向下滚动 -$.fn.fullpage.setKeyboardScrolling(false, 'down'); +fullpage_api.setKeyboardScrolling(false, 'down'); //禁用键盘向下和向右滚动 -$.fn.fullpage.setKeyboardScrolling(false, 'down, right'); +fullpage_api.setKeyboardScrolling(false, 'down, right'); ``` --- ### setRecordHistory(boolean) [示例](http://codepen.io/alvarotrigo/pen/rVZWQb) 定义是否在URL中记录每个散列更改的历史记录。 ```javascript -$.fn.fullpage.setRecordHistory(false); +fullpage_api.setRecordHistory(false); ``` --- ### setScrollingSpeed(milliseconds) [示例](http://codepen.io/alvarotrigo/pen/NqLbeY) 定义以毫秒为单位的滚动速度。 ```javascript -$.fn.fullpage.setScrollingSpeed(700); +fullpage_api.setScrollingSpeed(700); ``` --- ### destroy(type) @@ -628,10 +671,10 @@ $.fn.fullpage.setScrollingSpeed(700); ```javascript //销毁由fullPage.js创建的所有Javascript事件（URL中的卷动，hashchange） -$.fn.fullpage.destroy(); +fullpage_api.destroy(); //销毁所有的JavaScript事件，以及在原始HTML标记中由fullPage.js所做的任何修改。 -$.fn.fullpage.destroy('all'); +fullpage_api.destroy('all'); ``` --- ### reBuild() @@ -639,85 +682,91 @@ $.fn.fullpage.destroy('all');   非常适合与AJAX调用或站点的DOM结构中的外部更改结合使用，特别是在使用`scrollOverflow：true`时。 ```javascript -$.fn.fullpage.reBuild(); +fullpage_api.reBuild(); ``` --- ### setResponsive(boolean) [示例](http://codepen.io/alvarotrigo/pen/WxOyLA) 设置页面的响应模式。 当设置为`true时，自动滚动将被关闭，结果与`responsiveWidth`或`responsiveHeight`选项被触发时的结果完全相同。 ```javascript -$.fn.fullpage.setResponsive(true); +fullpage_api.setResponsive(true); ``` --- ### responsiveSlides.toSections() [fullpage.js的扩展](http://alvarotrigo.com/fullPage/extensions/)。 需要fullpage.js> = 2.8.5。将水平幻灯片变成垂直节。 ```javascript -$.fn.fullpage.responsiveSlides.toSections(); +fullpage_api.responsiveSlides.toSections(); ``` --- ### responsiveSlides.toSlides() [fullpage.js的扩展](http://alvarotrigo.com/fullPage/extensions/)。 需要fullpage.js> = 2.8.5。将原始幻灯片（现转换为垂直节）重新转换为水平幻灯片。 ```javascript -$.fn.fullpage.responsiveSlides.toSlides(); +fullpage_api.responsiveSlides.toSlides(); ``` ## Callbacks [示例](http://codepen.io/alvarotrigo/pen/XbPNQv) 你可以在[这里](http://alvarotrigo.com/fullPage/examples/callbacks.html)看到他们。 -### afterLoad (`anchorLink`, `index`) -滚动结束之后，一旦加载了节，就会触发回调。参数： +一些回调，例如`onLeave`将包含`Section`或`Slide`类型的参数。 这些对象将包含以下属性： +- `anchor`: *(String)* 项目的anchorLink。 +- `index`: *(Number)* 项目的index。 +- `item`: *(DOM element)* 项目元素。 +- `isFirst`: *(Boolean)* 判断游标是否在第一行。 +- `isLast`: *(Boolean)* 判断游标是否在最后一行。 -- `anchorLink`：该部分对应的anchorLink。 -- `index：该部分的索引。 从1开始。 +### afterLoad (`origin`, `destination`, `direction`) +滚动结束之后，一旦加载了节，就会触发回调。参数： -如果在插件中没有定义anchorLink，那么`index`参数将是唯一使用的参数。 +- `origin`: *(Object)* active section +- `destination`: *(Object)* 终点部分。 +- `direction`: *(String)* 它将根据滚动方向采用`up`或`down`值。 例如： ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], - afterLoad: function(anchorLink, index){ - var loadedSection = $(this); + afterLoad: function(origin){ + var loadedSection = this; //使用 index - if(index == 3){ + if(origin.index == 2){ alert("第3节停止加载"); } //使用 anchorLink - if(anchorLink == 'secondSlide'){ + if(origin.anchor == 'secondSlide'){ alert("第2节停止加载"); } } }); ``` --- -### onLeave (`index`, `nextIndex`, `direction`) +### onLeave (`origin`, `destination`, `direction`) 一旦用户离开某个节，过渡到新节，就会触发此回调。 返回“false”将在移动发生之前取消移动。 参数： -- `index`离开节的索引。 从1开始。 -- `nextIndex`：目标节的索引。 从1开始。 -- direction`：取决于滚动方向，取值为`up`或`down。 +- `origin`: *(Object)* 起始部分 +- `destination`: *(Object)* 终点部分。 +- `direction`: *(String)* 它将根据滚动方向采用`up`或`down`值。 例如： ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { onLeave: function(index, nextIndex, direction){ - var leavingSection = $(this); + var leavingSection = this; //离开第二节后 - if(index == 2 && direction =='down'){ + if(origin.index == 1 && direction =='down'){ alert("前往第3节！"); } - else if(index == 2 && direction == 'up'){ + else if(origin.index == 1 && direction == 'up'){ alert("前往第1节！"); } } @@ -728,10 +777,10 @@ $('#fullpage').fullpage({ 您可以通过在`onLeave`回调函数上返回`false来取消滚动： ```javascript -$('#fullpage').fullpage({ - onLeave: function(index, nextIndex, direction){ +new fullpage('#fullpage', { + onLeave: function(origin, destination, direction){ //如果目标是第三节，它将不会滚动 - if(nextIndex == 3){ + if(destination.index == 2){ return false; } } @@ -745,9 +794,9 @@ $('#fullpage').fullpage({ 例如： ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { afterRender: function(){ - var pluginContainer = $(this); + var pluginContainer = this; alert("DOM结构已完成"); } }); @@ -756,12 +805,17 @@ $('#fullpage').fullpage({ ### afterResize() 调整浏览器窗口大小后，会触发此回调。 就在节被调整之后。 +参数： + +- `width`: *(Number)* 屏幕宽度。 +- `height`: *(Number)* 屏幕高度。 + 例如： ```javascript -$('#fullpage').fullpage({ - afterResize: function(){ - var pluginContainer = $(this); +new fullpage('#fullpage', { + afterResize: function(width, height){ + var pluginContainer = this; alert("节已重新调整大小"); } }); @@ -772,43 +826,45 @@ $('#fullpage').fullpage({ 参数： -- `isResponsive`：布尔值，用于确定是否进入响应模式（`true`）或返回正常模式（`false`）。 +- `isResponsive`：*(Boolean)* 布尔值，用于确定是否进入响应模式（`true`）或返回正常模式（`false`）。 例如： ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { afterResponsive: function(isResponsive){ alert("是否响应" + isResponsive); } }); ``` --- -### afterSlideLoad (`anchorLink`, `index`, `slideAnchor`, `slideIndex`) -滚动结束后，加载一个节的幻灯片后触发回调。参数： +### afterSlideLoad (`section`, `origin`, `destination`, `direction`) +滚动结束后，加载一个节的幻灯片后触发回调。 -- `anchorLink`：该节对应的anchorLink。 -- `index`：该节的索引。 从1开始。 -- `slideAnchor`：与幻灯片对应的锚点（如果有的话） -- `slideIndex`：幻灯片的索引。 从1开始（默认幻灯片不计算为幻灯片，但作为一个节） +参数： -如果没有为幻灯片或幻灯片定义anchorLinks，那么`slideIndex`参数将是唯一使用的参数。例如： +- `section`: *(Object)* 活跃垂直部分。 +- `origin`: *(Object)*水平滑动起始。 +- `destination`: *(Object)*水平滑动终点。 +- `direction`: *(String)* `它将根据滚动方向采用right` 或 `left` 值。 + +例如： ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], - afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){ - var loadedSlide = $(this); + afterSlideLoad: function( section, origin, destination, direction){ + var loadedSlide = this; //第二节的第一张幻灯片 - if(anchorLink == 'secondPage' && slideIndex == 1){ + if(section.anchor == 'secondPage' && destination.index == 1){ alert("第一张幻灯片加载完毕"); } //第二节的第二张幻灯片（假设#secondSlide是 //为第二张幻灯片锚点 - if(index == 2 && slideIndex == 'secondSlide'){ + if(section.index == 1 && destination.anchor == 'secondSlide'){ alert("第二张幻灯片加载完毕"); } } @@ -817,32 +873,31 @@ $('#fullpage').fullpage({ --- -### onSlideLeave (`anchorLink`, `index`, `slideIndex`, `direction`, `nextSlideIndex`) +### onSlideLeave (`section`, `origin`, `destination`, `direction`) 一旦用户离开幻灯片转到另一个幻灯片，就会触发此回调。返回`false`将在移动发生之前取消移动。 参数： -- `anchorLink`：该节对应的anchorLink。 -- `index`：该节的索引。 从1开始。 -- `slideIndex`：幻灯片的索引。 **从0开始。** -- `direction`：取决于滚动方向，取值为`right`或`left`。 -- `nextSlideIndex`：目标幻灯片的索引。 **从0开始。** +- `section`: *(Object)* active vertical section. +- `origin`: *(Object)* horizontal slide of origin. +- `destination`: *(Object)* destination horizontal slide. +- `direction`: *(String)* `right` or `left` depending on the scrolling direction. 例如： ```javascript -$('#fullpage').fullpage({ - onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){ - var leavingSlide = $(this); +new fullpage('#fullpage', { + onSlideLeave: function( section, origin, destination, direction){ + var leavingSlide = this; //留下第二节的第一张幻灯片 - if(index == 2 && slideIndex == 0 && direction == 'right'){ + if(section.index == 1 && origin.index == 0 && direction == 'right'){ alert("离开第一张幻灯片！"); } //将第二节的第三张幻灯片留在左边 - if(index == 2 && slideIndex == 2 && direction == 'left'){ + if(section.index == 1 && origin.index == 2 && direction == 'left'){ alert("前往第二张幻灯片！"); } } @@ -871,7 +926,7 @@ $('#fullpage').fullpage({ - [Wordpress theme](http://alvarotrigo.com/fullPage/utils/wordpress.html) - [Vue.js wrapper component](https://github.com/alvarotrigo/vue-fullpage.js) - [CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) (用于定义`easingcss3的值) -- [fullPage.js jsDelivr CDN](http://www.jsdelivr.com/#!jquery.fullpage) +- [fullPage.js jsDelivr CDN](https://www.jsdelivr.com/package/npm/fullpage.js) - [fullPage.js plugin for October CMS](http://octobercms.com/plugin/freestream-parallax) - [fullPage.js wordpress plugin](https://wordpress.org/plugins/wp-fullpage/) - [fullPage.js Angular2 directive](https://github.com/meiblorn/ng2-fullpage) @@ -956,39 +1011,10 @@ $('#fullpage').fullpage({ [![Donate](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=BEK5JQCQMED4J&lc=GB&item_name=fullPage%2ejs¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) - -## 许可证 - -**JavaScript和CSS文件中的信用评论应保持不变**（即使在组合或缩小之后） - -（MIT许可证） - ## Sponsors Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://alvarotrigo.com/#contact)] | [[Become a patreon](https://www.patreon.com/fullpagejs)] [![Stackpath](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/stackpath3.png)](https://www.stackpath.com/) [![Browserstack](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/browserstack3.png)](http://www.browserstack.com/) [![HostPresto](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/hostpresto3.png)](https://hostpresto.com/?utm_source=alvaro) -[![CodePen](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/codepen3.png)](https://codepen.com) - - -Copyright (c) 2013 Alvaro Trigo <alvaro@alvarotrigo.com> - -特此免费授予任何人获得许可 -这个软件的副本和相关的文档文件（ -`软件`），不受限制地处理本软件，包括 -但不限于使用，复制，修改，合并，发布， -分发，再许可和/或出售软件的副本，并且 -允许提供软件的人这样做，但须遵守 -以下条件： - -上述版权声明和本许可声明应为 -包括在本软件的所有副本或主要部分。 - -本软件按`原样`提供，不提供任何形式的担保， -明示或暗示，包括但不限于保证 -适销性，针对特定用途的适用性和不侵权。 -在任何情况下，作者或版权所有者都不承担任何责任 -索赔，损害赔偿或其他责任，无论是在合同行为中， -民事侵权行为或其他由此引起或与之有关的 -软件或软件中的使用或其他交易。 +[![CodePen](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/codepen3.png)](https://codepen.com) \ No newline at end of file diff --git a/lang/chinese/how-to-activate-fullpage-extension.md b/lang/chinese/how-to-activate-fullpage-extension.md index 13096d178..aaa45c080 100644 --- a/lang/chinese/how-to-activate-fullpage-extension.md +++ b/lang/chinese/how-to-activate-fullpage-extension.md @@ -8,7 +8,7 @@ 例如： ```javascript -$('#fullpage').fullPage({ +var myFullpage = new fullpage('#fullpage', { fadingEffect: true, fadingEffectKey: '激活密钥应在这里', }); diff --git a/lang/chinese/parallax-extensionmd.md b/lang/chinese/parallax-extensionmd.md index 147075553..c4d21a8e8 100644 --- a/lang/chinese/parallax-extensionmd.md +++ b/lang/chinese/parallax-extensionmd.md @@ -86,21 +86,21 @@ 为给定选项设一个值。`optionName` 可以是`parallaxOptions`中的任意选项 (`type`, `percentage` 或 `property`). ```javascript //改变属性`type`的值 -$.fn.fullpage.parallax.setOption('type', 'cover'); +fullpage_api.parallax.setOption('type', 'cover'); //改变属性`percentage`的值 -$.fn.fullpage.parallax.setOption('percentage', '30'); +fullpage_api.parallax.setOption('percentage', '30'); ``` --- ### init() 启用视差效果。如果您需要在某个特定时间点动态启用该功能，可以调用这个方法。 ```javascript -$.fn.fullpage.parallax.init(); +fullpage_api.parallax.init(); ``` --- ### destroy() 关闭视差效果。 ```javascript -$.fn.fullpage.parallax.destroy(); +fullpage_api.parallax.destroy(); ``` diff --git a/lang/korean/README.md b/lang/korean/README.md index 4781f6631..168f96b24 100644 --- a/lang/korean/README.md +++ b/lang/korean/README.md @@ -12,8 +12,8 @@ --- -![fullPage.js version](http://img.shields.io/badge/fullPage.js-v2.9.7-brightgreen.svg) -[![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT) +![fullPage.js version](http://img.shields.io/badge/fullPage.js-v3.0.0-brightgreen.svg) +[![License](https://img.shields.io/badge/License-GPL-blue.svg)](https://www.gnu.org/licenses/gpl-3.0.html) [![PayPal](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)    **|**   *7Kb gziped*   **|**   *Created by [@imac2](https://twitter.com/imac2)* @@ -27,13 +27,10 @@ (단일 페이지 웹사이트 또는 한페이지 사이트로도 알려진) 전체 화면 스크롤 웹사이트를 만드는 간단하고 쓰기 쉬운 라이브러리입니다. 전체 화면 스크롤 웹사이트를 만들 수 있으며 웹사이트 구역 안에 수평 방향 슬라이더를 추가할 수 있습니다. -커피 한 잔 값을 기부하시는 건 어떤가요? -[![Donate](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=BEK5JQCQMED4J&lc=GB&item_name=fullPage%2ejs¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) - -요청시 적절한 가격에 라이브러리 맞춤화와 긴급 변경이 가능합니다. 문의하기. - [소개](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean/#%EC%86%8C%EA%B0%9C) - [호환성](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%ED%98%B8%ED%99%98%EC%84%B1) +- [라이선스](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EB%9D%BC%EC%9D%B4%EC%84%A0%EC%8A%A4) - [사용법](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EC%82%AC%EC%9A%A9%EB%B2%95) - [구역 또는 슬라이드로 가는 링크 만들기](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EA%B5%AC%EC%97%AD-%EB%98%90%EB%8A%94-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%EB%A1%9C-%EA%B0%80%EB%8A%94-%EB%A7%81%ED%81%AC-%EB%A7%8C%EB%93%A4%EA%B8%B0) - [구역을 더 작게 또는 크게 만들기](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EA%B5%AC%EC%97%AD%EC%9D%84-%EB%8D%94-%EC%9E%91%EA%B2%8C-%EB%98%90%EB%8A%94-%ED%81%AC%EA%B2%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0) @@ -51,7 +48,6 @@ - [재료가 되는 도구](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EC%9E%AC%EB%A3%8C%EA%B0%80-%EB%90%98%EB%8A%94-%EB%8F%84%EA%B5%AC) - [누가 fullPage.js를 쓰나요?](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EB%88%84%EA%B0%80-fullpagejs%EB%A5%BC-%EC%93%B0%EB%82%98%EC%9A%94) - [기부](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EA%B8%B0%EB%B6%80) -- [라이선스](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EB%9D%BC%EC%9D%B4%EC%84%A0%EC%8A%A4) ## 소개 기능 요청뿐만 아니라 코딩 스타일 개선까지 언제든 의견 제안을 매우 환영합니다. @@ -62,17 +58,26 @@ fullPage.js는 모든 최신 브라우저에서 기능을 100% 발휘하며 Inte CSS3 지원이 되는 브라우저와 지원되지 않는 브라우저 모두에서 잘 작동되기 때문에 이전 브라우저와의 호환성에 적합합니다. 스마트폰, 태블릿, 터치화면 컴퓨터의 터치 지원도 됩니다. -[![Browserstack](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/browserstack2.png)](http://www.browserstack.com/) - fullpage.js를 지원해 주시는 [Browserstack](http://www.browserstack.com/)에게 특별히 감사드립니다. +## 라이선스 + +### 상업 라이선스 +fullPage를 써서 상업용 웹사이트, 주제, 프로젝트, 앱을 개발하고자 하신다면 상업 라이선스가 적절합니다. 상업 라이선스로 귀하의 소스 코드에 저작권을 부여하실 수 있습니다. 다시 말해 귀하의 앱의 전 소스 코드를 오픈 소스 라이선스로 바꾸시지 않아도 된다는 것입니다. [[여기서 Fullpage 상업 라이선스를 구매하세요]](https://alvarotrigo.com/fullPage/pricing/) + +### 오픈소스 라이선스 +[GNU GPL 라이선스 v3](https://www.gnu.org/licenses/gpl-3.0.html)과 호환되는 라이선스 하에서 오픈소스 앱을 만드신다면, GPLv3 조건에서 fullPage를 사용하실 수 있습니다. + +**자바스크립트와 CSS 파일에 있는 개발자를 밝히는 말은 (결합이나 최소화 이후에도) 그대로 두셔야 합니다** + +[fullPage의 라이선스에 대해 더 자세히 읽어보기](https://alvarotrigo.com/fullPage/pricing/). + ## 사용법 예시 파일에서 보실 수 있듯이 다음을 넣으셔야 합니다. - - [jQuery 라이브러리](http://jquery.com/). (최소 1.6.0) - - `jquery.fullPage.js` 자바스크립트 파일 (또는 더 작아진 버전인 `jquery.fullPage.min.js`) - - `jquery.fullPage.css`css 파일 + - `fullpage.js` 자바스크립트 파일 (또는 더 작아진 버전인 `fullpage.min.js`) + - `fullpage.css`css 파일 - **선택 사항으로**`css3:false`를 쓰실 때 jQuery 라이브러리에 들어있는 효과(`linear`와 `swing` )나 fullPage.js에 기본으로 들어있는 (`easeInOutCubic`) 이외에 다른 easing 효과를 쓰고 싶으시다면 [jQuery UI 라이브러리](http://jqueryui.com/)를 추가하실 수 있습니다. + **선택 사항으로**`css3:false`를 쓰실 때 라이브러리에 들어있는 효과(`easeInOutCubic`) 이외에 다른 easing 효과를 쓰고 싶으시다면 [easing 파일](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/easings.min.js)를 추가하실 수 있습니다. ### bower 또는 npm을 써서 설치하기 **선택 사항으로**, 만약 아래가 더 마음에 드신다면 fullPage.js를 bower나 npm과 함께 설치하실 수 있습니다. @@ -88,18 +93,15 @@ npm install fullpage.js ### 들어가는 파일: ```html - - - + - - + - + ``` ### CDN 사용 가능 @@ -136,19 +138,43 @@ HTML 코드의 첫번째 줄에 필수 [HTML DOCTYPE 표기](http://www.corelang [`demoPage.html` 파일](https://github.com/alvarotrigo/fullPage.js/tree/master/examples/demoPage.html)에서 완전히 구현되는 HTML 구조 예시를 보실 수 있습니다. ### 초기 설정 -`$(document).ready` 안에 fullPage.js를 소환하시기만 하면 됩니다. +#### 바닐라 자바스크립트를 사용한 초기화 +`` 태그를 닫기 전 fullpage.js를 불러오기만 하시면 됩니다. ```javascript -$(document).ready(function() { - $('#fullpage').fullpage(); +new fullpage('#fullpage', { + //options here + autoScrolling:true, + scrollHorizontally: true }); + +//methods +fullpage_api.setAllowScrolling(false); ``` -모든 옵션이 들어간 더 복잡한 초기 설정은 아래와 같이 코딩될 수 있습니다. +#### jQuery를 사용한 초기화 +원하실 경우 fullpage.js를 jQuery 플러그인으로 쓰실 수 있습니다! + ```javascript $(document).ready(function() { $('#fullpage').fullpage({ + //options here + autoScrolling:true, + scrollHorizontally: true + }); + + //methods + $.fn.fullpage.setAllowScrolling(false); +}); +``` +[fullPage.js v2.X](https://github.com/alvarotrigo/fullPage.js/tree/2.9.7)에서 보실 수 있는 것과 마찬가지로 기능과 방법을 여전히 jQuery 방식으로 불러오실 수 있습니다. + +#### 모든 옵션이 들어간 바닐라 JS 예시 + +모든 옵션이 들어간 더 복잡한 초기 설정은 아래와 같이 코딩될 수 있습니다. +```javascript + new fullpage('#fullpage', { //이동 menu: '#menu', lockAnchors: false, @@ -212,15 +238,14 @@ $(document).ready(function() { lazyLoading: true, - //사건(이벤트) - onLeave: function(index, nextIndex, direction){}, - afterLoad: function(anchorLink, index){}, - afterRender: function(){}, - afterResize: function(){}, - afterResponsive: function(isResponsive){}, - afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, - onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){} - }); + //사건(이벤트) + onLeave: function(origin, destination, direction){}, + afterLoad: function(origin, destination, direction){}, + afterRender: function(){}, + afterResize: function(){width, height}, + afterResponsive: function(isResponsive){}, + afterSlideLoad: function(section, origin, destination, direction){}, + onSlideLeave: function(section, origin, destination, direction){} }); ``` @@ -232,10 +257,8 @@ fullPage.js를 (`anchors 옵션이나 각 구역마다 `data-anchor 속성을 초기 설정이 다음과 같이 설정될 경우 ```javascript -$(document).ready(function() { - $('#fullpage').fullpage({ - anchors:['firstPage', 'secondPage', 'thirdPage'] - }); +new fullpage('#fullpage', { + anchors:['firstPage', 'secondPage', 'thirdPage'] }); ``` @@ -318,13 +341,13 @@ Fullpage.js는 웹사이트의 상태를 기록하기 위해 여러가지 요소 ### 확장 프로그램 사용 fullpage.js는 기본 기능을 강화하기 위해 쓸 수 있는 [여러가지 확장 프로그램을 지원합니다](http://alvarotrigo.com/fullPage/extensions/). 모든 확장 프로그램이 [fullpage.js 옵션](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EC%98%B5%EC%85%98)으로 열거되어 있습니다. -확장 프로그램을 쓰시려면 보통 쓰시는 fullPage.js 파일(`jquery.fullpage.js` 또는 `jquery.fullpage.min.js`) 말고 [`dist` 폴더](https://github.com/alvarotrigo/fullPage.js/tree/master/dist) 안에 있는 작아진 파일[`jquery.fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/dist/jquery.fullpage.extensions.min.js)을 쓰셔야 합니다. +확장 프로그램을 쓰시려면 보통 쓰시는 fullPage.js 파일(`fullpage.js` 또는 `fullpage.min.js`) 말고 [`dist` 폴더](https://github.com/alvarotrigo/fullPage.js/tree/master/dist) 안에 있는 작아진 파일[`fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/dist/fullpage.extensions.min.js)을 쓰셔야 합니다. 확장 파일을 획득하시면 fullPage 앞에 추가하셔야 합니다. 예를 들어 연속 수평(Continuous Horizontal) 확장을 쓰신다면 확장 파일을 먼저 넣고 그 다음에 fullPage 연장 버전을 넣습니다. ```html - + ``` 각 확장 프로그램마다 활성화 키와 라이선스 키가 필요합니다. [더 상세한 사항은 여기를 참조하세요](https://github.com/alvarotrigo/fullPage.js/blob/master/lang/korean/how-to-activate-fullpage-extension.md). @@ -333,6 +356,10 @@ fullpage.js는 기본 기능을 강화하기 위해 쓸 수 있는 [여러가지 ## 옵션 +- `licenseKey`: (기본값 `null`). **이 옵션은 필수입니다.** fullPage를 비오픈소스 프로젝트에서 쓰신다면 fullPage 상업 라이선스 구매시 받으신 라이선스 키를 쓰셔야 합니다. 이외 경우에는 `OPEN-SOURCE-GPLV3-LICENSE` 문자열을 쓰실 수 있습니다. 라이선스에 관한 더 상세한 정보는 [여기](https://github.com/alvarotrigo/fullPage.js#license)와 [웹사이트에서](https://alvarotrigo.com/fullPage/pricing/) 읽어보실 수 있습니다. + +- `v2compatible`: (기본값 `false`). 버전 3의 새로운 기능이나 api 변화를 무시하고 버전 2에 맞게 만들어진 모든 코드와 100% 호환 가능한지를 결정합니다. 상태 클래스, 콜백 시그니처 등이 버전 2에서 작동했던 것과 마찬가지로 완전히 동일하게 작동합니다. **이 옵션은 언젠가는 없어질 것임을 염두해 주십시오**. + - `controlArrows`: (기본값 `true`) 제어 화살표를 눌러서 슬라이드가 오른쪽 또는 왼쪽으로 움직이도록 허용할지 여부를 결정합니다. - `verticalCentered`: (기본값 `true`) 구역 내 컨텐츠가 수직으로 중심에 위치하도록 합니다. `true`로 설정되면 컨텐츠가 라이브러리로 포장됩니다. 위임(delegation)을 사용하거나 `afterRender` 콜백에 있는 다른 스크립트를 불러오는 것을 고려해 보세요. @@ -341,7 +368,7 @@ fullpage.js는 기본 기능을 강화하기 위해 쓸 수 있는 [여러가지 - `sectionsColor`: (기본값 `none`) 각 구역별 CSS `background-color` 속성을 정의합니다. 아래는 예시입니다. ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], }); ``` @@ -354,7 +381,7 @@ $('#fullpage').fullpage({ **중요** `anchors` 옵션 배열에 있는 값이 교정(마크업) 내 위치에 의해 `.section` 클래스를 지닌 요소와 직접 상관관계에 있음을 이해하시면 도움이 됩니다. - `easing`: (기본값 `easeInOutCubic`) 수직 및 수평 스크롤시 전이 효과를 정의합니다. -[전이](http://api.jqueryui.com/easings/) 효과 중 일부를 사용하기 위해서는 `vendors/jquery.easings.min.js` 또는 [jQuery UI](http://jqueryui.com/) 파일이 필요합니다. 대신 다른 라이브러리를 쓸 수도 있습니다. +[전이](http://api.jqueryui.com/easings/) 효과 중 일부를 사용하기 위해서는 `vendors/easings.min.js` 또는 [jQuery UI](http://jqueryui.com/) 파일이 필요합니다. 대신 다른 라이브러리를 쓸 수도 있습니다. - `easingcss3`: (기본값 `ease`) `css3:true`를 쓰는 경우 사용할 전이 효과를 정의합니다. (`linear`, `ease-out` 등) [미리 정의된 효과](http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp)를 쓰시거나 `cubic-bezier` 기능을 쓰셔서 나만의 효과를 만드실 수 있습니다. [Matthew Lein CSS Easing Animation Tool](http://matthewlein.com/ceaser/)도 쓰실 수 있습니다. @@ -364,7 +391,7 @@ $('#fullpage').fullpage({ - `loopHorizontal`: (기본값 `true`) 수평 슬라이더가 마지막이나 이전 슬라이드에 다다른 후 다시 반복할지 여부를 정의합니다. -- `css3`: (기본값 `true`). 구역과 슬라이드 안에서 스크롤하기 위해 JavaScript를 쓸지 CSS3을 쓸지를 정의합니다. CSS3 지원 브라우저를 쓰는 태블릿과 스마트폰에서 움직이는 속도를 높이는 데 유용합니다. 이 옵션을 `true`로 설정하고 브라우저가 CSS3을 지원하지 않는다면 jQuery 폴백(fallback)이 대신 쓰이게 됩니다. +- `css3`: (기본값 `true`). 구역과 슬라이드 안에서 스크롤하기 위해 JavaScript를 쓸지 CSS3을 쓸지를 정의합니다. CSS3 지원 브라우저를 쓰는 태블릿과 스마트폰에서 움직이는 속도를 높이는 데 유용합니다. 이 옵션을 `true`로 설정하고 브라우저가 CSS3을 지원하지 않는다면 폴백(fallback)이 대신 쓰이게 됩니다. - `autoScrolling`: (기본값 `true`) "automatic" 스크롤을 쓸지 "normal" 스크롤을 쓸지를 정의합니다. 태블릿과 스마트폰 브라우저/기기 창에서 구역이 들어맞는 방법에도 영향을 미칩니다. @@ -378,9 +405,9 @@ $('#fullpage').fullpage({ - `paddingBottom`: (기본값 `0`) 구역별 하위에 채우는 부분을 수치와 측정값(`paddingBottom: '10px'`, `paddingBottom: '10em'`...)으로 정의합니다. 고정된 꼬리말을 쓰실 때 유용합니다. -- `fixedElements`: (기본값 `null`) 플러그인의 스크롤 구조에서 어느 요소를 빼낼지를 정의합니다. `css3` 옵션을 쓰실 때 고정하려면 반드시 빼내셔야 합니다. 이 요소에는 jQuery 선택자가 들어간 문자열이 필요합니다. (예시: `fixedElements: '#element1, .element2'`) +- `fixedElements`: (기본값 `null`) 플러그인의 스크롤 구조에서 어느 요소를 빼낼지를 정의합니다. `css3` 옵션을 쓰실 때 고정하려면 반드시 빼내셔야 합니다. 이 요소에는 Javascript 선택자가 들어간 문자열이 필요합니다. (예시: `fixedElements: '#element1, .element2'`) -- `normalScrollElements`: (기본값 `null`) 일부 요소 위를 스크롤할때 자동 스크롤을 피하고 싶으시다면 이 옵션을 쓰셔야 합니다. (지도, div 스크롤 등에 유용.) 이 요소에는 jQuery 선택자가 들어간 문자열이 필요합니다. (예시: `normalScrollElements: '#element1, .element2'`) +- `normalScrollElements`: (기본값 `null`) 일부 요소 위를 스크롤할때 자동 스크롤을 피하고 싶으시다면 이 옵션을 쓰셔야 합니다. (지도, div 스크롤 등에 유용.) 이 요소에는 Javascript 선택자가 들어간 문자열이 필요합니다. (예시: `normalScrollElements: '#element1, .element2'`) - `normalScrollElementTouchThreshold` : (기본값 `5`) 터치 기기에서 div 스크롤 기능을 허용하는 데 `normalScrollElements`가 좋은 짝인지 보기 위해 Fullpage가 시험할 html 노드 나무 위 홉(hop) 수 한계점을 설정합니다. (예시: `normalScrollElementTouchThreshold: 3`) @@ -429,7 +456,7 @@ $('#fullpage').fullpage({ ``` ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu' }); @@ -450,11 +477,11 @@ $('#fullpage').fullpage({ - `slidesNavPosition`: (기본값 `bottom`) 수평방향 이동 막대기 슬라이더 위치를 지정합니다. `top`과 `bottom`을 값으로 인정합니다. 상부 또는 하부에서의 거리와 색깔 등 다른 모든 스타일을 정의하려면 CSS 스타일을 수정하시면 됩니다. - `scrollOverflow`: (기본값 `false`) (IE 8과 호환되지 않음) 컨텐츠가 구역/슬라이드의 높이보다 더 큰 경우 스크롤을 만들지 여부를 정의합니다. `true`로 설정되면 컨텐츠가 플러그인으로 포장됩니다. 위임을 하거나 `afterRender` 콜백에 있는 다른 스크립트를 불러오시는 걸 고려해 보세요. -`true`로 설정하시는 경우 [`scrolloverflow.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/scrolloverflow.min.js) 벤더 라이브러리가 필요합니다. 이 파일은 fullPage.js 플러그인 이전에 불러와야 합니다 하지만 jQuery 후에. 다음은 예시입니다. +`true`로 설정하시는 경우 [`scrolloverflow.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/scrolloverflow.min.js) 벤더 라이브러리가 필요합니다. 이 파일은 fullPage.js 플러그인 이전에 불러와야 합니다 하지만 jQuery (사용하시는 경우) 후에. 다음은 예시입니다. ```html - + ``` 특정 구역이나 슬라이드에서 fullpage.js의 스크롤 막대기를 생성하고 싶지 않으시다면 `fp-noscroll` 클래스를 쓰세요. 예시: `
` @@ -465,9 +492,9 @@ $('#fullpage').fullpage({ - `scrollOverflowOptions`: scrollOverflow:true를 쓰시면 fullpage.js가 [iScroll.js 라이브러리](https://github.com/cubiq/iscroll/)의 포크(forked) 및 수정 버전을 사용합니다. iScroll.js 옵션을 fullpage.js에게 주시면 스크롤 행위를 맞춤화하실 수 있습니다. 더 자세한 정보를 알고 싶으시다면 [기록 문서](http://iscrolljs.com/)를 방문해 보세요. -- `sectionSelector`: (기본값 `.section`) 플러그인 구역에 쓰이는 jQuery 선택자를 정의합니다. fullpage.js와 동일한 선택자를 쓰는 다른 플러그인과 문제를 일으키지 않도록 가끔 변경해야 할 수도 있습니다. +- `sectionSelector`: (기본값 `.section`) 플러그인 구역에 쓰이는 Javascript 선택자를 정의합니다. fullpage.js와 동일한 선택자를 쓰는 다른 플러그인과 문제를 일으키지 않도록 가끔 변경해야 할 수도 있습니다. -- `slideSelector`: (기본값 `.slide`) 플러그인 슬라이드에 쓰이는 jQuery 선택자를 정의합니다. fullpage.js와 동일한 선택자를 쓰는 다른 플러그인과 문제를 일으키지 않도록 가끔 변경해야 할 수도 있습니다. +- `slideSelector`: (기본값 `.slide`) 플러그인 슬라이드에 쓰이는 Javascript 선택자를 정의합니다. fullpage.js와 동일한 선택자를 쓰는 다른 플러그인과 문제를 일으키지 않도록 가끔 변경해야 할 수도 있습니다. - `responsiveWidth`: (기본값 `0`) 픽셀로 정의된 폭 아래에 정상 스크롤(`autoScrolling:false`)을 씁니다. 사용자가 자신만의 반응형 CSS에 쓰고 싶은 경우를 위해 `fp-responsive` 클래스가 바디 태그에 추가됩니다. 예를 들어 900에 설정되는 경우 브라우저의 너비가 900 미만이 될 때마다 플러그인이 정상 웹사이트처럼 스크롤됩니다. @@ -484,32 +511,46 @@ $('#fullpage').fullpage({ ## 방법 어떻게 작동하는지 [여기](http://alvarotrigo.com/fullPage/examples/methods.html)서 보실 수 있습니다. +### getActiveSection +[데모](https://codepen.io/alvarotrigo/pen/VdpzRN/) 활성화된 슬라이드 및 슬라이드 특성이 들어간 객체(type [Section](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#callbacks))를 얻습니다. + +```javascript +fullpage_api.getActiveSection(); +``` + +### getActiveSlide +[데모](https://codepen.io/alvarotrigo/pen/VdpzRN/) 활성화된 구역 및 구역 특성이 들어간 객체(type [Slide](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#callbacks))를 얻습니다. + +```javascript +fullpage_api.getActiveSlide(); +``` + ### moveSectionUp() -[데모](http://codepen.io/alvarotrigo/pen/GJXNMN) 한 구역 위로 스크롤합니다. +[데모](http://codepen.io/alvarotrigo/pen/GJXNMN) [데모](http://codepen.io/alvarotrigo/pen/GJXNMN) 한 구역 위로 스크롤합니다. ```javascript -$.fn.fullpage.moveSectionUp(); +fullpage_api.moveSectionUp(); ``` --- ### moveSectionDown() [데모](http://codepen.io/alvarotrigo/pen/jPvVZx) 한 구역 아래로 스크롤합니다. ```javascript -$.fn.fullpage.moveSectionDown(); +fullpage_api.moveSectionDown(); ``` --- ### moveTo(구역, 슬라이드) [데모](http://codepen.io/alvarotrigo/pen/doqOmY) 페이지를 주어진 구역과 슬라이드로 스크롤합니다. 기본 설정으로 보이는 첫번째 페이지가 색인 0이 됩니다. ```javascript /*`firstSlide` 앵커 링크가 있는 구역과 두번째 슬라이드로 스크롤하기 */ -$.fn.fullpage.moveTo('firstSlide', 2); +fullpage_api.moveTo('firstSlide', 2); ``` ```javascript //웹사이트의 세번째 구역으로 스크롤하기 -$.fn.fullpage.moveTo(3, 0); +fullpage_api.moveTo(3, 0); //이는 다음과 동일 -$.fn.fullpage.moveTo(3); +fullpage_api.moveTo(3); ``` --- ### silentMoveTo(구역, 슬라이드) @@ -517,42 +558,42 @@ $.fn.fullpage.moveTo(3); [`moveTo`](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#moveto%EA%B5%AC%EC%97%AD-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C)와 완전히 동일하지만, 이 경우에는 애니메이션 없이 스크롤 기능을 수행합니다. 목적지로 바로 건너뜁니다. ```javascript /*`firstSlide` 앵커 링크가 있는 구역과 두번째 슬라이드로 스크롤하기 */ -$.fn.fullpage.silentMoveTo('firstSlide', 2); +fullpage_api.silentMoveTo('firstSlide', 2); ``` --- ### moveSlideRight() [데모](http://codepen.io/alvarotrigo/pen/Wvgoyz) 현 구역의 수평 슬라이더를 다음 슬라이드로 스크롤합니다. ```javascript -$.fn.fullpage.moveSlideRight(); +fullpage_api.moveSlideRight(); ``` --- ### moveSlideLeft() [데모](http://codepen.io/alvarotrigo/pen/gpdLjW) 현 구역의 수평 슬라이더를 이전 슬라이드로 스크롤합니다. ```javascript -$.fn.fullpage.moveSlideLeft(); +fullpage_api.moveSlideLeft(); ``` --- ### setAutoScrolling(불리언) [데모](http://codepen.io/alvarotrigo/pen/rVZWrR) 스크롤 환경설정을 실시간으로 설정합니다. 페이지의 스크롤 행위 방식을 정의합니다. `true`로 설정되면 "자동" 스크롤을 쓰고, 이외의 경우에는 웹사이트의 "수동"이나 "정상" 스크롤을 씁니다. ```javascript -$.fn.fullpage.setAutoScrolling(false); +fullpage_api.setAutoScrolling(false); ``` --- ### setFitToSection(불리언) [데모](http://codepen.io/alvarotrigo/pen/GJXNYm) `fitToSection` 옵션값을 설정하여 구역을 화면 안에 맞출지 여부를 정합니다. ```javascript -$.fn.fullpage.setFitToSection(false); +fullpage_api.setFitToSection(false); ``` --- ### fitToSection() [데모](http://codepen.io/alvarotrigo/pen/JWWagj) 가장 가까운 활성화된 구역으로 스크롤하여 구역을 모바일 지원(viewport)에 맞춥니다. ```javascript -$.fn.fullpage.fitToSection(); +fullpage_api.fitToSection(); ``` --- ### setLockAnchors(불리언) @@ -560,7 +601,7 @@ $.fn.fullpage.fitToSection(); `lockAnchors` 옵션값을 설정하여 앵커가 URL 안에서 효과를 낼지 여부를 설정합니다. ```javascript -$.fn.fullpage.setLockAnchors(false); +fullpage_api.setLockAnchors(false); ``` --- ### setAllowScrolling(불리언, [방향]) @@ -571,13 +612,13 @@ $.fn.fullpage.setLockAnchors(false); ```javascript //스크롤 비활성화 -$.fn.fullpage.setAllowScrolling(false); +fullpage_api.setAllowScrolling(false); //아래 방향 스크롤 비활성화 -$.fn.fullpage.setAllowScrolling(false, 'down'); +fullpage_api.setAllowScrolling(false, 'down'); //아래 및 오른쪽 방향 스크롤 비활성화 -$.fn.fullpage.setAllowScrolling(false, 'down, right'); +fullpage_api.setAllowScrolling(false, 'down, right'); ``` --- ### setKeyboardScrolling(불리언, [방향]) @@ -587,27 +628,27 @@ $.fn.fullpage.setAllowScrolling(false, 'down, right'); ```javascript //모든 키보드 스크롤 비활성화 -$.fn.fullpage.setKeyboardScrolling(false); +fullpage_api.setKeyboardScrolling(false); //키보드 아래 방향 스크롤 비활성화 -$.fn.fullpage.setKeyboardScrolling(false, 'down'); +fullpage_api.setKeyboardScrolling(false, 'down'); //키보드 아래 및 오른쪽 방향 스크롤 비활성화 -$.fn.fullpage.setKeyboardScrolling(false, 'down, right'); +fullpage_api.setKeyboardScrolling(false, 'down, right'); ``` --- ### setRecordHistory(불리언) [데모](http://codepen.io/alvarotrigo/pen/rVZWQb) URL의 각 해쉬 변경 기록을 기록할지 여부를 정의합니다. ```javascript -$.fn.fullpage.setRecordHistory(false); +fullpage_api.setRecordHistory(false); ``` --- ### setScrollingSpeed(1000분의 1초) [데모](http://codepen.io/alvarotrigo/pen/NqLbeY) 스크롤 속도를 1000분의 1초 단위로 정의합니다. ```javascript -$.fn.fullpage.setScrollingSpeed(700); +fullpage_api.setScrollingSpeed(700); ``` --- ### destroy(종류) @@ -618,10 +659,10 @@ AJAX로 컨텐츠를 불러오실 때 적합합니다. ```javascript //fullPage.js가 만드는 모든 자바스크립트 사건(스크롤, URL의 해쉬 변경 등 이벤트)을 제거...) -$.fn.fullpage.destroy(); +fullpage_api.destroy(); //귀하의 HTML 교정(마크업) 원본에 추가된 모든 자바스크립트 사건(이벤트)과 모든 fullPage.js 수정을 제거. -$.fn.fullpage.destroy('all'); +fullpage_api.destroy('all'); ``` --- ### reBuild() @@ -629,13 +670,13 @@ DOM 구조가 새로운 창 크기나 컨텐츠에 맞도록 업데이트됩니 특히 `scrollOverflow:true`를 쓰실 때 AJAX 콜이나 웹사이트의 DOM 구조 안에서 외부 변화와 함께 쓰시면 적합합니다. ```javascript -$.fn.fullpage.reBuild(); +fullpage_api.reBuild(); ``` --- ### setResponsive(불리언) [데모](http://codepen.io/alvarotrigo/pen/WxOyLA) 페이지의 반응형 모드를 설정합니다. `true`로 설정되면 autoScrolling이 꺼지고 `responsiveWidth`나 `responsiveHeight` 옵션이 실행될 때와 완전히 동일한 결과가 나옵니다. ```javascript -$.fn.fullpage.setResponsive(true); +fullpage_api.setResponsive(true); ``` --- ### responsiveSlides.toSections() @@ -643,7 +684,7 @@ $.fn.fullpage.setResponsive(true); 수평 슬라이드를 수직 구역으로 바꿉니다. ```javascript -$.fn.fullpage.responsiveSlides.toSections(); +fullpage_api.responsiveSlides.toSections(); ``` --- ### responsiveSlides.toSlides() @@ -651,66 +692,72 @@ $.fn.fullpage.responsiveSlides.toSections(); (수직 구역으로 전환된) 슬라이드를 다시 수평 슬라이드로 되돌립니다. ```javascript -$.fn.fullpage.responsiveSlides.toSlides(); +fullpage_api.responsiveSlides.toSlides(); ``` ## 콜백 [데모](http://codepen.io/alvarotrigo/pen/XbPNQv) [여기](http://alvarotrigo.com/fullPage/examples/callbacks.html)서 어떻게 작동되는지 보실 수 있습니다. -### afterLoad (`anchorLink`, `index`) +`onLeave` 등 일부 콜백에는 `Section` 또는 `Slide` 종류의 매개 변수가 들어갑니다. 이들 객체에는 다음 특성이 들어갑니다. +- `anchor`: *(String)* 아이템의 앵커링크. +- `index`: *(Number)* 아이템의 색인. +- `item`: *(DOM element)* 아이템 요소. +- `isFirst`: *(Boolean)* 아이템이 첫 번째 자식인지를 결정합니다. +- `isLast`: *(Boolean)* 아이템이 마지막 자식인지를 결정합니다. + +### afterLoad (`origin`, `destination`, `direction`) 구역을 불러오고 나서 스크롤이 끝나면 콜백이 실행됩니다. 매개 변수: -- `anchorLink`: 구역에 대응하는 앵커링크. -- `index`: 구역의 색인. 1에서 시작. - -앵커링크가 플러그인에서 정의되지 않은 경우 `index` 매개 변수만 쓸 수 있습니다. +- `origin`: *(Object)* 활성화된 구역 +- `destination`: *(Object)* 목적지 구역. +- `direction`: *(String)* 스크롤하는 방향에 따라 `up` 또는 `down` 예시: ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], - afterLoad: function(anchorLink, index){ - var loadedSection = $(this); + afterLoad: function(origin){ + var loadedSection = this; //색인 사용 - if(index == 3){ + if(origin.index == 2){ alert("Section 3 ended loading"); } //앵커링크 사용 - if(anchorLink == 'secondSlide'){ + if(origin.anchor == 'secondSlide'){ alert("Section 2 ended loading"); } } }); ``` --- -### onLeave (`index`, `nextIndex`, `direction`) +### onLeave (`origin`, `destination`, `direction`) 사용자가 구역을 떠나고 새로운 구역으로 이동하는 와중에 콜백이 실행됩니다. `false`로 되돌리면 발동하기 전에 취소됩니다. 매개 변수: -- `index`: 떠나는 구역의 색인. 1에서 시작. -- `nextIndex`: 도착지 구역의 색인. 1에서 시작. -- `direction`: 스크롤 방향에 따라 `up` 또는 `down`값을 갖습니다. +- `origin`: *(Object)* 출발 구역. +- `destination`: *(Object)* 목적지 구역. +- `direction`: *(String)* 스크롤하는 방향에 따라 `up` 또는 `down` 예시: ```javascript -$('#fullpage').fullpage({ - onLeave: function(index, nextIndex, direction){ - var leavingSection = $(this); +new fullpage('#fullpage', { + onLeave: function(origin, destination, direction){ + var leavingSection = this; //구역 2를 떠난 후 - if(index == 2 && direction =='down'){ + if(origin.index == 1 && direction =='down'){ alert("Going to section 3!"); } - else if(index == 2 && direction == 'up'){ + else if(origin.index == 1 && direction == 'up'){ alert("Going to section 1!"); } } @@ -721,10 +768,10 @@ $('#fullpage').fullpage({ `onLeave` 콜백에서 `false`로 되돌려서 스크롤을 취소하실 수 있습니다. ```javascript -$('#fullpage').fullpage({ - onLeave: function(index, nextIndex, direction){ +new fullpage('#fullpage', { + onLeave: function(origin, destination, direction){ //목적지가 세번째 구역인 경우 스크롤되지 않음 - if(nextIndex == 3){ + if(destination.index == 2){ return false; } } @@ -738,23 +785,28 @@ $('#fullpage').fullpage({ 예시: ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { afterRender: function(){ - var pluginContainer = $(this); + var pluginContainer = this; alert("The resulting DOM structure is ready"); } }); ``` --- -### afterResize() +### afterResize(width, height) 브라우저 창의 크기가 바뀐 뒤에 이 콜백이 실행됩니다. 구역 크기가 바뀐 직후에 실행됩니다. +매개 변수: + +- `width`: *(Number)* 창의 너비. +- `height`: *(Number)* 창의 폭. + 예시: ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { afterResize: function(){ - var pluginContainer = $(this); + var pluginContainer = this; alert("The sections have finished resizing"); } }); @@ -770,40 +822,39 @@ fullpage.js가 정상 모드에서 반응형 모드로 바뀌거나 반응형 예시: ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { afterResponsive: function(isResponsive){ alert("Is responsive: " + isResponsive); } }); ``` --- -### afterSlideLoad (`anchorLink`, `index`, `slideAnchor`, `slideIndex`) +### afterSlideLoad (`section`, `origin`, `destination`, `direction`) 구역의 슬라이드를 불러오고 나서 스크롤이 끝나면 콜백이 실행됩니다. 매개 변수: -- `anchorLink`: 구역에 대응하는 앵커링크. -- `index`: 구역의 색인. 1에서 시작. -- `slideAnchor`: (앵커가 있는 경우) 슬라이드에 대응하는 앵커 -- `slideIndex`: 슬라이드의 색인. 1에서 시작. (기본으로 설정된 슬라이드는 슬라이드가 아닌 구역으로 간주됨) +- `section`: *(Object)* 활성화된 수직 구역. +- `origin`: *(Object)* 출발 수평 슬라이드. +- `destination`: *(Object)* 도착 수평 슬라이드. +- `direction`: *(String)* 스크롤 방향에 따라 `right` 또는 `left`. -슬라이드 하나 또는 여러 개의 앵커링크가 정의되지 않은 경우 `slideIndex`가 유일한 매개 변수가 됩니다. 예시: ```javascript -$('#fullpage').fullpage({ +new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], - afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){ - var loadedSlide = $(this); + afterSlideLoad: function( section, origin, destination, direction){ + var loadedSlide = this; //두번째 구역의 첫번째 슬라이드 - if(anchorLink == 'secondPage' && slideIndex == 1){ + if(section.anchor == 'secondPage' && destination == 1){ alert("First slide loaded"); } //두번째 구역의 두번째 슬라이드 //(#secondSlide가 두번째 슬라이드의 앵커라고 가정할 때) - if(index == 2 && slideIndex == 'secondSlide'){ + if(section.index == 1 && destination.anchor == 'secondSlide'){ alert("Second slide loaded"); } } @@ -812,33 +863,32 @@ $('#fullpage').fullpage({ --- -### onSlideLeave (`anchorLink`, `index`, `slideIndex`, `direction`, `nextSlideIndex`) +### onSlideLeave (`section`, `origin`, `destination`, `direction`) 사용자가 슬라이드를 떠나서 다른 슬라이드로 이동하는 와중에 콜백이 실행됩니다. `false`로 되돌리면 발동하기 전에 취소됩니다. 매개 변수: -- `anchorLink`: 구역에 대응하는 앵커링크. -- `index`: 구역의 색인. 1에서 시작. -- `slideIndex`: 슬라이드의 색인. **0에서 시작.** -- `direction`: 스크롤 방향에 따라 `right` 또는 `left`값을 갖습니다. -- `nextSlideIndex`: 도착 슬라이드의 색인. **0에서 시작.** +- `section`: *(Object)* 활성화된 수직 구역. +- `origin`: *(Object)* 출발 수평 슬라이드. +- `destination`: *(Object)* 도착 수평 슬라이드. +- `direction`: *(String)* 스크롤 방향에 따라 `right` 또는 `left`. 예시: ```javascript -$('#fullpage').fullpage({ - onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){ - var leavingSlide = $(this); +new fullpage('#fullpage', { + onSlideLeave: function( section, origin, destination, direction){ + var leavingSlide = this; //두번째 구역의 첫번째 슬라이드를 떠나서 오른쪽으로 이동 - if(index == 2 && slideIndex == 0 && direction == 'right'){ + if(section.index == 1 && origin.index == 0 && direction == 'right'){ alert("Leaving the fist slide!!"); } //두번째 구역의 세번째 슬라이드를 떠나서 왼쪽으로 이동 - if(index == 2 && slideIndex == 2 && direction == 'left'){ + if(section.index == 1 && origin.index == 2 && direction == 'left'){ alert("Going to slide 2! "); } } @@ -867,7 +917,7 @@ fullpage.js 배포 파일을 구축하고 싶으신가요? [구축 도전](https - [워드프레스 테마](https://alvarotrigo.com/fullPage/utils/wordpress.html) - [Vue.js wrapper component](https://github.com/alvarotrigo/vue-fullpage.js) - [CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) (`easingcss3` 값을 정의하는 데 유용) -- [fullPage.js jsDelivr CDN](http://www.jsdelivr.com/#!jquery.fullpage) +- [fullPage.js jsDelivr CDN](https://www.jsdelivr.com/package/npm/fullpage.js) - [fullPage.js October CMS 플러그인](http://octobercms.com/plugin/freestream-parallax) - [fullPage.js 워드프레스 플러그인](https://wordpress.org/plugins/wp-fullpage/) - [fullPage.js Angular2 directive](https://github.com/meiblorn/ng2-fullpage) @@ -958,38 +1008,4 @@ Become a sponsor and get your logo on our README on Github with a link to your s [![Stackpath](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/stackpath3.png)](https://www.stackpath.com/) [![Browserstack](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/browserstack3.png)](http://www.browserstack.com/) [![HostPresto](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/hostpresto3.png)](https://hostpresto.com/?utm_source=alvaro) -[![CodePen](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/codepen3.png)](https://codepen.com) - - -## 라이선스 - -**자바스크립트와 CSS 파일에 있는 개발자를 밝히는 말은 (결합이나 최소화 이후에도) 그대로 두셔야 합니다** - -(MIT 라이선스) - -Copyright (c) 2013 Alvaro Trigo <alvaro@alvarotrigo.com> - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -'Software'), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. -IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY -CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, -TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE -SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -이 소프트웨어의 복제본 및 연관 문서 파일('소프트웨어')을 습득하는 모든 사람에게 아래 조건에 따르는 한 무상으로 제한 없이 소프트웨어를 취급할 권리를 허용합니다. 여기에는 제한 없이 소프트웨어 복제본을 사용, 복제, 수정, 병합, 발행, 배포, 재실시(sublicense) 및/또는 판매할 권리가 포함되나 이에 국한되지 않습니다. 또한 아래 조건에 따르는 한 소프트웨어를 제공할 시 받는 사람에게 마찬가지 권리를 부여할 수 있는 권리를 무상으로 허용합니다. - -위의 저작권 통보 문구와 이 허용 통보 문구는 소프트웨어의 모든 복제본 또는 상당 부분에 들어가야 합니다. - -이 소프트웨어는 상품성, 특정 목적 적합성, 비침해 보증을 포함하나 이에 국한되지 않는 모든 종류의 명시적 또는 묵시적 보증 없이 '있는 그대로' 제공됩니다. 계약상, 불법행위 또는 기타 이유로 인한 법적 조치시 어떤 경우에도 개발자 또는 저작권 보유자가 소프트웨어나 소프트웨어 사용 또는 기타 취급 행위에서 발생하거나 범위를 벗어나거나 관련된 모든 요구사항, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. +[![CodePen](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/codepen3.png)](https://codepen.com) \ No newline at end of file diff --git a/lang/korean/how-to-activate-fullpage-extension.md b/lang/korean/how-to-activate-fullpage-extension.md index a58d9ef80..adf720944 100644 --- a/lang/korean/how-to-activate-fullpage-extension.md +++ b/lang/korean/how-to-activate-fullpage-extension.md @@ -8,7 +8,7 @@ 예시: ```javascript -$('#fullpage').fullPage({ +var myFullpage = new fullpage('#fullpage', { fadingEffect: true, fadingEffectKey: '활성화 키가 여기에 위치해야 합니다', }); diff --git a/lang/korean/parallax-extension.md b/lang/korean/parallax-extension.md index 7377847e8..3f0ac7651 100644 --- a/lang/korean/parallax-extension.md +++ b/lang/korean/parallax-extension.md @@ -87,23 +87,23 @@ CSS나 인라인 스타일을 쓰실 수 있습니다. 주어진 옵션의 값을 설정합니다. `옵션이름`은 `옵션이름` 에서 쓸 수 있는 어느 옵션이든 가능합니다. (`type`, `percentage` 또는 `property`). ```javascript //`종류` 속성값 바꾸기 -$.fn.fullpage.parallax.setOption('type', 'cover'); +fullpage_api.parallax.setOption('type', 'cover'); //`퍼센트` 속성값 바꾸기 -$.fn.fullpage.parallax.setOption('percentage', '30'); +fullpage_api.parallax.setOption('percentage', '30'); ``` --- ### init() 패럴랙스 효과를 활성화합니다. 패럴랙스 효과를 특정 지점에서 역동적으로 활성화해야 할 때 유용합니다. ```javascript -$.fn.fullpage.parallax.init(); +fullpage_api.parallax.init(); ``` --- ### destroy() 패럴랙스 효과를 끕니다. ```javascript -$.fn.fullpage.parallax.destroy(); +fullpage_api.parallax.destroy(); ``` diff --git a/lang/russian/README.md b/lang/russian/README.md index 8b5f31f64c47f866993a6e7c2f10d149de9cd172..a0d72eef209cfc5b6c6b4657bc3b0a3f8b348a85 100644 GIT binary patch delta 9147 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 FzW`)qAYuRj delta 7091 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 diff --git a/lang/russian/how-to-activate-fullpage-extension.md b/lang/russian/how-to-activate-fullpage-extension.md index 1de11a212..3b0ff3f42 100644 --- a/lang/russian/how-to-activate-fullpage-extension.md +++ b/lang/russian/how-to-activate-fullpage-extension.md @@ -8,7 +8,7 @@ Например: ```javascript -$('#fullpage').fullPage({ +var myFullpage = new fullpage('#fullpage', { fadingEffect: true, fadingEffectKey: 'ЗДЕСЬ ДОЛЖЕН БЫТЬ КЛЮЧ АКТИВАЦИИ', }); diff --git a/lang/russian/parallax-extension.md b/lang/russian/parallax-extension.md index 2be1904b5..3b6141b05 100644 --- a/lang/russian/parallax-extension.md +++ b/lang/russian/parallax-extension.md @@ -87,21 +87,21 @@ Устанавливает значение для данной опции. `optionName` может быть любой из опций, доступных в `parallaxOptions`. (`type`, `percentage` или `property`). ```javascript //изменение значения для свойства `type` -$.fn.fullpage.parallax.setOption('type', 'cover'); +fullpage_api.parallax.setOption('type', 'cover'); //изменение значения для свойства `percentage` -$.fn.fullpage.parallax.setOption('percentage', '30'); +fullpage_api.parallax.setOption('percentage', '30'); ``` --- ### init() Активирует эффект параллакс. Функция полезна, если вам необходимо активировать эффект в динамическом режиме в определённый момент. ```javascript -$.fn.fullpage.parallax.init(); +fullpage_api.parallax.init(); ``` --- ### destroy() Отключает эффект параллакс. ```javascript -$.fn.fullpage.parallax.destroy(); +fullpage_api.parallax.destroy(); ``` diff --git a/lang/spanish/README.md b/lang/spanish/README.md index e0058018d..777441160 100644 --- a/lang/spanish/README.md +++ b/lang/spanish/README.md @@ -13,8 +13,8 @@ --- -![fullPage.js version](http://img.shields.io/badge/fullPage.js-v2.9.7-brightgreen.svg) -[![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT) +![fullPage.js version](http://img.shields.io/badge/fullPage.js-v3.0.0-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)    **|**   *7Kb gziped*   **|**   *Creado por [@imac2](https://twitter.com/imac2)* @@ -29,13 +29,9 @@ Una sencilla librería Javascript para la creación de páginas web con desplazamiento a pantalla completa. También conocida popularmente como "single page websites" o "onepage sites". Permite crear un desplazamiento a pantalla completa, asi como añadir diapositivas horizontales en las secciones. -Invítame un café: -[![Donate](https://www.paypalobjects.com/es_ES/ES/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=BEK5JQCQMED4J&lc=GB&item_name=fullPage%2ejs¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) - -Personalizaciones de la librería y solicitudes urgentes -a pedido- a un precio razonable. Contacta conmigo. - - [Introducción](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#introducción) - [Compabitilidad](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#compatibilidad) +- [Licencia](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#licencia) - [Uso](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#uso) - [Crear enlaces a secciones y diapositivas](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#crear-enlaces-a-secciones-y-diapositivas) - [Crear secciones más pequeñas o más grandes](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#crear-seciones-más-pequenas-o-más-grandes) @@ -53,7 +49,6 @@ Personalizaciones de la librería y solicitudes urgentes -a pedido- a un precio - [Recursos](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#recursos) - [Quien usa fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#quién-usa-fullpagejs) - [Donaciones](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#donaciones) -- [Licencia](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#licencia) ## Introducción Las sugerencias serán más que bienvenidas, no solamente por pedidos de nuevas funcionalidades, sino también mejoras en el código. @@ -64,17 +59,26 @@ fullPage.js es totalmente compatible y funcional con cualquier navegador moderno Funciona con navegadores que soportan CSS3 tanto en aquellos que no lo soportan, haciéndolo ideal incluso con navegadores antiguos. También provee soporte táctil en dispositivos móviles, tabletas y ordenadores con pantalla táctil. -[![Browserstack](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/browserstack2.png)](https://www.browserstack.com/) - Gracias a [Browserstack](https://www.browserstack.com/) por dar soporte a fullPage.js. +### Licencia + +#### Commercial license +Si quieres usar fullpage para desarrollo de páginas comerciales, templates, themes, proyectos y aplicaciones, la licencia Comercial es la licencia apropiada para ti. Con esta opción, tu código se mantendrá propietario. Es decir, no tendrás que cambiar la liencia del código de tu aplicación/web/theme etc a la licencia GPL de código abierto. +[[Compra la licencia comercial]](https://alvarotrigo.com/fullPage/pricing/) + +#### Open source license +Si estás creando una aplicación de código libre bajo una licencia compatible con la liencia de [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), podrás hacer uso de fullPage bajo los términos de la licencia GPLv3. +[Read more about fullPage's license](https://alvarotrigo.com/fullPage/pricing/). + +**The credit comments in the JavaScript and CSS files should be kept intact** (even after combination or minification) + ## Uso Como podéis ver en los ejemplos disponibles, es necesario incluir: - - La librería de [jQuery](http://jquery.com/). (1.6.0 minimum) - - El archivo de JavaScript `jquery.fullPage.js` (o su versión minificada `jquery.fullPage.min.js`) - - El archivo CSS `jquery.fullPage.css` (o su versión minificada `jquery.fullpage.min.css`) + - El archivo de JavaScript `fullpage.js` (o su versión minificada `fullpage.min.js`) + - El archivo CSS `fullpage.css` (o su versión minificada `fullpage.min.css`) -**Opcionalmente**, cuando se usa la opcion `css3:false`, puedes añadir la librería de [jQuery UI](http://jqueryui.com/) en caso que desee usar otro efecto "easing" en lugar de los que están incluidos en la libreria de jQuery por defecto (`linear` y `swing`) o el incluído en fullPage.js por defecto (`easeInOutCubic`). +**Opcionalmente**, cuando se usa la opcion `css3:false`, puedes añadir la librería de [jQuery UI](http://jqueryui.com/) en caso que desee usar otro efecto "easing" en lugar de los que están incluidos en la libreria (`easeInOutCubic`). ### Instalar usando bower o npm **Opcionalmente**, puedes instalar fullPage.js haciendo uso de Bower o npm si lo prefieres: @@ -90,18 +94,16 @@ npm install fullpage.js ### Incluyendo los archivos: ```html - + - - - + - + ``` ### Uso opcional de un CDN @@ -140,87 +142,117 @@ Puedes usar la clase `slide` para crear diapositivas horizontales dentro de una Puedes ver un ejemplo totalmente funcional de la estructura HTML en el ejemplo [`demostraciónPage.html`](https://github.com/alvarotrigo/fullPage.js/blob/master/examples/demostraciónPage.html). ### Inicialización -Todo lo que necesitas hacer es llamar a fullPage.js dentro de la función `$(document).ready`. +Todo lo que necesitas hacer es llamar a fullPage.js justo antes del cierre de la etiqueta ``: ```javascript -$(document).ready(function() { - $('#fullpage').fullpage(); +var myFullpage = new fullpage('#fullpage'); +``` + +#### Inicialización con Vanilla Javascript +Todo lo que necesitas hacer es llamar a fullPage.js justo antes de la etiqueta de cierre ``. + +```javascript +new fullpage('#fullpage', { + //options here + autoScrolling:true, + scrollHorizontally: true }); + +//métodos +fullpage_api.setAllowScrolling(false); ``` -Una inizialización más compleja con todas las opciones definidas sería así: +#### Inicialización con jQuery +También puedes usar fullPage.js como plugin de jQuery! + ```javascript $(document).ready(function() { $('#fullpage').fullpage({ - //Navegación - menu: '#menu', - lockAnchors: false, - anchors:['firstPage', 'secondPage'], - navigation: false, - navigationPosition: 'right', - navigationTooltips: ['firstSlide', 'secondSlide'], - showActiveTooltip: false, - slidesNavigation: true, - slidesNavPosition: 'bottom', - - //Desplazamiento - css3: true, - scrollingSpeed: 700, - autoScrolling: true, - fitToSection: true, - fitToSectionDelay: 1000, - 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: false, - scrollOverflowReset: false, - scrollOverflowOptions: null, - touchSensitivity: 15, - normalScrollElementTouchThreshold: 5, - bigSectionsDestination: null, - - //Accesibilidad - keyboardScrolling: true, - animateAnchor: true, - recordHistory: true, - - //Diseno - controlArrows: true, - 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'}, - - //Selectores personalizados - sectionSelector: '.section', - slideSelector: '.slide', - - //Eventos - onLeave: function(index, nextIndex, direction){}, - afterLoad: function(anchorLink, index){}, - afterRender: function(){}, - afterResize: function(){}, - afterResponsive: function(isResponsive){}, - afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, - onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){} + //options here + autoScrolling:true, + scrollHorizontally: true }); + + //methods + fullpage_api.setAllowScrolling(false); +}); +``` + +Las métodos/funciones pueden ser usados como se haría en jQuery, tal y como se hacía en [fullpage.js v2.X](https://github.com/alvarotrigo/fullPage.js/tree/2.9.7). + +#### Ejemplo de inicialización Vanilla JS + +Una inizialización más compleja con todas las opciones definidas sería así: +```javascript +new fullpage('#fullpage', { + //Navegación + menu: '#menu', + lockAnchors: false, + anchors:['firstPage', 'secondPage'], + navigation: false, + navigationPosition: 'right', + navigationTooltips: ['firstSlide', 'secondSlide'], + showActiveTooltip: false, + slidesNavigation: true, + slidesNavPosition: 'bottom', + + //Desplazamiento + css3: true, + scrollingSpeed: 700, + autoScrolling: true, + fitToSection: true, + fitToSectionDelay: 1000, + 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: false, + scrollOverflowReset: false, + scrollOverflowOptions: null, + touchSensitivity: 15, + normalScrollElementTouchThreshold: 5, + bigSectionsDestination: null, + + //Accesibilidad + keyboardScrolling: true, + animateAnchor: true, + recordHistory: true, + + //Diseno + controlArrows: true, + 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'}, + + //Selectores personalizados + sectionSelector: '.section', + slideSelector: '.slide', + + //Eventos + onLeave: function(index, nextIndex, direction){}, + afterLoad: function(origin, destination, direction){}, + afterRender: function(){}, + afterResize: function(){width, height}, + afterResponsive: function(isResponsive){}, + afterSlideLoad: function(section, origin, destination, direction){}, + onSlideLeave: function(section, origin, destination, direction){} }); ``` @@ -233,10 +265,8 @@ Fíjate que la última parte de la URL termina en: `#secondPage/2`. Teniendo la siguiente inicialización: ```javascript -$(document).ready(function() { - $('#fullpage').fullpage({ - anchors:['firstPage', 'secondPage', 'thirdPage'] - }); +new fullpage('#fullpage', { + anchors:['firstPage', 'secondPage', 'thirdPage'] }); ``` @@ -321,12 +351,12 @@ Los elementos multimedia HTML 5 incrustados `