仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

エフェクトの動きを変化させるjQueryのプラグイン「jQuery Easing Plugin」の使い方と動作

公開日:

jQuery

エフェクトの動きを変化させるjQueryのプラグイン「jQuery Easing Plugin」の使い方と動作

jQueryを使用して制作していると「jQuery Easing Plugin」を使う機会あると思います。

 

「jQuery Easing Plugin」は様々なエフェクトの動きを設定することができるプラグインです。

jQueryのアニメーションの動作などを色々なパターンで設定することが可能です。

 

今回はjQueryのプラグイン「jQuery Easing Plugin」でエフェクトの動きを変化させた時の使い方と動作について記載いたします。

 

 

「jQuery Easing Plugin」の使い方

 

ダウンロード

下記より、jquery.easing.1.3.jsをダウンロードできます。

jQuery Easing Plugin

 

ファイル読込

jQueryとダウンロードしたjquery.easing.1.3.jsを読み込みます。

 

使い方

animateにイージングを使用した場合の例です。

 

下記は要素をクリックした際にアニメーションでイージング処理を使用してます。
※easeOutQuadを使用しています。

 

サンプル

jquery.easing.1.3.jsを使用したサンプルページ(動作一覧)です。
下記より、それぞれのエフェクトの動きを確認できます。

 

「jQuery Easing Plugin」のデモページ

 

 

まとめ

jQuery Easing Pluginを使用するとeasingの種類が30種類以上も選択することができます。

 

シンプルなアニメーションの動作ではなく、ちょっと変わった動きを見せたいときに活用できます。
面白い動きをするものがあるので、それぞれの動作を確認しながら活用するのがいいと思います。

 

また、他のプラグイン等でも合わせて使うことが多いので、是非チェックしてみてください。

 

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00