JavaScript:jQueryイージングの確認用アニメーションとサンプルコード一覧

おなじみeasingのカーブの名称と動きを忘れがちなので、アニメーションサンプルをjQuery日本語リファレンスを参考にみやすくまとめました。

サンプルコードを出力しているので、コピーペーストで即使用が可能です。コーディング時にお役立て下さい。

jQueryイージングのアニメーションサンプル

カーブの名称 or バー をクリックすればアニメーションが確認できます。(最初の読み込みに多少時間がかかります)

まとめ

easeInElastic はどこで使用するのでしょうか(笑)一般的には easeInQuad、easeOutQuad、easeInOutQuad あたりがよく使われていると思います。
動きが楽しいからといってやりすぎにはには注意し、節度をもって使用すればUX向上に一役買ってくれると思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents