スクロールアニメーションのカスタマイズ

スクロール・アニメーションのスタイル、または、いわゆる "easing" の変更が可能です。 次の項目をスクロールしてください。動き方が理解できます:

スタンドアロン・デモ

カスタムアニメーション

jQuery.easing オブジェクトへ追加することにより、新しいアニメーションをスクロールに追加することができます。 ここでは、"custom" と言う1つのアニメーションを追加します:

// "custom" と言うカスタム・イージング
$.easing.custom = function (x, t, b, c, d) {
	var s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

見ての通り、アニメーションのコードは正気の沙汰ではありません。 jQuery Easing Plugin のソースコード からこの関数を取得しました。 試すことができる、他のアルゴリズムが非常にたくさんあります。 これと同じライブラリは、jQuery UI プロジェクトでも同様に使用されています。

スクロールの設定

スクロールの設定は簡単です。easing プロパティによりカスタムイージングを設定します。 また、speed プロパティを使用して、イージングの速度も変更できます。 ここでは、アニメーションが見え易いように、少し遅くしています。

// use the custom easing
$("div.scrollable").scrollable({easing: 'custom', speed: 700, circular: true});

既存のスクロールのイージングを変更する

動的に既存のスクロールのイージング設定を変更することができます:

  // get handle to the configuration
  var conf = $("#tab_panes").scrollable().getConf();
 
  // alter the easing
  conf.easing = 'custom';
  conf.speed = 700;