Parallax Extension

エクステンションの使用方法を確認してから、パララックスオプションを使用してください。

• ライブデモ
• 必要なHTML構造
• 背景の適用方法
• オプション
  • パララックスエフェクトオプション
• メソッド

HTML

セクションやスライド内でパララックスエフェクトを使用するには、fp-bg クラスを持つ新しい要素を追加する必要があります。これは、セクションやスライドの最初の子要素として配置された空の div である必要があります。次のようになります：

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

この要素に対して背景を適用し、セクションやスライドそのものには適用しません。

例えば：

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

この構造は、パララックスデモページのソースコードで確認できます。

どうしてもレイアウトに新しい要素を追加したくない場合は、parallaxOptions 内の property オプションを background に設定して、現在のセクションやスライドの背景にエフェクトを適用できます。
fp-bg 要素を使用する場合と比べてパフォーマンスが劣るため、本当に必要な場合にのみおすすめします。

背景の適用方法

背景は、セクションやスライドに背景を適用するのと同じ方法で fp-bg 要素に適用します。CSSまたはインラインスタイリングを使用できます。

例えば：

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

オプション

パララックスエフェクトオプション

デモページで動作を確認できます。

parallaxOptions 内で設定可能なオプションの説明：

fp-bg 要素を使用することで、translate3d ハードウェアアクセラレーションを利用できるため、パフォーマンスが向上します。propertyオプションは、特定の理由で各セクションやスライドに追加の fp-bg 要素を追加したくない場合や、HTMLマークアップを変更できない場合のために用意されています。

メソッド

デモページで動作を確認できます。

setOption(optionName, value)

指定したオプションの値を設定します。optionName は parallaxOptions 内のいずれかのオプション（type、percentage または property）です。

// `type` プロパティの値を変更する
fullpage_api.parallax.setOption('type', 'cover');

// `percentage` プロパティの値を変更する
fullpage_api.parallax.setOption('percentage', '30');

init()

パララックスエフェクトを有効にします。特定のタイミングで動的に有効にする必要がある場合に便利です。

fullpage_api.parallax.init();

destroy()

パララックスエフェクトをオフにします。

fullpage_api.parallax.destroy();