wrapScroll JavaScript Library エフェクト リファレンス
wrapScroll JS エフェクト リファレンス
エフェクトについて
wrapScrollを利用した、コンテンツ要素の移動はアニメーション・エフェクト処理を利用して、滑らかに移動が行われるようにしています。エフェクト処理をコンテンツに合わせてに変更したい場合、Tweenイベントをオーバーライドする方法があります。
Duration変数を利用したエフェクト周期の変更では、デフォルトのエフェクト処理が呼び出される回数を変更することで、アニメーションの速度を変更することができます。
アニメーション・エフェクトの制御
1. エフェクト周期の変更 (プロパティ)
移動エフェクトの周期を指定します。デフォルト値 60
数値が大きいほど遅くなり、小さいほど早くなります。おおよそ180～30が適正範囲です。
var obj = new wrapScroll('element-id','parent-id');
obj.Duration= 100;
2. Tweenイベントのオーバーライド
setTween() 関数を利用して、エフェクト処理をオーバーライドします。1番目のパラメータには独自に作成したエフェクトの計算処理メソッドを指定します。2番目のパラメータはエフェクトの周期 Duration の数値を指定でき、省略することもできます。省略した場合、現在セットされているエフェクト周期が参照されます。
// Tween Function
method = function(t, b, c, d){ return c * (t /= d) * t + b; }var obj = new wrapScroll('element-id','parent-id');
obj.setTween(method, 100);Tween Function 各パラメータについて
t : time
b : beginning position
c : total change in position
d : duration of the tween
s : element style attributes
1. t : time パラメータ
Tweenの現在の処理回数を取得できます。新規にTweenイベントが呼び出される場合は0。最大でDurationで指定している数値となります。t > Duration の状態になると再び0がセットされます。
2. b : beginning position パラメータ
移動エレメントの現在のY位置をピクセル(px)で取得できます。
3. c : total change in position パラメータ
移動エレメントの現在のY位置から移動する距離をピクセル(px)で取得できます。下に移動する場合は正(+)の数値、上に移動する場合、負(-)の数値となります。
4. d : duration of the tween パラメータ
現在セットされているエフェクトの周期 Duration の数値を取得できます。
5. s : element style attributes パラメータ
移動エレメントのスタイル属性を参照・設定する際に利用します。JavaScriptコードでCSSを変更する場合に利用します。
6. result : 結果の数値(必須)
計算結果を返す必要があります。移動エレメントの位置に指定する数値を返します、返された数値はピクセル数としてセットされます。
Tween Function オーバーライド
Tween処理をオーバーライドする事で、アニメーション処理をオリジナルの仕様に変更できますが、動作に与える影響が大きいので十分に注意して利用する必要があります。ブラウザテストなど十分に行った上で利用する方が良いでしょう。
1. コード記述
<script type="text/javascript">
// Tween Function
method = function(t, b, c, d) { return c * (t /= d) * t + b; }
// Create wrapScroll object, then set tween function
var obj = new wrapScroll('element-id','parent-id');
obj.setTween(method, 60);
</script>
2. デフォルトのエフェクト
wrapScroll.js内部でデフォルトとしてセットされるTweenエフェクトは以下と同じ記述が利用されています。
//Default Tween Function
method = function(t, b, c, d){ return c * (t /= d) * t + b; }
3. s : element style attributes パラメータの用途
s パラメータはスタイル属性を参照・変更に利用する事が可能になるため、移動処理中に透明度(opacity)を変更したりすることが可能になります。但し、position、marginTopなどの利用は避けてください、位置の計算誤差が発生するため正常に動作しなくなります。
Tween Function サンプル
1. smoothEaseIn (デフォルト)
デフォルトのエフェクト処理と同じで、徐々に移動速度が早くなります。
<script type="text/javascript">
smoothEaseIn = function(t, b, c, d){
return c * (t /= d) * t + b;
}
</script>
2. smoothEaseOut
徐々に移動速度が遅くなり停止します。
<script type="text/javascript">
smoothEaseOut = function(t, b, c, d){
return -c * (t /= d) * (t - 2) + b;
}
</script>
3. smoothEaseInOut
徐々に移動速度が早くなり、移動速度を遅くしながら停止します。
<script type="text/javascript">
smoothEaseInOut = function(t, b, c, d){
return c * (t /= d) * t * t * t + b;
}
</script>
4. opacityEaseIn
徐々に移動速度が早くなり、移動中は半透明になります。
<script type="text/javascript">
opacityEaseIn = function(t, b, c, d, s){
var op = ( c > 1 || c < -1 ) ? 0.3 : 1;
if((t == 0) || (op == 1)){
s.opacity = op;
s.filter = 'alpha(opacity=' + op * 100 + ')';
}
return c * Math.pow( 2, 10 * (t/d - 1) ) + b;
}
</script>Tween Function オーバーライド時の注意点
setTween()を利用して、Tween処理をオーバーライドする際に独自のメソッド中に処理の遅いJavaScriptコードを記述すると、アニメーション処理に影響が出ます。
Tween処理イベントをトリガーに利用して、全く異なる処理を行う必要がある場合、setTimeout() を利用して別イベントを発生させる方法が有効です。処理が行われる方法やタイミングはブラウザによって異なります、エフェクト中の重い処理は画面描写にも影響が出るので十分に表示テストを行った上で実装してください。
