採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

TCDテーマOOPS!:ヘッダーコンテンツ画像スライダーのアニメーション表示速度を変更する方法

Q.ヘッダーコンテンツのキャッチフレーズ、説明文、ボタン、画像などに適用されるアニメーション(フェードイン、スライド1、スライド2)の速度を変更することは可能でしょうか?

A.下記にてご対応ください。

外観>TCDテーマオプション>基本設定のカスタムCSSに下記を入力して下さい。

.p-index-slider__item.is-active .p-index-slider__item-catch,
.p-index-slider__item.is-active .p-index-slider__item-desc,
.p-index-slider__item.is-active .p-index-slider__item-image {
    transition: 3s;
}
.p-index-slider__item.is-active .p-index-slider__item-button {
    transition-duration: 2s;
}
.p-index-slider__item.is-active .p-index-slider__item-catch,
.p-index-slider__item.is-active .p-index-slider__item-desc {
    transition-delay: 3.5s;
}
.p-index-slider__item.is-active .p-index-slider__item-image {
    transition-delay: 2s;
}

補足)○s部分を上から 1~4 とし、各数値について説明します。
1:各要素が出現(透明から不透明になる)するまでの時間
2:ボタンが出現(透明から不透明になる)するまでの時間
3:スライダーが切り替わってからキャッチフレーズ・説明文が出現するまでの時間
4:スライダーが切り替わってから画像が出現するまでの時間

3と4の数値を同じにすると、コンテンツが同時に出現します。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事