【Animsition】ページを表示する時にアニメーションを加えるプラグインを試してみた

ページを遷移する時にアニメーションを加えることができるjQueryのプラグイン”Animsition”です。
普通に使うだけなら以下のリンクを参照していただければ迷うことはないと思います。
今回はLoadingアニメーションの変更とローディングアニメーションの最低時間を追加します。

[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト(WordPressにも対応) -Animsition

ローディングアニメーションの延長

ローカルで実行すると早すぎてローディングアニメーションが表示されず不安になるので、ローディングアニメーションの時間を確保する変更を追加します。

jquery.animsition.jsのローディングアニメーションに関する箇所を読みます。

  loading: true,
  loadingParentElement: "body",
  loadingClass: "animsition-loading",

/*---------省略-------------------*/

  removeLoading: function() {
      var $this = $(this);
      var options = $this.data(namespace).options;
      var $loading = $(options.loadingParentElement).children("." +        options.loadingClass);
      $loading.fadeOut().remove();
    },

/*---------省略-------------------*/
 if (options.loading) {
        methods.removeLoading.call(_this);
      }

$loading = bodyの .animsition-loading クラスが適用されている子要素
それをフェードアウトし、削除する。

今回は removeLoading する前、ページインアニメーションの前に2秒確保します。

      	setTimeout(function(){
			methods.removeLoading.call(_this);
		},2000);
      	setTimeout(function(){
        		methods.pageInBasic.call(_this, inClass, inDuration);
        },2000); 

setTimeout関数について詳しくは以下のリンクを参考にしてください。
一定時間後に処理を行う(setTimeout)

htmlファイルからの設定を容易にするためoptionsにloadingMinimumTime: 2000 を追加します。

options = $.extend({
/*---------省略-------------------*/
        loading: true,
        loadingMinimumTime: 2000,
/*---------省略-------------------*/
setTimeout(function(){
			methods.removeLoading.call(_this);
		},options.loadingMinimumTime);      

jQuery.extend() メソッドの使い方まとめ

jQueryのmergeとextendとjQueryプラグイン

以上でデフォルト設定でのローディングアニメーションの時間を確保できました。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD