パララックス：
縦スクロール量に応じてNodeの透明度を変化
スクロール量に応じて指定Nodeの透明度(opacity)を変化させる。
Node
Nodeを指定 id値を文字列で指定してもよい
Number
ページ上での動作制限域を指定 0 – 100 ／ 0 = 上端 ・ 100 = 下端 ／ 省略した場合は 0 となる
スクロールすると、Nodeが透明な状態で下端から現れてこの指定値で完全に不透明になる。
スクロールすると、Nodeが透明な状態で下端から現れてこの指定値で完全に不透明になる。
●必須引数 ●オプション引数(省略可能)
記述例
$parallaxNodeAlpha($id('nodeId'))
$parallaxNodeAlpha($id('nodeId'), 75)
$parallaxNodeAlpha('nodeId', 50)
動作サンプル
onscrollイベントハンドラに設定してからスクロールして、サンプルの動きを確認する。
75%の位置で不透明化
50%の位置で不透明化
25%の位置で不透明化
0%の位置で不透明化
HTML :
<div id="sample1">
<div>75%の位置で不透明化</div>
<div>50%の位置で不透明化</div>
<div>25%の位置で不透明化</div>
<div>0%の位置で不透明化</div>
</div>
Javascript :
$parallaxNodeAlpha($tag("div","sample1",0),75);
$parallaxNodeAlpha($tag("div","sample1",1),50);
$parallaxNodeAlpha($tag("div","sample1",2),25);
$parallaxNodeAlpha($tag("div","sample1",3)); //第2引数を省略しているので 0% の位置で不透明化する
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。