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); } }
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!