fullPage.js4.0.30

preview compatibility

| Created by @imac2

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ónIntroducció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!

CompatibilidadCompatibilidad

fullPage.js es totalmente compatible y funcional con cualquier navegador moderno y con IE 11. Si necesitas soporte para IE < 11 considera usar fullPage.js v3. También provee soporte táctil en dispositivos móviles, tabletas y ordenadores con pantalla táctil.

Gracias a Browserstack por dar soporte a fullPage.js.

LicenciaLicencia

Commercial licenseCommercial 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]

Open source licenseOpen 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, podrás hacer uso de fullPage bajo los términos de la licencia GPLv3. Read more about fullPage's license.

Tendrás que añadir un aviso destacado indicando que la página usa fullPage.js. Los créditos en los comentarios en los ficheros JavaScript y CSS tendrán que mantenerse intactos. (Incluso después de ser minificados/comprimidos)

UsoUso

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 en caso que desee usar otro efecto "easing" en lugar de los que están incluidos en la libreria (easeInOutCubic).

Instalar usando bower o npmInstalar usando bower o npm

Opcionalmente, puedes instalar fullPage.js haciendo uso de Bower o npm si lo prefieres:

Terminal:

Copiar// Con bower
bower install fullpage.js

// Con npm
npm install fullpage.js

Incluyendo los archivos:Incluyendo los archivos:

Copiar<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- Esta línea es opcional. Sólamente es necesaria si se hace uso de la opción `css3:false` y se quiere usar otro efecto `easing` en lugar de `linear`, `swing` o `easeInOutCubic`. -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Usas Webpack, Browserify o Require.js? Mira como usar fullPage.js con module loaders.

Uso opcional de un CDNUso 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 requeridaEstructura HTML requerida

El documento HTML requerirá comenzar con el HTML DOCTYPE obligatorio 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 <!DOCTYPE html>.

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<div id="fullpage">). El elemento contenedor no puede ser el elemento body de la página.

Copiar<div id="fullpage">
    <div class="section">Sección 1</div>
    <div class="section">Sección 2</div>
    <div class="section">Sección 3</div>
    <div class="section">Sección 4</div>
</div>

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.

Copiar<div class="section active">Mi sección de inicio</div>

Puedes usar la clase slide para crear diapositivas horizontales dentro de una sección:

Copiar<div class="section">
    <div class="slide"> Diapositiva 1 </div>
    <div class="slide"> Diapositiva 2 </div>
    <div class="slide"> Diapositiva 3 </div>
    <div class="slide"> Diapositiva 4 </div>
</div>

Puedes ver un ejemplo totalmente funcional de la estructura HTML en el ejemplo simple.html.

InicializaciónInicialización

Todo lo que necesitas hacer es llamar a fullPage.js justo antes del cierre de la etiqueta </body>:

Copiarvar myFullpage = new fullpage('#fullpage');

Inicialización con Vanilla JavascriptInicialización con Vanilla Javascript

Todo lo que necesitas hacer es llamar a fullPage.js justo antes de la etiqueta de cierre </body>.

Copiarnew fullpage('#fullpage', {
    //options here
    autoScrolling:true,
    scrollHorizontally: true
});

Inicialización con jQueryInicialización con jQuery

También puedes usar fullPage.js como plugin de jQuery!

Copiar$(document).ready(function() {
    $('#fullpage').fullpage({
        // Options here
        autoScrolling:true,
        scrollHorizontally: true
    });

    // Example of how to use fullpage.js methods
    fullpage_api.setAllowScrolling(false);
});

Ejemplo de inicialización Vanilla JSEjemplo de inicialización Vanilla JS

Una inizialización más compleja con todas las opciones definidas sería así:

