Parallax extension

Parallax extension

Lisez Utilisation des extensions avant d’utiliser l’option parallaxe.

• Démo en direct
• Structure HTML requise
• Application de l’arrière-plan
• Options
  • Options de l’effet parallax
• Méthodes

HTML

Afin d’utiliser l’effet parallaxe dans les sections et les diapositives, un nouvel élément devra être ajouté avec la classe fp-bg. Il devrait s’agir d’un div vide placé comme premier enfant de la section ou de la diapositive. Comme ce qui suit :

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

Ce serait l’élément auquel vous devrez appliquer le fond au lieu de la section ou des diapositives à laquelle il appartient.

Par exemple :

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

Cette structure peut être vue dans le code source de la page de démonstration de parallax.

Si pour une raison quelconque vous ne voulez pas ajouter un nouvel élément dans votre mise en page, vous pouvez définir l’option property dans parallaxOptions sur background afin d’appliquer l’effet à la section courante ou au fond de diapositive. Comme expliqué dans Options de l’effet Parallax, je ne recommande de le faire que si c’est vraiment nécessaire, car les performances ne seront pas les mêmes que lors de l’utilisation des éléments fp-bg.

Appliquer l’arrière-plan

L’arrière-plan doit être appliqué à l’élément fp-bg de la même manière que vous l’appliqueriez à une section ou une diapositive. Vous pouvez utiliser le CSS ou le style en ligne.

Par exemple :

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

Options

| Option | Description | | ————- | ————- | | Parallax | (par défaut false). Extension de fullPage.js. Définit s’il faut ou non utiliser les effets de fond de parallax sur les sections / diapositives. | | parallaxOptions: | (par défaut : { type:'reveal', percentage: 62, property:'translate'}). Permet de configurer les paramètres de l’effet de fond de parallax lors de l’utilisation de l’option parallax:true. |

Options de l’effet parallax

Vous pouvez les voir en action dans la page de démonstration

Description des options configurables disponibles dans l’option parallaxOptions :

Notez que l’utilisation de l’élément fp-bg fournit une bien meilleure performance car il utilise l’accélération matérielle translate3d. L’option est là pour ceux qui, pour une raison particulière, ne veulent pas ajouter l’élément supplémentaire fp-bg dans chaque section ou diapositive ou ne peuvent simplement pas modifier le balisage HTML.

Méthodes

Vous pouvez les voir en action dans la page de démonstration

setOption(nomEnOption, valeur)

Définit une valeur pour une option donnée. nomEnOption peut être l’une quelconque des options disponibles dans parallaxOptions. (type, pourcentage ou bien).

modifier la valeur de la propriété `type`
fullpage_api.parallax.setOption('type','cover') ;

modification de la valeur de la propriété `pourcentage`
fullpage_api.parallax.setOption('percentage','30');

destroy()

Éteint l’effet paralax.

fullpage_api.parallax.destroy();