kick-in-promo-site/lang/spanish/parallax-extension.md

Lee como usar Extensiones antes de usar la opción de parallax.

• Ejemplo online
• Estructura HTML necesaria
• Añadiendo la imagen de fondo
• Opciones
  • Opciones del efecto parallax
• Métodos

Estructura HTML necesaria

Para usar el efecto de parallax en secciones o diapositivas, tendremos que añadir un nuevo elemento que use la clase fp-bg. Será un elemento div vacío que situaremos como primer elemento debajo de la sección o diapositiva a la que pertenece.

<div class="fp-bg"></div>

Sobre éste elemento tendremos que aplicar la imagen de fondo, en lugar de hacerlo diréctamente sobre la sección o las diapositivas a las que pertenece.

Por ejemplo:

<div id="fullpage">
    <div class="section" id="section1">
        <div class="fp-bg"></div>
        Diapositiva 1.1
    </div>
    <div class="section" id="section2">
        <div class="slide" id="slide2-1">
            <div class="fp-bg"></div>
            Diapositiva 2.1
        </div>
        <div class="slide" id="slide2-2">
            <div class="fp-bg"></div>
            Diapositiva 2.2
        </div>
    </div>
</div>

Podrás observar esta misma estructura en el código fuente del ejemplo de parallax.

Si por alguna razón no quieres añadir un nuevo elemento fp-bg en la estructura de la página, puedes usar la opción property dentro de parallaxOptions y definir su valor a background. De este modo podrás aplicar el fondo directamente sobre la sección o diapositiva. Como se explicará luego en la sección de Opciones del efecto parallax, solamente recomiendo hacer ésto si es realmente necesario, pues el rendimiento no será el mismo que cuando se usa el elemento fp-bg.

Añadiendo la imagen de fondo

El fondo debe aplicarse directamente sobre el elemento fp-bg del mismo modo que lo harías en una sección o diapositiva. Puedes usar CSS para ello o bien usar estilos inline a través del atributo style.

Por ejemplo:

#section1 .fp-bg{
    background-image: url('imgs/alvaro-genious.jpg');
    background-size: cover;
    background-position: center 80%;
}

Opciones

Opción	Descripción
parallax	(por defecto false). Extension of fullPage.js. Determina si usar el efecto de parallax en secciones y diapositivas.
parallaxOptions:	(por defecto: { type: 'reveal', percentage: 62, property: 'translate'}). Permite configurar los parámetros para el efecto de parallax cuando se usa la opción parallax: true.

Opciones del efecto parallax

Puedes verlas en acción en la página de ejemplo.

Descripción de las opciones de configuración disponibles en la opción parallaxOptions:

parallaxOptions	Descripción
type	(por defecto reveal) Los posibles valores para esta opción son cover y reveal. Permiten escoger el modo en el que se superponen las secciones o diapositivas determinando si la sección/diapositiva actual estará encima o debajo de la de destino. Cuando se usa la opción cover la sección/diapositiva destino aparecerá cubriendo parte de la sección/diapositiva actual. Si se usa reveal el efecto será el contrario y se cubrirá parte de la sección/diapositiva de destino mientras ésta va apareciendo.
percentage	(por defecto 62 ) permite definir el porcentaje del efecto parallax en relación con el viewport (tamaño de la pantalla). Usar un valor pequeño resultará en un efecto parallax menor, y usar 100, que es el máximo, mostrará un fondo estático.
property	Determina si se aplicará el efecto parallax sobre el elemento fp-bg o directamente sobre la propiedad background de la sección/diapositva. Se recomienda usar el valor por defecto para esta opción.

Se ha de tener en cuenta que usar el elemento fp-bg proporciona un rendimiento mucho mejor y más fluido a la hora de realizar el efecto. Ésto es así porque de este modo se hace uso de la aceleración por hardware al usar translate3d. La opción background está disponible para aquellos que por alguna razón no quieran añadir el elemento extra fp-bg o que no puedan modificar el código HTML.

Métodos

Puedes verlos en acción en la página de ejemplo.

setOption(optionName, value)

Define un valor para la opción que se le pase como parámetro. optionName puede ser cualquiera de las opciones disponibles en parallaxOptions. (type, percentage, o property).

//cambiando el valor de la propiedad `typo`
fullpage_api.parallax.setOption('type', 'cover');

//cambiando el valor de la propiedad `percentage`
fullpage_api.parallax.setOption('percentage', '30');

---

init()

Habilita el efecto parallax. Es útil cuando se necesita habilitar dicho efecto de modo dinámico en cierto momento determinado.

fullpage_api.parallax.init();

---

destroy()

Deshabilita el efecto parallax.

fullpage_api.parallax.destroy();