🗣️ Versión en Español
FullPages Es mi otro proyecto con un nivel un poco más profesional, es el resultado de mis habilidades adquiridas en los diferentes cursos tomados en distintas plataformas online, que con el pasar del tiempo entre lecturas, ejercicios y práctica voy afianzando mis habilidades y conocimientos.
Este proyecto se basa principalmente en la utilizacion de la libreria de javascript.
English | Español | Français | Pусский | 中文 | 한국어
Disponible para Vue, React y Angular.
| 7Kb gziped | Creado por @imac2
- Demo online | Codepen
- Wordpress plugin for Gutenberg and WordPress pluging fo Elementor
- Template de Wordpress
- Extensiones de fullpage.js
- Preguntas frecuentes
- [Migration from fullPage v3 to fullpage v4]
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
- Compabitilidad
- Licencia
- Uso
- Opciones
- Metodos
- Callbacks
- Reportar problemas
- Contribuir a fullpage.js
- Changelog
- Build tasks
- Recursos
- Quien usa fullpage.js
- Donaciones
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!
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.
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]
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)
Como podéis ver en los ejemplos disponibles, es necesario incluir:
- El archivo de JavaScript
fullpage.js
(o su versión minificadafullpage.min.js
) - El archivo CSS
fullpage.css
(o su versión minificadafullpage.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
).
Opcionalmente, puedes instalar fullPage.js haciendo uso de Bower o npm si lo prefieres:
Terminal:
// Con bower
bower install fullpage.js
// Con npm
npm install fullpage.js
<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.
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
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.
<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.
<div class="section active">Mi sección de inicio</div>
Puedes usar la clase slide
para crear diapositivas horizontales dentro de una sección:
<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
.
Todo lo que necesitas hacer es llamar a fullPage.js justo antes del cierre de la etiqueta </body>
:
var myFullpage = new fullpage('#fullpage');
Todo lo que necesitas hacer es llamar a fullPage.js justo antes de la etiqueta de cierre </body>
.
new fullpage('#fullpage', {
//options here
autoScrolling:true,
scrollHorizontally: true
});
También puedes usar fullPage.js como plugin de jQuery!
$(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.
Una inizialización más compleja con todas las opciones definidas sería así:
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: 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,
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){}
});
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:
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:
<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)
Demostración 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.
<div class="section">Ventana completa</div>
<div class="section fp-auto-height">Alto automático</div>
Demostración 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
)
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ónmenu
)- Una clase con la forma
fp-viewing-SECCION-DIAPOSITIVA
es añadida al elementobody
de la página. (ej:fp-viewing-secondPage-0
) Las partes deSECCION
YDIAPOSITVA
serán los enlaces de anclaje (o los índices) de la sección o diapositiva actual. fp-responsive
es añadido al elementobody
cuando se entra en modo "responsive".fp-enabled
es añadido al elementohtml
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.
Demostración 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:
<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
.
Demostración Nota: esta funcionalidad puede que no funcione en dispositivos móviles. Ésto dependerá del sistema operativo y del navegador usado.
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:
<audio data-autoplay>
<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>
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:
<audio data-keepplaying>
<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>
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.
<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.
licenseKey
: (por defectonull
). 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.
new fullpage('#fullpage', {
licenseKey: 'YOUR_KEY_HERE'
});
-
controlArrows
: (por defectotrue
) Determina si usar flechas de control en las diapositivas para deslizar hacia la derecha o izquierda. -
controlArrowsHTML
: (default['<div class="fp-arrow"></div>', '<div class="fp-arrow"></div>'],
). Provides a way to define the HTML structure and the classes that you want to apply to the control arrows for sections with horizontal slides. The array contains the structure for both arrows. The first item is the left arrow and the second, the right one. (translation needed) -
verticalCentered
: (por defectotrue
) centrado vertical de las secciones y diapositivas usando flexbox. You might want to wrap your content in adiv
to avoid potential issues. (Usesflex-direction: column; display: flex; justify-content: center;
) -
scrollingSpeed
: (por defecto700
) Velocidad de deslizamiento en milisegundos. -
sectionsColor
: (por defectonone
) Define la propiedad CSSbackground-color
para cada sección.
Ejemplo:
new fullpage('#fullpage', {
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
-
anchors
: (por defecto[]
) Define los enlaces de anclaje (#ejemplo) que serán mostrados en la URL para cada sección. Los enlaces de anclaje deben ser únicos. La posición de los enlaces en el array definirá a qué sección serán aplicados. (la segunda posición será la segunda sección y así). Usar la navegación del navegador para moverse a la página anterior y siguiente será posible cuando se usen enlaces de anclaje. Éstos también ofrecen la posibilidad de guardar una sección o diapositiva específica a favoritos. Ten cuidado!: las etiquetasdata-anchor
no pueden tener el mismo valor que ninguna otra etiqueta ID en la página (oname
para Internet Explorer). Ahora los enlaces de anclaje también se pueden definir directamente en la estructura HTML usando el atributodata-anchor
. -
lockAnchors
: (por defectofalse
) Determina si los enlaces de anclaje en la URL tendrán efecto en fullPage.js. Puedes usar losanchor
de manera interna para tus propias funciones o dento de los callbacks, pero no tendrán ningún efecto en el desplazamiento de la página web. Útiles cuando quieres combinar fullPage.js con otros plugins que usan enlaces de anclaje en la URL. -
easing
: (por defectoeaseInOutCubic
) Define el tipo de transición que usará fullPage.js para el desplazamiento vertical y horizontal de la página cuando se usacss3:false
o el navegador no soporta animaciones CSS3. Requiere el archivovendors/easings.min.js
o jQuery UI para usar algunas de sus transiciones Otras librerías puede ser usadas si se desea. -
easingcss3
: (por defectoease
) Define el efecto de transición que usará fullPage.js cuando se usacss3:true
. Puedes usar los efectos predefinidos (comolinear
,ease-out
...) o puedes crear tus propios efectos usando la funcióncubic-bezier
. Puede que quieras ojear Matthew Lein CSS Easing Animation Tool para ello. -
loopTop
: (por defectofalse
) Determina si hacer scroll hacia arriba estando en la primera sección te desplazará a la última o no. -
loopBottom
: (por defectofalse
) Determina si hacer scroll hacia abajo estando en la última sección te desplazará a la primera o no. -
loopHorizontal
: (por defectotrue
) Determina si las diapositivas horizontales volverán a la primera o última diapositiva al llegar a la última o primera respectivamente. -
css3
: (por defectotrue
). Determina si fullPage.js usará JavasScript o animaciones CSS3 para realizar los desplazamientos entre secciones y diapositivas. Útil para mejorar el rendimiento en tabletas y dispositivos móviles así como en navegadores con soporte CSS3. Si esta opción se pone atrue
y el navegador no soporta animaciones CSS3, fullPage.js automáticamente lo volverá a poner afalse
para usar animaciones JavaScript. -
autoScrolling
: (por defectotrue
) Determina si usar desplazamiento "automático" o "a saltos" o usar el desplazamiento tradicional de cualquier página. También afecta al modo en el que las secciones se ajustan a la ventana en tabletas y dispositivos móviles. -
fitToSection
: (por defectotrue
) Determina si "encajar" las secciones en el navegador o no. Esto tiene sentido cuando se usaautoScrolling:false
oscrollBar:false
o el modo responsive. Cuando se usatrue
la sección actual se desplazará en la pantalla hasta llegar el contenido de la ventana usando. De lo contrario el usuario podrá desplazarse libremente y parar en mitad de 2 secciones. -
scrollBar
: (por defectofalse
) Determina si se utiliza la barra de desplazamiento del navegador o no para las secciones verticales. En caso afirmativo, la funcionalidad deautoScrolling
(de desplazamiento automático o "a saltos") funcionará como se espera. El usuario será también libre de desplazarse por la página usando la barra de navegación y fullpage.js encajará la sección cuando el desplazamiento cese siempre y cuando se usefitToSection
. -
paddingTop
: (por defecto0
) Determina el "padding" superior para cada sección con un valor numérico y su unidad de medida (paddingTop: '10px', paddingTop: '10em'...). Útil cuando se usan cabeceras fijas (fixed
). -
paddingBottom
: (por defecto0
) Determina el "padding" inferior para cada sección con un valor número y su unidad de medida (paddingBottom: '10px', paddingBottom: '10em'...) Útil cuando se usa un pie de página fijo (fixed
). -
fixedElements
: (por defectonull
) Determina qué elementos serán extraídos de la estructura de fullPage.js. Cosa que es necesaria cuando se usa la opcióncss3
para mantenerlos fijos (fixed
). Requiere una cadena de texto con el selector de Javascript para dichos elementos. (Por ejemplo:fixedElements: '#element1, .element2'
) -
normalScrollElements
: (por defectonull
) Demostración Si quieres evitar el auto desplazamiento (o desplazamiento a saltos) cuando se haga scroll encima de ciertos elementos, ésta es la opción a usar. (Útil para mapas, divs con scroll etc.). Requiere una cadena de texto con el selector de Javascript para dichos elementos.(Por ejemplo:normalScrollElements: '#element1, .element2'
). Esta opción no debe ser aplicada directamente en las mismas secciones o diapositivas en sí, sino a elementos dentro de ellas. -
bigSectionsDestination
: (por defectonull
) Demo Determina cómo desplazarse hacia una sección mayor que la ventana del navegador. Por defecto fullPage.js se desplazará hacia la parte superior de la sección si llegas desde una sección situada por encima y hacia la parte inferior si llegas desde una sección situada por debajo. Los posibles valores para esta opción son:top
,bottom
,null
. -
keyboardScrolling
: (por defectotrue
) Determina si el contenido puede ser navegado usando el teclado. -
touchSensitivity
: (por defecto5
) Determina cierto porcentaje de la ventana del navegador a partir del cual fullpage.js registra un desplazamiento vertical. -
continuousVertical
: (por defectofalse
) Determina si hacer scroll hacia abajo en la última sección producirá un desplazamiento hacia abajo hacia la primera sección o no, y si hacer scroll hacia arriba en la primera sección producirá un desplazamiento hacia arriba hacia la última sección. No es compatible conloopTop
,loopBottom
y ninguna barra de desplazamiento (usandoscrollBar:true
oautoScrolling:false
). -
continuousHorizontal
: (por defectofalse
) Extensión de fullpage.js. Determina si desplazarse hacia la derecha en la última diapositiva causará un desplazamiento hacia la derecha hacia la primera diapositiva, y si desplazarse hacia la izquierda en la primera diapositiva causará un desplazamiento hacia la izquierda hacia la última diapositiva. No es compatible conloopHorizontal
. -
scrollHorizontally
: (por defectofalse
) Extensión de fullpage.js. Determina si desplazarse horizontalmente entre las diapositivas de la sección cuando se usa la ruleta del ratón o el trackpad. Sólamente funciona cuando se usaautoScrolling:true
. Ideal para contar historias. -
interlockedSlides
: (por defectofalse
) Extensión de fullpage.js. Determina si al moverse horizontalmente una sección con diapositivas, ésto forzará el movimiento de otras diapositivas en otras secciones en la misma dirección. Los posibles valores sontrue
,false
o un array con las secciones que estarán interconectadas. Por ejemplo[1,3,5]
empezando por 1. -
dragAndMove
: (por defectofalse
) Extensión de fullpage.js. Habilita o deshabilita el desplazamiento de secciones y diapositivas usando el ratón o los dedos en dispositivos táctiles. Los posibles valores para esta opción son:true
: habilita la función.false
: deshabilita la función.vertical
: habilita la funcion sólo verticalmente.horizontal
: habilita la funcion sólo horizontalmente.fingersonly
: habilita la función sólo para dispositivos táctiles.mouseonly
: habilita la función sólo para ratón y trackpad (desktop).
-
offsetSections
: (por defectofalse
)Extensión de fullpage.js. Provee una manera de usar secciones que no toman la pantalla completa sino un porcentaje determinado de la misma. Ideal para mostrar a los visitantes que hay más contenido en la página mostrando parte de sección siguiente o anterior. Para definir el porcentaje de la sección hay que hacer uso del atributodata-percentage
. El centrado de la sección en la ventana puede definirse usando un valor booleano (true o false) en el atributodata-centered
. (Por defecto serátrue
si no se especifica). Por ejemplo:
<div class="section" data-percentage="80" data-centered="true">
-
resetSliders
: (por defectofalse
). Extensión de fullpage.js. Determina cuando reiniciar el carrusel de diapositivas de la sección al salir de ella, de modo que muestre la primera diapositiva cuando se vuelva a dicha sección. -
fadingEffect
: (por defectofalse
). Extensión de fullpage.js. Determina cuando usar el efecto de desvanecimiento (fading) en lugar del efecto de desplazamiento habitual de fullPage.js. Los posibles valores sontrue
,false
sections
,slides
. Puede por lo tanto, aplicarse únicamente vertical u horizontalmente o ambos al tiempo. -
animateAnchor
: (por defectotrue
) Determina si al cargar la página usando un enlace de anclaje (#) ésta se desplazará a la sección de destino o si por el contrario cargará la página directamente en dicha sección. -
recordHistory
: (por defectotrue
) Determina si el estado de la página se guardará en la historia del navegador. Cuando se define la opción atrue
cada sección/diapositiva de la página actuará como una nueva página y el botón de "página anterior" o "página siguiente" del navegador desplazará las secciones/diapositivas de la página hasta alcanzar el estado de la página anterior o siguiente respectivamente. Cuando se define la opción afalse
, la URL seguirá cambiando con los enlaces de anclaje correspondientes pero no tendrán ningún efecto en la historia del navegador. Esta opción está automáticamente definida comofalse
cuando se usa la opciónautoScrolling:false
. -
menu
: (por defectofalse
) Se puede usar un selector para especificar el menú de la página al que las secciones hacen referencia. De este modo, el desplazamiento vertical entre las secciones activará el elemento correspondiente del menú usando la claseactive
. Esta opción no generará ningún menú, sino que simplemente añade la claseactive
al elemento del menú con el enlace de anclaje correspondiente a la sección. Para relacionar los elementos del menú con las secciones se requiere del uso del atributodata-menuanchor
que tendrá que tener el mismo valor que el enlace de anclaje que la sección a la que haga referencia. Por ejemplo:
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
Nota: el menú tiene que estar situado fuera del contenedor de fullpage para evitar problemas cuando se use css3:true
. De lo contrario, el menú será automáticamente movido fuera de la estructura de fullPage.js y añadido en el body
.
-
navigation
: (por defectofalse
) Si se define atrue
, se mostrará una navegación lateral de círculos haciendo referencia a las secciones de la página. -
navigationPosition
: (por defectonone
) Puede ser definido aleft
oright
y determina la posición que tomará la navegación (si es que se usa). -
navigationTooltips
: (por defecto[]
) Determina el texto para usar en cada círculo de la navegación. Por ejemplo:navigationTooltips: ['firstSlide', 'secondSlide']
. También puedes definir dichos textos usando el atributodata-tooltip
en cada sección si así lo prefieres. -
showActiveTooltip
: (por defectofalse
) Determina si mostrar siempre visible el texto para el círculo de la navegación que se encuentre activo en ese momento. -
slidesNavigation
: (por defectofalse
) Si se define atrue
mostrará la navegación para las diapositivas horizontales de la página. -
slidesNavPosition
: (por defectobottom
) Determina la posición que tomará la navegación para las diapositivas horizontales de la página. Admite los valorestop
ybottom
. Tal vez quieras modificar la distancia inferior o superior usando estilos CSS así como el color de los mismos. -
scrollOverflow
: (por defectotrue
) Determina si crear o no una barra de desplazamiento para las secciones/diapositivas donde el contenido de las mismas sea mayor que la altura de la ventana del navegador. Para evitar que fullPage.js cree la barra de desplazamiento en ciertas secciones o diapositivas, haz uso de la clasefp-noscroll
. Por ejemplo:<div class="section fp-noscroll">
. Puedes evitar quescrolloverflow
se aplique en modo responsive si usas la clasefp-auto-height-responsive
en la sección. Más información. -
scrollOverflowMacStyle
: (defaultfalse
). When active, this option will use a "mac style" for the scrollbar instead of the default one, which will look quite different in Windows computers. (translation needed) -
scrollOverflowReset
: (por defectofalse
) Extensión de fullpage.js. Cuando se define atrue
fullPage.js moverá el contenido de la seccion o diapositiva hacia arriba cuando se abandone la seccion o diapositiva hacia otra sección vertical. De este modo, cuando se llega a una sección que usa barra de desplazamiento, se mostrará siempre el principio de su contenido. Possible values aretrue
,false
,sections
,slides
.Adding the classfp-no-scrollOverflowReset
on the section or slide will disable this feature for that specific panel. -
sectionSelector
: (por defecto.section
) Determina el selector Javascript que fullPage.js usará para determinar lo que es una sección. Puede que necesites cambiarlo para evitar problemas con otras librerías que usen el mismo selector que usa fullPage.js por defecto. -
slideSelector
: (por defecto.slide
) Determina el selector de Javascript que fullPage.js usará para determinar lo que es una diapositiva. Puede que necesites cambiarlo para evitar problemas con otras librerías que usen el mismo selector que usa fulPage.js por defecto. -
responsiveWidth
: (por defecto0
) Usará el desplazamiento por defecto de cualquier otra página cuando la ventana tenga un valor deanchor
menor que el definido en esta opción. La clasefp-resposive
será añadida al elementobody
de página en caso de que quieras usar dicho selector en tu hoja de estilos CSS para determinar cuando fullpage.js ha entrado en modo responsive. Por ejemplo, si se define como900
, cuando la ventana del navegador sea menor que 900 píxeles el desplazamiento de fullpage.js actuará como en una página normal. -
responsiveHeight
: (por defecto0
) Usará el desplazamiento por defecto de cualquier otra página cuando la ventana tenga un valor de altura menor que el definido en esta opción. La clasefp-resposive
será añadida al elementobody
de página en caso de que quieras usar dicho selector en tu hoja de estilos CSS para determinar cuando fullpage.js ha entrado en modo responsive. Por ejemplo, si se define como900
, cuando la ventana del navegador sea menor que 900 píxeles, el desplazamiento de fullpage.js actuará como en una página normal. -
responsiveSlides
: (por defectofalse
) Extensión de fullpage.js. Cuando se define atrue
las diapositivas horizontales se convertirán en secciones verticales cuando el modo responsive se active (haciendo uso de las opcionesresponsiveWith
oresponsiveHeight
detalladas arriba). -
parallax
: (por defectofalse
) Extensión de fullpage.js. Determina si usar fondos de sección y diapositiva con efecto parallax o no. Lee más acerca de la opción parallax aquí. -
parallaxOptions
: (por defecto:{ type: 'reveal', percentage: 62, property: 'translate'}
). Permite configurar los parámetros para el efecto de parallax cuando se usa la opciónparallax:true
. Lee más acerca de la opción parallax aquí. -
dropEffect
(defaultfalse
) Extensión de fullpage.jss. Determinar si usar el efecto "drop" para secciones y slides. Lee más acerca de la opción de dropEffect aquí. -
dropEffectOptions
: (default:{ speed: 2300, color: '#F82F4D', zIndex: 9999}
). Permite configurar los parámetros para el efecto drop cuando se usa la optiondropEffect:true
.Lee más acerca de la opción de dropEffect aquí. -
waterEffect
(defaultfalse
) Extensión de fullpage.jss. Determinar si usar el efecto "Water" (agua) para secciones y slides. Lee más acerca de la opción de dropEffect aquí. -
waterEffectOptions
: (default:{ animateContent: true, animateOnMouseMove: true}
). Permite configurar los parámetros para el efecto "Water" (agua) cuando se usa la optionwaterEffect:true
.Lee más acerca de la opción de dropEffect aquí. -
cards
: (defaultfalse
) Extension de fullpage.js. Determina si usar el efecto de "Cards" en secciones/diapositivas. Lee más acerca de la opción cards aquí. -
cardsOptions
: (default:{ perspective: 100, fadeContent: true, fadeBackground: true}
). Permite configurar los parámetros para el efecto de Cards cuando se usa la opcóncards:true
. Lee más acerca de la opción cards aquí. -
lazyLoading
: (por defectotrue
) La carga pasiva está activa por defecto, lo que significa que cargará pasivamente cualquier elemento multimedia que contenga el atributodata-src
como se detalla en la carga pasiva de elementos multimedia. Si quieres usar otra librería de carga pasiva puedes deshabilitar esta funcionalidad usandofalse
. -
observer
: (defaulttrue
) Defines whether or not to observe changes in the HTML structure of the page. When enabled, fullPage.js will automatically react to those changes and update itself accordingly. Ideal when adding, removing or hidding sections or slides. (translation needed) -
credits
. (default{enabled: true, label: 'Made with fullpage.js', position: 'right'}
). Defines whether to use fullPage.js credits. As per clause 0, 4, 5 and 7 of the GPLv3 licecense, those using fullPage.js under the GPLv3 are required to give prominent notice that fullPage.js is in use. We recommend including attribution by keeping this option enabled. (translation needed)
Puedes verlos en acción aquí