パララックス：
縦スクロール量に応じてNode背景を動かす：ページ高
スクロール量に応じて指定Nodeの背景画像の background-position を上下、または左右に動かす。
複数の background が設定されている場合にも対応。
Node
Nodeを指定 id値を文字列で指定してもよい
String
視点の移動方向を指定 大文字・小文字で指定可能
BT = bottomからtopへ ・ TB = topからbottomへ ・ RL = rightからleftへ ・ LR = leftからrightへ
BT = bottomからtopへ ・ TB = topからbottomへ ・ RL = rightからleftへ ・ LR = leftからrightへ
Number1
ページ上での動作制限域を指定 0 – 100 ／ 0 = 上端 ・ 100 = 下端
スクロールすると、下端からNodeが現れてこの指定値までの間に動作が完了し、この指定値から上端までは動かない。
スクロールすると、下端からNodeが現れてこの指定値までの間に動作が完了し、この指定値から上端までは動かない。
Number2
複数のbackgroundが設定されている場合の配列番号を指定 省略した場合は配列番号[0]を適用。
●必須引数 ●オプション引数(省略可能)
記述例
$parallaxNodeBg($id('nodeId'), 'BT', 0)
$parallaxNodeBg('nodeId', 'tb', 50, 1)
注意点
対象Nodeが画面内に入ってから移動動作が開始する仕様。
対象Nodeに設定する背景画像の background-size は、対象Nodeよりも大きい必要がある。
動作サンプル
onscrollイベントハンドラに設定してからスクロールして、サンプルの動きを確認する。
指定＝BT・0
指定＝TB・0
指定＝RL・0
指定＝LR・0
指定＝BT・50
指定＝BT・25
指定＝TB・40・1
HTML :
<div id="sample1">
<div>指定＝BT・0</div>
<div>指定＝TB・0</div>
<div>指定＝RL・0</div>
<div>指定＝LR・0</div>
<div>指定＝BT・50</div>
<div>指定＝BT・25</div>
<div>指定＝TB・40・1</div>
</div>
Sass :
#sample1 {
& > div {
width: 400px;
height: 400px;
background: url(../../images/pht_4.jpg) no-repeat;
background-size: 400px auto;
&:nth-child(1) { background-position: center bottom; }
&:nth-child(2) { background-position: center top; }
&:nth-child(3) { background: url(../../images/pht_5.png) no-repeat left center; background-size: auto 400px; }
&:nth-child(4) { background: url(../../images/pht_5.png) no-repeat right center; background-size: auto 400px; }
&:nth-child(5),
&:nth-child(6) {
background:
url(../../images/obj_logo.svg) no-repeat,
url(../../images/pht_4.jpg) no-repeat;
background-position:
right 15px bottom 15px,
center bottom;
background-size:
60px auto,
400px auto;
}
&:nth-child(7) {
height: 250px;
background:
url(../../images/obj_tree.svg) no-repeat center top,
url(../../images/bg_blue.svg) left top;
background-size:
200px auto,
40px auto;
}
}
}
Javascript :
$parallaxNodeBg($tag("div","sample1",0),'BT',0);
$parallaxNodeBg($tag("div","sample1",1),'TB',0);
$parallaxNodeBg($tag("div","sample1",2),'RL',0);
$parallaxNodeBg($tag("div","sample1",3),'LR',0);
$parallaxNodeBg($tag("div","sample1",4),'bt',50,1); //複数の背景画像あり
$parallaxNodeBg($tag("div","sample1",5),'bt',25,1); //複数の背景画像あり
$parallaxNodeBg($tag("div","sample1",6),'tb',40,0); //複数の背景画像あり
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。