clover.blue

スクロールによってCSSを変更し、パララックス効果を実現するjQueryプラグイン

Data
2018/02/03
Tag

スクロールによってさまざまなCSSを変更することができます。
またプラグインのオプションをdata属性に設定できるjs（jquery.dataExtend）を使うとdata属性に指定するだけで効果を与えることができます。

以前も同じようなプラグインを作ってはいたのですが、複雑になりがちだったため
なるべくシンプルに、再現したいと思ったことが工夫次第でできる作りにしたいと思い作り直しました。

GitHub: https://github.com/kamem/jquery.scrollParallax

Description

このプラグインには3つの機能があります。

  1. 任意の位置を通過したときに関数を実行する
  2. スクロール量に応じてcssを変化させる
  3. 移動距離に応じてcssを変化させる

DEMO

Requirement

※ jquery.dataExtendはjqueryプラグイン用の記述をdata属性に持たせることができるプラグインです。
これを使うことによってjsをあまり書かずにparallax効果を実現することができます。

jquery.dataExtendの詳しい説明は下記を見てください。

Install

Bower

bower install jquery.scrollParallax

Npm

npm install jquery.scroll-parallax

Usage

初期設定

$.parallax({
    stage: window,
    direction: 'y',
    debugMode: true
});
option name Descriptions default
stage スクロールさせたいwindow window
direction スクロールの方向 'y'
debugMode デバック用にスクロール量を表示、timingでの実行位置を表示 false

jquery.dataExtendを使用する場合

$('.parallax-timing').dataExtend('parallaxTiming');
$('.parallax-speed').dataExtend('parallaxSpeed');
$('.parallax-fit').dataExtend('parallaxFit');

classは任意の値を入れてください。
これにより上記のclassをつけたタグにはdata属性でoptionを指定することができます。

timing

任意の位置にスクロール量が来た時に関数を実行する

初期設定

$.parallaxTiming({
    timingLinePercent: 50
});
option name Descriptions default
timingLinePercent タイミングの位置をどこに設定するか（windowの幅での割合） 50

動作

$(el).parallaxTiming(
    fixScrollPosition: null,
    start: null,
    end: null,
    toggle: []
);
option name Descriptions default
fixScrollPosition スクロール位置がこの位置にきた時に関数が実行される、もしも値がnullの場合は指定したタグのoffset().topを代入します。 null
start 上から下に向かって通過した場合に実行される関数 null
end 下から上に向かって通過した場合に実行される関数 null
toggle 上から下に向かって通過した場合: 配列の1番目を実行, 下から上に向かって通過した場合: 配列の2番目を実行 []

例）

2つとも同じ意味です

$(el).parallaxTiming({
    start: function(e) {
        console.log('start')
    },
    end: function(e) {
        console.log('end')
    }
});

$(el).parallaxTiming({
    toggle: [
        function(e) {
            console.log('start')
        },
        function(e) {
            console.log('end')
        }
    ]
});

※ 引数にisOverとtargetが返されます。

function(e) {
    console.log(e.isOver); //ラインを超えているか
    console.log(e.target); //どのコンテンツの関数が反応したのか
}

例）jquery.dataExtendを使用した場合

<p class="parallax-timing" data-start="start" data-end="end">Test</p>

このタグの位置をfixScrollPositionで指定した位置が通過した場合に関数を実行します。
※ fixScrollPositionを省略している場合は指定したタグのoffset().topが基準になります。

  • 上から下に通過した場合にglobalにあるstartを実行
  • 下から上に通過した場合にglobalにあるendを実行

speed

スクロール量に応じてcssを変化させる

$(el).parallaxSpeed({
    style: 'top',
    speed: 2,
    min: -999999,
    max: 999999,
    fixStyleValue: String($element.css(style)),
    fixScrollPosition: 0
});
option name Descriptions default
style 変化させたいcssの値 'top'
speed スクロール量 / speed ので値を変化させる 2
min 最小値 -999999
max 最大値 999999
fixStyleValue 希望のstyle、コンテンツのfix時のsyle、nullの場合はcssで予め指定していたstyleが代入されます。 null
fixScrollPosition スクロールがfixScrollPositionの位置に来た時に希望の位置（fixStyleValue）にコンテンツがfixします。 0

例）

$(el).parallaxSpeed {
    sytle: 'left',
    speed: 0.5
    fixScrollPosition: 300
}

例）jquery.dataExtendを使用した場合

<p class="parallax-speed" data-style="left" data-speed="0.5" data-fix-scroll-position="300">Test</p>

応用編

各オプションは配列で指定することができます。

$(el).parallaxSpeed {
    sytle: ['top', 'left', 'background-color'],
    speed: [0.5, 2, 2],
    min: [100, 100, [100,10,0]],
    max: [500, 500, [255,255,200]] //rba(100, 100, 100)のような値も指定できます。
    fixScrollPosition: 300
}

jquery.dataExtendを使用した場合

<p class="parallax-speed"
    data-style="['top', 'left', 'background-color']"
    data-speed="[0.5, 2, 2]"
    data-min="[0.5, 2, 2]"
    data-max="[500, 500, [255,255,200]]"
    data-fix-scroll-position="300">Test</p>

コンテンツ幅がウィンドウの幅によって変わる場合の対処方法

下記のようにタグを指定することでそのタグのoffset().topからの位置をfixScrollPositionとすることができます。
基準の位置から微調整したい場合は,で区切り値を入れてください。

fixScrollPosition: '#main,+100'

fit

移動距離に応じてcssを変化させる

$(el).parallaxFit({
    start: 0,
    end: 500,
    fromStyle: {
        top: '100px'
    },
    toStyle: {
        top: '700px'
    },
    easing: 'easeInOutBack',
});
option name Descriptions default
start 移動を始めるスクロール位置 null
end 移動が終わるスクロール位置 null
toStyle 始めのcss（cssは文字列で指定してください） null
fromStyle 終わりのcss（cssは文字列で指定してください） null
easing easing pluginの名前を指定 null

例）jquery.dataExtendを使用した場合

<p class="parallax-fit"
    data-start="0"
    data-end="500"
    data-from-style="{'top': '100px'}"
    data-to-style="{'top': '400px'}"
    data-easing="easeInOutBack">Test</p>

応用編

motion1Startのようにmotionをつなげていくことでmotionを複数指定できます。

  • startを省略すると過去のendの値を参照します。
  • fromを省略すると過去のtoの値を参照します。
  • 参照した結果toの値がない場合はcssで指定している値を見にいきます。
$(el).parallaxFit({
    start: 0,
    end: 500,
    fromStyle: {
        top: '100px'
    },
    toStyle: {
        top: '400px'
    },
    easing: 'easeInOutBack',

    motion1End: 700,
    motion1FromStyle: {
        left: '300px'
    },
    motion1ToStyle: {
        left: '400px'
    },
    motion1Easing: 'easeInOutBack',
});

ウィンドウ幅によりコンテンツ幅が変わる場合の対処方法

下記のようにタグを指定することでそのタグのoffset().topからの位置をstartとすることができます。
基準の位置から微調整したい場合は,で区切り、値を入れてください。

$(el).parallaxFit({
    start: '#main',
    end:'#main,+100',

ウィンドウ幅変更により、スクロールがコンテンツ位置に到達しない場合の最初方法

lastScrollPositionをスクロールの最後の位置を取得できます。

$(el).parallaxSpeed({
    fixScrollPosition: 'lastScrollPosition'
})

$(el).parallaxFit({
    start: '#main',
    end: 'lastScrollPosition',