アニメーション：
Nodeの背景画像をシャッター動作で切り替え
対象Nodeに設定されている背景画像を、指定した色面で閉じるような動作で一旦隠してから、画像を切り替えて再度開いて見せる。
Node
Nodeを指定 id値を文字列で指定してもよい
String1
切り替える背景画像のパスを指定
String2
切り替えに使用する色面の色を指定 HEX = 3桁か6桁 (#の有無は不問)
String3
シャッター動作の開閉方向を指定
(例) LR ・ TT ／ 1文字目は閉じる開始位置、2文字目は開く開始位置
- T○ = 上から閉じる
- B○ = 下から閉じる
- L○ = 左から閉じる
- R○ = 右から閉じる
- ○T = 上から開く
- ○B = 下から開く
- ○L = 左から開く
- ○R = 右から開く
Number
動作完了までの時間を指定 単位は秒で指定する (例) 1.2 ／ 省略した場合は 0.8 となる
●必須引数 ●オプション引数(省略可能)
記述例
$aniBgShutter($id('aNode'), 'images/bg2.jpg', 'DDD', 'LR')
$aniBgShutter('aNode', 'images/bg2.jpg', '#990000', 'LL', 1.2)
注意点
対象Nodeには背景画像が設定されている必要がある。また、background-size は、coverに設定変更される。
Firefoxでは、この関数を実行する時点で、切り替える画像が読み込まれていないと想定通りに動かないので、事前に$imgCache()関数などを利用して読み込んでおく必要がある。(以下の動作サンプルを参照)
動作サンプル
様々な設定で背景画像を切り替えるサンプル。
HTML :
<button type="button" onclick="$aniBgShutter($id('sample1'),'images/pht_2.jpg','#31b1bc','LR')">○○</button>
<button type="button" onclick="$aniBgShutter($id('sample1'),'images/pht_5.png','DDD','BT',1.2)">○○</button>
<div id="sample1"></div>
<button type="button" onclick="$aniBgShutter('sample2','images/pht_4.jpg','8eb8bd','TT',1.2)">○○</button>
<button type="button" onclick="$aniBgShutter('sample2','images/pht_7.jpg','#dc7','BR',2.0)">○○</button>
<button type="button" onclick="$aniBgShutter('sample2','images/pht_big3.png','#dc7','LT',0.6)">○○</button>
<div id="sample2"></div>
Sass :
#sample1 {
width: 500px;
height: 332px;
background: url(images/pht_1.jpg) no-repeat center center;
background-size: cover;
}
#sample2 {
width: 266px;
height: 400px;
background: url(images/pht_3.jpg) no-repeat center center;
background-size: cover;
}
Javascript :
//使用画像を事前にキャッシュ用Nodeに読み込む
$imgCache("images/pht_1.jpg","images/pht_2.jpg","images/pht_3.jpg","images/pht_4.jpg","images/pht_5.png","images/pht_7.jpg","images/pht_big3.png");
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。