WebPublisher
[slick] 슬라이드 롤링 시마다 애니메이션 실행
amanda
2021. 4. 6. 09:47
HTML
<article class="visual">
<div class="visual-con visual-con01 on">
<div class="visual-text">
<h2 class="font-square"></h2>
<strong class="font-square"></strong>
<span></span>
</div>
</div>
<div class="visual-con visual-con01 on">
<div class="visual-text">
<h2 class="font-square"></h2>
<strong class="font-square"></strong>
<span></span>
</div>
</div>
</article>
CSS
.visual .slick-slide.on .visual-text h2{-webkit-animation:visualTextUp 0.5s linear forwards;animation:visualTextUp 0.5s linear forwards;}
.visual .slick-slide.on .visual-text strong{-webkit-animation:visualTextUp 0.5s 0.7s linear forwards;animation:visualTextUp 0.5s 0.7s linear forwards;}
.visual .slick-slide.on .visual-text span{-webkit-animation:visualTextUp 0.5s 1s linear forwards;animation:visualTextUp 0.5s 1s linear forwards;}
.visual .slick-slide.on .visual-text h2, .visual .slick-slide.on .visual-text strong, .visual .slick-slide.on .visual-text span{-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-webkit-perspective: 1000;-webkit-backface-visibility: hidden;}
@keyframes visualTextUp{
from {opacity: 0;-webkit-transform:translateY(10px);transform:translateY(10px);}
50%{opacity: 0.4;}
to {opacity: 1;-webkit-transform:translateY(0px);transform:translateY(0px);}
}
jQuery
function visual(){
$('.visual').not('.slick-initialized').slick({
arrows: false,
dots: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 1000,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
});
$('.visual').on('beforeChange', function (event, slick, currentSlide) {
$('.slick-slide').removeClass('on');
});
$('.visual').on('afterChange', function (event, slick, currentSlide) {
$('.slick-slide').removeClass('on');
$('.slick-current').addClass('on');
});
}