Copiarnew 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: 600,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    continuousHorizontal: false,
    scrollHorizontally: false,
    interlockedSlides: false,
    dragAndMove: false,
    offsetSections: false,
    resetSliders: false,
    fadingEffect: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: true,
    scrollOverflowMacStyle: false,
    scrollOverflowReset: false,
    touchSensitivity: 15,
    bigSectionsfDestination: null,

    // Accesibilidad
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    // Diseno
    controlArrows: true,
    controlArrowsHTML: [
        '<div class="fp-arrow"></div>', 
        '<div class="fp-arrow"></div>'
    ],
    verticalCentered: true,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,
    responsiveSlides: false,
    parallax: false,
    parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
    dropEffect: false,
    dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
    waterEffect: false,
    waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
    cards: false,
    cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

    // Selectores personalizados
    sectionSelector: '.section',
    slideSelector: '.slide',

    lazyLoading: true,
    lazyLoadThreshold: 0,
    observer: true,
    credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},

    // Eventos
    beforeLeave: function(origin, destination, direction, trigger){},
    onLeave: function(origin, destination, direction, trigger){},
    afterLoad: function(origin, destination, direction, trigger){},
    afterRender: function(){},
    afterResize: function(width, height){},
    afterReBuild: function(){},
    afterResponsive: function(isResponsive){},
    afterSlideLoad: function(section, origin, destination, direction, trigger){},
    onSlideLeave: function(section, origin, destination, direction, trigger){},
    onScrollOverflow: function(section, slide, position, direction){}
});

Crear enlaces a secciones y diapositivasCrear 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:

Copiarnew 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:

Copiar<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide3"> Slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

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 grandesCrear secciones más pequeñas o más grandes

Demo 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.

Copiar<div class="section">Ventana completa</div>
<div class="section fp-auto-height">Alto automático</div>

Secciones de tamaño automático y responsiveSecciones de tamaño automático y responsive

Demo Usando la clase fp-auto-height-responsive 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.jsClasses 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) 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 multimediaCarga pasiva de elementos multimedia

Demo 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:

Copiar<img data-src="image.png">
<video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
</video>

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 multimediaAutoreproducir elementos multimedia

Demo Nota: 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: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:

Copiar<audio data-autoplay>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

Pausar al abandonar la sección o diapositivaPausar al abandonar la sección o diapositiva

Los elementos multimedia HTML 5 incrustados <video> / <audio> y los iframes de Youtube serán automáticamente pausados al abandonar la sección o diapositiva a la que pertenecen. Esto puede deshabilitarse usando el atributo data-keepplaying. Por ejemplo:

Copiar<audio data-keepplaying>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

Uso de extensionesUso de extensiones

fullPage.js provee varias extensiones que puedes usar para mejorar sus ya increíbles efectos. Todas las extensiones están la lista de las opciones de fullPage.js

Las extensiones requieren el uso del archivo comprimido fullpage.extensions.min.js disponible en la carpeta dist en lugar del archivo habitual de fullPage (fullpage.js o fullpage.min.js). Una vez que obtengas el archivo correspondiente a la extensión que deseas usar, tendrás que añadirlo antes del archivo de fullPage. Por ejemplo, si deseo usar la extensión Continuous Horizontal tendré que añadir el fichero de la extension y después el fichero de fullPage versión extensiones.

Copiar<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>

Cada extensión requiere de una licencia y de una clave de activación. Ver más detalles sobre el uso de licencias aquí.

Luego podrás usar la extensión y configurarla tal y como se explica en las opciones.

OpcionesOpciones

licenseKeylicenseKey

(por defecto null). Esta opción es obligatoria. Si usas fullPage.js en un proyecto que no sea código abierto, entonces tendrás que usar la clave de licencia que obtendrás al adquirir la licencia comercial de fullPage. Si tu proyecto es de código abierto y es compatible con la licencia GPLv3, puedes solicitar una licencia con un link a su repositorio para obtener una clave de licencia. Puedes leer más acerca de las licencias aquí y en la página web. Por ejemplo.

Copiarnew fullpage('#fullpage', {
    licenseKey: 'YOUR_KEY_HERE'
});