TCDテーマANTHEM：トップページのコンテンツビルダーのアニメーション遅延時間を調整する方法

Q.質問内容

トップページで画像やテキストがアニメーションで遅延するタイミングを早くしたり、完全になくしたりできますか？

A.下記の方法でカスタマイズしてください。

ANTHEMテーマでは、トップページをスクロールをしていくと、コンテンツビルダーの各箇所のHTML要素にclass属性（.animate）が付与される仕組みとなっております。
付与された後に、少し時間を送らせてアニメーションや状態変化の開始を行っていますので、これらを定義しているCSSを上書きして調整する方法をご紹介いたします。

▽コンテンツビルダーの各箇所：ANTHEMデモサイトの例

手順

「カスタムCSS」で以下CSSを追加します。

/*コンテンツビルダー：商品一覧*/
.index_product_list .cb_catch.animate,
.index_product_list .cb_desc.animate,
.index_product_list .product_list.animate{
  animation-delay: 0.1s !important;
}
/*コンテンツビルダー：商品一覧のボタン*/
.index_product_list .link_button{
  transition-delay: 0.1s !important;
}
/*コンテンツビルダー：記事カルーセル*/
.index_post_slider .cb_catch.animate,
.index_post_slider .cb_desc.animate,
.index_post_slider .post_list_slider_wrap.animate{
  animation-delay: 0.1s !important;
}
/*コンテンツビルダー：記事カルーセルのボタン*/
.index_post_slider .link_button{
  transition-delay: 0.1s !important;
}
/*コンテンツビルダー：レイヤー画像*/
.index_layer_content .catch.animate,
.index_layer_content .desc.animate,
.index_layer_content .link_button.animate{
  animation-delay: 0.1s !important;
}
/*フリースペース*/
.index_free_space .inview{
  transition-delay: 0.1s !important;
}

デフォルトは1.0sとなっているところ、0.1s（0.1秒）に変更しています。
0sにすることでまったく遅延なしにも設定可能です。

ただし、先述のとおり特定のスクロール位置に移動しないとclass属性が付与されないため、この仕組み自体に遅延を発生させる要因が含まれております。
完全に遅延をなくしてすべて静止するために、次のような方法もお試しいただければと思います。

▽アニメーションの遅延をなくす（一度にすべて表示される）

編集するファイル：head.php
編集する箇所：　1547～1566行目のscriptタグの中身を下記の内容に入れ換えてください。

<script type="text/javascript">
jQuery(document).ready(function($){
  $(window).on('scroll load pageshow', function() {
    var scTop = $(this).scrollTop();
    var scBottom = scTop + $(this).height();
    $('.inview').each(function() {
      var thisPos = $(this).offset().top + 100;
      if (thisPos < scBottom) {
        $(this).addClass('animate');
        $(".animate_item", this).each(function() {
          $(this).addClass('animate');
        });
      }
    });
  });
});
</script>

▽完全に動きをなくすバージョン

<script type="text/javascript">
jQuery(document).ready(function($){
  $('.inview').addClass('animate');
  $('.inview .animate_item').addClass('animate');
});
</script>

※カスタムCSS追加

/*フリースペース*/
.index_free_space .inview{
  transition-delay: 0.1s !important;
  top: 0; /*追加*/
}

関連カスタマイズ

「ヘッダーコンテンツ」のアニメーションの停止方法についてはこちらの記事をご参照ください。

2022.09.26

TCDテーマANTHEM：トップページヘッダーコンテンツのフェードアニメーションをなくす方法

Q.トップページのヘッダーコンテンツ上でキャッチフレーズ・説明文・ボタンが順に表示されるアニメーションをなくして、最初からすべて表示させたいです。 ポイント「レイヤー画像」はテーマオプションからアニメーションなしに設定出来ます。 TCDテーマ＞トップページ＞ヘッダーコンテンツの設定＞コンテンツの...