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; /*追加*/
}
関連カスタマイズ
「ヘッダーコンテンツ」のアニメーションの停止方法についてはこちらの記事をご参照ください。
Q.トップページのヘッダーコンテンツ上でキャッチフレーズ・説明文・ボタンが順に表示されるアニメーションをなくして、最初からすべて表示させたいです。 ポイント「レイヤー画像」はテーマオプションからアニメーションなしに設定出来ます。 TCDテーマ＞トップページ＞ヘッダーコンテンツの設定＞コンテンツの...
この記事は役に立ちましたか？
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！