パララックス：
縦スクロール量に応じてNode背景を動かす：pxあたり
スクロール量に応じて指定Nodeの背景画像の background-position を上下に動かす。
複数の background が設定されている場合にも対応。
Node
Nodeを指定 id値を文字列で指定してもよい
Number1
スクロール1pxに対する移動量を数値で指定 整数・小数点で指定
Number2
複数のbackgroundが設定されている場合の配列番号を指定 省略した場合は配列番号[0]を適用。
●必須引数 ●オプション引数(省略可能)
記述例
$parallaxNodeBgPx($id('nodeId'), 0.1)
$parallaxNodeBgPx('nodeId', 0.25, 1)
注意点
表示域外でも動作するので、最初から表示されているファーストビューなどで使用する関数。
対象Nodeに設定する背景画像の background-size は、対象Nodeよりも大きい必要がある。
動作サンプル
onscrollイベントハンドラに設定してからスクロールして、サンプルの動きを確認する。
移動量＝0.07
移動量＝0.1
HTML :
<div id="sample1">
<div>移動量＝0.07</div>
<div>移動量＝0.1</div>
</div>
Sass :
#sample1 {
& > div {
width: 400px;
height: 400px;
&:nth-child(1) {
background: url(../../images/pht_4.jpg) no-repeat center bottom;
background-size: 500px auto;
}
&:nth-child(2) {
background:
url(../../images/obj_logo.svg) no-repeat,
url(../../images/pht_4.jpg) no-repeat;
background-size:
60px auto,
500px auto;
background-position:
right 15px bottom 15px,
center bottom;
}
}
}
Javascript :
$parallaxNodeBgPx($tag("div","sample1",0),0.07);
$parallaxNodeBgPx($tag("div","sample1",1),0.1,1); //複数の背景画像あり
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。