ひとつの固定ページにだけ ANIMSITION を設定するには

  • kaine8639

    (@kaine8639)


    3年、 10ヶ月前

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

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

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

    １． テーマエディターの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>

    を埋め込む。

    ２． 固定ページ下部の都道府県（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タグで囲う。

    ３． 同じ固定ページ内に、HTMLコードのボックスを１つ作り、

    <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>

    このタグを埋め込む。

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

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

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

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

  • トピック「ひとつの固定ページにだけ ANIMSITION を設定するには」には新たに返信することはできません。