# fullPage.js ![preview](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png) ![compatibility](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/compatible.gif?v=2)

English | Español | Pусский | 中文 | 한국어

--- ![fullPage.js version](http://img.shields.io/badge/fullPage.js-v3.0.2-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)* - [Vista previa - demostración](https://alvarotrigo.com/fullPage/) - [Template de Wordpress](https://alvarotrigo.com/fullPage/utils/wordpress.html) - [Extensiones de fullpage.js](https://alvarotrigo.com/fullPage/extensions/) - [Preguntas frecuentes](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions) --- 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. - [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) - [Clases de estado añadidas por fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#classes-de-estado-añadidas-por-fullpagejs) - [Carga pasiva de elementos multimedia](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#carga-pasiva-de-elementos-multimedia) - [Autoplay de elementos multimedia](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#autoreproducir-elementos-multimedia) - [Uso de extensiones](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#uso-de-extensiones) - [Opciones](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#opciones) - [Metodos](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#métodos) - [Callbacks](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#callbacks) - [Reportar problemas](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#reportando-problemas) - [Contribuir a fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#contribuir-con-fullpagejs) - [Changelog](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#changelog) - [Build tasks](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish/#build-tasks) - [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) ## 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. ¡Hagamos de fullPage.js una gran librería para facilitar la vida de las personas! ## Compatibilidad fullPage.js es totalmente compatible y funcional con cualquier navegador moderno, así como en alguno de los antiguos tales como Internet Explorer 9 u Opera 12. 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. 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: - 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 (`easeInOutCubic`). ### Instalar usando bower o npm **Opcionalmente**, puedes instalar fullPage.js haciendo uso de Bower o npm si lo prefieres: Terminal: ```shell // Con bower bower install fullpage.js // Con npm npm install fullpage.js ``` ### Incluyendo los archivos: ```html ``` ### Uso opcional de un CDN Si lo prefieres puedes hacer uso de un CDN (Content Delivery Network o Red de distribución de contenido) para cargar los archivos de fullPage.js. FullPage.js está disponible en CDNJS: https://cdnjs.com/libraries/fullPage.js ### Estructura HTML requerida El documento HTML requerirá comenzar con el [HTML DOCTYPE obligatorio](http://www.corelangs.com/html/introduction/doctype.html) en la primera línea de tu archivo HTML. De lo contrario puedes tener problemas con el tamaño de las secciones y diapositivas. Todos los ejemplos disponibles aquí usan la etiqueta HTML 5 ``. Cada sección se ha de definir usando la clase `section`. La sección activa por defecto será la primera, que será tratada como la página de inicio. Las seciones tienen que estar contenidas en otro elemento (en este caso`
`). El elemento contenedor no puede ser el elemento `body` de la página. ```html
Sección 1
Sección 2
Sección 3
Sección 4
``` Si quieres definir una sección de inicio diferente de la primera sección o la primera diapositiva de la sección, simplemente añade la clase `active` en la sección o diapositiva que quieras que sea visible inicialmente. ```html
Mi sección de inicio
``` Puedes usar la clase `slide` para crear diapositivas horizontales dentro de una sección: ```html
Diapositiva 1
Diapositiva 2
Diapositiva 3
Diapositiva 4
```` 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 justo antes del cierre de la etiqueta ``: ```javascript 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); ``` #### Inicialización con jQuery También puedes usar fullPage.js como plugin de jQuery! ```javascript $(document).ready(function() { $('#fullpage').fullpage({ //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(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){} }); ``` ### Crear enlaces a secciones y diapositivas Si usas fullPage.js con enlaces de anclaje para las secciones (haciendo uso de la opción `anchors` o del atributo `data-anchor` en cada sección), entonces también podrás usar los enlaces de anclaje para navegar a una sección o diapositiva en particular. Esto sería un ejemplo de un enlace con un enlace de anclaje: https://alvarotrigo.com/fullPage/#secondPage/2 (que es la URL que verás en la URL si accedes a esa sección/diapositiva manualmente). Fíjate que la última parte de la URL termina en: `#secondPage/2`. Teniendo la siguiente inicialización: ```javascript new fullpage('#fullpage', { anchors:['firstPage', 'secondPage', 'thirdPage'] }); ``` El enlace de anclaje al final de la URL `#secondPage/2` define la sección y diapositiva de destino respectivamente. En la URL anterior, la sección de destino será la que está definida con el enlace de anclaje `secondPage` y la diapositiva será la segunda de dicha sección porque estamos usando el índice `2` para ella. La primera diapositiva de una sección tendrá índice 0, porque técnicamente será tratada como una sección. Podríamos haber usado un enlace de anclaje personalizado para la diapositiva en lugar de su índice si hubiésemos usado el atributo `data-anchor` en la estructura HTML: ```html
Slide 1
Slide 2
Slide 3
Slide 4
``` En este último caso, la URL que usaríamos sería `#secondPage/slide3`, que es la equivalente a nuestra URL anterior `#secondPage/2`. Ten en cuenta que los enlaces de anclaje en la sección también pueden definirse del mismo modo, es decir, usando el atributo `data-anchor` siempre y cuando no hayamos definido la opción `anchors` al iniciar fullPage.js. **Ten cuidado!**, las etiquetas `data-anchor` no pueden tener el mismo valor que ninguna otra etiqueta ID en la página. (o `name` para Internet Explorer) ### Crear secciones más pequeñas o más grandes [Demostración](https://codepen.io/alvarotrigo/pen/BKjRYm) fullPage.js provee un modo de eliminar la restricción de pantalla completa para secciones y diapositivas. Es posible crear secciones con una altura menor o mayor que el tamaño de la ventana del navegador. Esto es especialmente útil para pies de página. Para crear este tipo de secciones simplemente usa la clase `fp-auto-height` en la sección donde quieres aplicarlo. De este modo fullPage.js ajustará el tamaño al dado por el contenido de dicha sección o diapositiva. ```html
Ventana completa
Alto automático
``` #### Secciones de tamaño automático y responsive [Demostración](https://codepen.io/alvarotrigo/pen/WZmMgZ) fullPage.js puede eliminar la restricción de pantalla completa únicamente bajo el modo `responsive` si asi lo deseas. De este modo la sección pasará a ser una sección de tamaño automático cuando fullPage.js entre en modo responsive. (Usando la opcion `responsiveWidth` o `responsiveHeight`) ### Classes de estado añadidas por fullpage.js Fullpage.js añade multiples clases en diferentes elementos para reflejar el estado en el que se encuentra la página web: - `active` es añadido en la sección o diapositiva actual. - `active` es añadido en el elemento actual del menú (si se usa la opción `menu`) - Una clase con la forma `fp-viewing-SECCION-DIAPOSITIVA` es añadida al elemento `body` de la página. (ej: [`fp-viewing-secondPage-0`](https://alvarotrigo.com/fullPage/#secondPage)) Las partes de `SECCION` Y `DIAPOSITVA` serán los enlaces de anclaje (o los índices) de la sección o diapositiva actual. - `fp-responsive` es añadido al elemento `body` cuando se entra en modo "responsive". - `fp-enabled` es añadido al elemento `html` cuando fullPage.js está activo (y se elimina cuando se destruye). - `fp-destroyed` es añadido al contenedor usado para iniciar fullPage.js cuando se destruye fullPage.js. ### Carga pasiva de elementos multimedia [Demostración](https://codepen.io/alvarotrigo/pen/eNLBXo) fullPage.js provee un modo de cargar pasivamente imágenes, vídeos y audio de manera que dichos elementos no ralenticen la carga de la página web y gasten recursos de transferencia innecesarios. Cuando se usa la carga pasiva de elementos, éstos solamente se cargarán cuando entren dentro de la parte visible de la ventana. Para activar esta funcionalidad bastará con cambiar el atributo `src` por `data-src` tal y como se muestra a continuación: ``` ``` Si ya estabas usando otra librería de carga pasiva (lazy loading) que usa el atributo `data-src` también, puedes desactivar la carga pasiva de fullpage.js que está activa por defecto usando la opción `lazyLoading: false`. ### Autoreproducir elementos multimedia **Note**: esta funcionalidad puede que no funcione en dispositivos móviles. Ésto dependerá del sistema operativo y del navegador usado. #### Reproducir al cargar la sección o diapositiva: Usando el atributo `autoplay` para videos y audios, o el parámetro `autoplay=1` para iframes de Youtube causará que el elemento empiece a reproducirse al cargar la página web. Usa el atributo `data-autoplay` para comenzar a reproducirlo cuando la sección o diapositiva a la que pertenece sea visible en la ventana. Por ejemplo: ```html ``` #### Pausar al abandonar la sección o diapositiva Los elementos multimedia HTML 5 incrustados `