8.jquery.easing　編

イージング関数の時間軸制御で
単調な動きに変化を付けます

Animation 効果を簡単に演出できる jquery の「easing」を使って、様々な時間軸効果を検証してみます。
オブジェクトの移動は勿論、フェード効果にも使用できます。
基本パターンは３０種ですが、所要時間の組み合わせ、並びに各パターンのチューニングが可能ですから、出力形態は無限です。
便利な早見表が公開されていますので、是非活用してみては如何でしょうか。

easing 関数早見表  外部リンク   https://easings.net/ja
Navi Open
Close Navi
ads by google
デモと概要
デモ・サンプル では、単純な横方向の伸縮スライドと、同様に縦方向の円の落下を表現しています。それぞれ選択した easing 関数 による時間軸の変化を試すことができます。
animation の所要時間は 700ミリ秒 にセットしています。

デモ・サンプルの使用方法 :
３０種類の各 easing 曲線図 をclickすると、デモ・サンプル・アクションのポップアップウインドウが表示されます。 続けて他の曲線図を選択する事が可能です。
HTML
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください。
CSS
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください。
JS
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください。