TCDテーマBeauty：トップページヘッダーコンテンツ上のキャッチフレーズ・ボタンの表示タイミング調整方法

Q.トップページのヘッダーコンテンツのキャッチフレーズとボタンの表示するタイミングを変更することは可能でしょうか。

この記事では、上記箇所のアニメーションの表示タイミングを調整する方法と、最初から表示させる（アニメーションをなくす）方法をご紹介します。

A.下記の方法でご対応ください。

外観＞TCDテーマオプション＞基本設定のカスタムCSSに入力

・ヘッダーコンテンツに画像を設定している場合

・表示タイミングを調整する

.p-header-slider__item.slick-active .p-header-slider__item-title {
    -webkit-animation: sliderItemAnimation 1s ease forwards 〇s;
    animation: sliderItemAnimation 1s ease forwards 〇s;
}
.p-header-slider__item.slick-active .p-header-slider__item-btn {
    -webkit-animation: sliderItemAnimation 1s ease forwards ●s;
    animation: sliderItemAnimation 1s ease forwards ●s;
}

〇がキャッチフレーズ、●がボタンの表示タイミングです。任意の数値に変更ください。
1sの値は表示にかかる（透明から不透明へのアニメーション）時間です。こちらも任意の数値に変更可能です。

・最初から表示させる（アニメーションをなくす）

.p-header-slider__item.slick-active .p-header-slider__item-title {
    -webkit-animation: none;
    animation: none;
    opacity: 1;
}
.p-header-slider__item.slick-active .p-header-slider__item-btn {
    -webkit-animation: none;
    animation: none;
    opacity: 1;
}

・ヘッダーコンテンツに動画を設定している場合

・表示タイミングを調整する

.p-header-video.is-active .p-header-video__title {
    -webkit-animation: sliderItemAnimation 1s ease forwards 〇s;
    animation: sliderItemAnimation 1s ease forwards 〇s;
}
.p-header-video.is-active .p-header-video__btn {
    -webkit-animation: sliderItemAnimation 1s ease forwards ●s;
    animation: sliderItemAnimation 1s ease forwards ●s;
}

〇がキャッチフレーズ、●がボタンの表示タイミングです。任意の数値に変更ください。
1sの値は表示にかかる（透明から不透明へのアニメーション）時間です。こちらも任意の数値に変更可能です。

・最初から表示させる（アニメーションをなくす）

.p-header-video.is-active .p-header-video__title {
    -webkit-animation: none;
    animation: none;
    opacity: 1;
}
.p-header-video.is-active .p-header-video__btn {
    -webkit-animation: none;
    animation: none;
    opacity: 1;
}

・ヘッダーコンテンツにYouTube動画を設定している場合

・表示タイミングを調整する

.p-header-youtube.is-active .p-header-youtube__title {
    -webkit-animation: sliderItemAnimation 1s ease forwards 〇s;
    animation: sliderItemAnimation 1s ease forwards 〇s;
}
.p-header-youtube.is-active .p-header-youtube__btn {
    -webkit-animation: sliderItemAnimation 1s ease forwards ●s;
    animation: sliderItemAnimation 1s ease forwards ●s;
}

〇がキャッチフレーズ、●がボタンの表示タイミングです。任意の数値に変更ください。
1sの値は表示にかかる（透明から不透明へのアニメーション）時間です。こちらも任意の数値に変更可能です。

・最初から表示させる（アニメーションをなくす）

.p-header-youtube.is-active .p-header-youtube__title {
    -webkit-animation: none;
    animation: none;
    opacity: 1;
}
.p-header-youtube.is-active .p-header-youtube__btn {
    -webkit-animation: none;
    animation: none;
    opacity: 1;
}