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; /*追加*/ }
関連カスタマイズ
「ヘッダーコンテンツ」のアニメーションの停止方法についてはこちらの記事をご参照ください。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!