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

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

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

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

Description

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

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

DEMO

• y scroll

Requirement

• jquery
• jquery.dataExtend

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

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

• en: https://github.com/kamem/jquery.dataExtend
• ja: http://qiita.com/kamem/items/94e974a0212396d97ed7

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',