サポート » プラグイン » ひとつの固定ページにだけ ANIMSITION を設定するには

  • 現在当該ページにある都道府県名(カテゴリとして設定)のテキストリンクをクリックすると、そのカテゴリ内に含まれる記事のうち1つがランダムで選ばれ、表示されるプログラムを導入しています。

    今回、こうしてランダムで選ばれた記事へ遷移する際に、アニメーションをつけたいと考えています。具体的には、このANIMSITIONというサービスの中のROTATE LARGEを適用したく思います。

    こちらのページを参考に試行錯誤しているのですが、今のところまったく動作いたしません。行った作業は以下となります。

    1. テーマエディターのheader.phpに

    <head>
      ...
      <link rel="stylesheet" href="css/animsition.min.css">
     
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="js/jquery.animsition.min.js"></script>
    </head>

    を埋め込む。

    2. 固定ページ下部の都道府県(Tableで作成)部を、

    <div
      class="animsition"
      data-animsition-in-class="zoom-in"
      data-animsition-in-duration="1000"
      data-animsition-out-class="zoom-out"
      data-animsition-out-duration="800"
    >
      ...
    </div>

    このdivタグで囲う。

    3. 同じ固定ページ内に、HTMLコードのボックスを1つ作り、

    <script>
    $(document).ready(function() {
      $(".animsition").animsition({
        inClass               :   'fade-in',
        outClass              :   'fade-out',
        inDuration            :    1500,
        outDuration           :    800,
        linkElement           :   '.animsition-link', 
        // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
        touchSupport          :    true, 
        loading               :    true,
        loadingParentElement  :   'body', //animsition wrapper element
        loadingClass          :   'animsition-loading',
        unSupportCss          : [ 'animation-duration',
                                  '-webkit-animation-duration',
                                  '-o-animation-duration'
                                ]
      });
    }); 
    </script>

    このタグを埋め込む。

    行ったのはこの3ステップです。

    なんとなく間違えているのはステップの3つ目かなと感じているのですが、自身で判断が付きません。恐れ入りますが、誰かわかる方にアドバイスいただけますと幸いです。

    • このトピックはkaine8639が3ヶ月、 2週前に変更しました。
    • このトピックはkaine8639が3ヶ月、 2週前に変更しました。

    ヘルプの必要なページ: [リンクを見るにはログイン]

  • このトピックに返信するにはログインが必要です。