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

ワードプレステーマ別

TCDテーマGENSEN:トップページスライダーのキャプションのエフェクトを削除する方法

Q.トップページのスライダー画像上に表示されるキャプションやボタンのエフェクト(フェードインなどのアニメーション)を削除して、キャプション等が表示された状態でスライドするように変更したい

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

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

#header_slider .item.slick-active .caption > :nth-child(1),
#header_slider.slider_video_mobile .caption > :nth-child(1),
#header_slider .item.slick-active .caption > :nth-child(2),
#header_slider.slider_video_mobile .caption > :nth-child(2),
#header_slider .item.slick-active .caption > :nth-child(3),
#header_slider.slider_video_mobile .caption > :nth-child(3) {
  -webkit-animation:sliderCaptionAnimation 1s ease forwards 0; animation:sliderCaptionAnimation 1s ease forwards 0; }
@-webkit-keyframes sliderCaptionAnimation {
0% { opacity:1; -webkit-transform:translate3d(0, 30px, 0); transform:translate3d(0, 30px, 0); }
	100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
}
@keyframes sliderCaptionAnimation {
0% { opacity:1; -webkit-transform:translate3d(0, 30px, 0); transform:translate3d(0, 30px, 0); }  
100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }
}
@-webkit-keyframes headerCaptionAnimation {
	0% {opacity:1; -webkit-transform:translate3d(0, -50%, 0); transform:translate3d(0, -50%, 0); }  
100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }
}
@keyframes headerCaptionAnimation {
	0% {opacity:1; -webkit-transform:translate3d(0, -50%, 0); transform:translate3d(0, -50%, 0); }  
100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }
}

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

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

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