アニメーション：
NodeをX軸・Y軸回転で切り替え
対象NodeをCSSのtransformで回転させ、90°のタイミングでNode内の表示内容を切り替える。
Node
Nodeを指定 id値を文字列で指定してもよい
String
X軸かY軸かを指定 X = X軸回転 ・ Y = Y軸回転 ／ 大文字・小文字で指定可能
Number1
回転速度を指定 1.1以上の数値 ／ 大きいほど速い
Number2
切り替える子Nodeの番号 子Nodeを配列として考えた時の要素番号 ／ 省略した場合は順番通り
Bool
回転時に陰影を付加 true = 付加する ・ false = 付加しない ／ 省略した場合は true となる
●必須引数 ●オプション引数(省略可能)
記述例
$aniRotateSW($id('aNode'), 'X', 2.5)
$aniRotateSW('aNode', 'y', 1.5, 2)
$aniRotateSW('aNode', 'y', 1.5, 2, false)
注意点
切り替える内容は、対象Nodeの子Nodeとして記述しておく。子Nodeの数だけ切り替えが行われて、ループする。なお、最初に表示しておく1つの子Node以外は「display: none」に設定しておくこと。
表示中の子Nodeの class には「sw_now」が追加されるので、必要に応じて別処理で参照可能。また、ページ読み込み時の最初の子Nodeを任意に設定したい場合も class に「sw_now」を設定することで対応可能。
「transform-origin」の設定は不要。50%でないと動きが不自然になるなるので初期値で良い。
動作サンプル
4つの子Nodeを持った親Nodeを対象としたサンプル。
SAMPLE 1 / BOX 1
SAMPLE 1 / BOX 2
SAMPLE 1 / BOX 3
SAMPLE 1 / BOX 4
HTML :
<div id="sample1">
<div class="sw_now">SAMPLE 1 / BOX 1</div>
<div>SAMPLE 1 / BOX 2</div>
<div>SAMPLE 1 / BOX 3</div>
<div>SAMPLE 1 / BOX 4</div>
</div>
Javascript :
$aniRotateSW($id('sample1'),'X',1.8);
$aniRotateSW($id('sample1'),'y',1.5);
$aniRotateSW('sample1','X',1.6,2);
$aniRotateSW('sample1','x',1.6,0,false);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。