WebPublisher
[slick] progressbar animation (hover 시 slick 및 animation stop)
amanda
2022. 2. 11. 10:05
html
<div class="visual">
<article class="slide-con slide-con01">
<img src="test01.png" alt="">
<div class="visual-text">
<strong class="tit">title</strong>
<span>subject</span>
</div>
</article>
<article class="slide-con slide-con02">
<img src="test02.png" alt="">
<div class="visual-text">
<strong class="tit">title</strong>
<span>subject</span>
</div>
</article>
<article class="slide-con slide-con02">
<img src="test02.png" alt="">
<div class="visual-text">
<strong class="tit">title</strong>
<span>subject</span>
</div>
</article>
</div>
<div class="visual-page">
<strong class="current-page">01</strong>
<div class="range-wrap">
<span class="total-range"></span>
<span class="current-range on"></span>
</div>
<strong class="total-page"></strong>
</div>css
.visual-wrap{position: relative;}
.visual{position: relative;width: 100%;height: 790px;overflow:hidden;}
.slide-con{position:relative;z-index:1;width:100%;height: 790px;background-position: center;background-repeat: no-repeat;background-size: cover;}
.slide-con01{background-image:url(/include/img/main-visual01.png);}
.slide-con02{background-image:url(/include/img/main-visual01.png);}
.visual .slick-dots{width:1200px; margin:0 auto; position:absolute; bottom:175px; left:0; right:0;}
.visual .slick-dots li{display: block;float: left;width: 12px;height: 12px;background:none; border:2px solid #fff; font-size: 0;line-height: 0;}
.visual .slick-dots li:not(:first-child){margin-left: 10px;}
.visual .slick-dots li.slick-active{background: #f4d86c; border:none; width:40px;}
.visual .slick-arrow{display: block;position: absolute;z-index: 1;top: 590px;width: 17px;height: 21px;background-repeat: no-repeat;background-position: center;font-size: 0;line-height: 0;}
.visual .slick-prev{left: calc(((100% - 1300px) / 2) + 340px);background-image: url('/include/img/ic-visual-l.png');}
.visual .slick-next{left: calc(((100% - 1300px) / 2) + 365px);background-image: url('/include/img/ic-visual-r.png');}
.visual .visual-text{max-width: 1300px;margin: 0 auto;padding-top:190px;color: #fff;}
.visual .visual-text .tit{display: block;word-break: keep-all;font-weight:500; font-size:56px;letter-spacing: -0.02em;line-height: 1.25em;}
.visual .visual-text span{display:block;margin-top:10px;color: rgba(255,255,255,.5);font-size:22px;font-weight:300;line-height: 1.4em;font-family: 'Rubik', sans-serif;}
.visual .visual-text .form-control{display: inline-block;width: 530px;height: 55px;margin-top: 40px;padding-left: 20px;padding-right: 45px;background-color: transparent;border-radius: 27.5px;border: 4px solid #fff;font-size: 18px;line-height: 1.2em;color: #fff;vertical-align: baseline;}
.visual .visual-text .form-control:placeholder{font-size: 18px;line-height: 1.2em;color: rgba(255,255,255,.3);font-weight: 300;font-family: 'Rubik', sans-serif;}
.visual .visual-text .form-control + .btn{width: 30px;height: 30px;margin-left: -50px;margin-bottom: 8px;background-image: url('/include/img/ic-sch.png');background-size: cover;background-position: center;background-repeat: no-repeat;outline: none;vertical-align: middle;}
.visual-page{display: flex;justify-content: flex-start;align-items: center;position: absolute;top: 590px;left: calc((100% - 1300px)/2);}
.visual-page strong{display: inline-block;font-family: 'Rubik', sans-serif;font-size: 24px;font-weight: 400;letter-spacing: -0.02em;}
.visual-page .current-page{width: 30px;color: #fddd32;}
.visual-page .total-page{color: rgba(255,255,255,.3);}
.visual-page .range-wrap{display: inline-block;position: relative;margin: 0 8px;}
.visual-page .range-wrap .total-range{display: inline-block;width: 250px;height: 2px;margin-bottom: 5px;background-color: rgba(255,255,255,.2);}
.visual-page .range-wrap .current-range{display: inline-block;position: absolute;top: 5px;left: 0;width: 0;height: 4px;background-color: #fddd32;}
.visual-page .range-wrap .current-range.on{animation-name: progress;animation-duration: 5s; animation-timing-function: linear;animation-iteration-count: 1;animation-fill-mode: forwards;}
.visual:hover + .visual-page .range-wrap .current-range.on{animation-play-state: paused;}
@keyframes progress{
0% {width: 0%;}
100% {width: 100%;}
}
@media screen and (max-width:1300px) {
.visual .visual-text{margin-left: 20px;margin-right: 20px;}
.visual .visual-text .tit{font-size: 40px;}
.visual .visual-text span{font-size: 18px;}
.visual .slick-arrow{top: 500px;}
.visual .slick-prev{left: 360px;}
.visual .slick-next{left: 385px;}
.visual-page{left: 20px;top: 500px;}
}
@media screen and (max-width:1024px) {
.visual .visual-text .tit{font-size: 32px;}
.visual .visual-text span{font-size: 16px;}
.visual .visual-text .form-control{width: 400px;height: 50px;margin-top: 30px;border-radius: 25px;font-size: 16px;}
.visual .visual-text .form-control + .btn{width: 25px;height: 25px;margin-bottom: 5px;}
.visual-page strong{font-size: 20px;}
}
@media screen and (max-width:768px) {
.visual{height: 100%;}
.visual .visual-text{padding-top: 120px;position: absolute;top: 0;left: 0;}
.visual .visual-text .tit{font-size: 28px;}
.visual .visual-text span{display: none;}
.visual .visual-text .form-control{width: 360px;height: 45px;margin-top: 25px;border: 3px solid #fff;border-radius: 22.5px;}
.visual .visual-text .form-control:placeholder{color: #fff !important;}
.visual .visual-text .form-control + .btn{margin-left: -40px;}
.visual-con{font-size:14px;line-height:18px;}
.slide-con{height: 100%;position: relative;background-image: none;}
.slide-con img{width: 100%;}
.visual .slick-dots{bottom: 90px;}
.visual .slick-arrow{top: 360px;width: 13px;}
.visual .slick-prev{left: 220px;}
.visual .slick-next{left: 250px;}
.visual-page{top: 365px;}
.visual-page strong{font-size: 12px;}
.visual-page .current-page{width: 15px;}
.visual-page .range-wrap .total-range{width: 125px;}
}
@media screen and (max-width:420px) {
.visual .visual-text .tit{font-size: 23px;}
.visual .visual-text .form-control{width: 300px;font-size: 14px;}
.visual .slick-arrow{top: 335px;}
.visual-page{top: 340px;}
}js
$('.visual').not('.slick-initialized').slick({
arrows: true,
dots: false,
autoplay: true,
autoplaySpeed: 5000,
speed: 500,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
pauseOnHover:true,
});
var current = $('.current-page'),
total = $('.total-page'),
totalCount = $('.visual article').length,
slickCloned = $('.visual article.slick-cloned').length;
total.text('0' + (totalCount - slickCloned));
$('.visual').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
var i = (currentSlide ? currentSlide : 0) + 1;
current.text('0' + i);
total.text('0' + slick.slideCount);
});
var time = 0;
var interval;
var timeSet;
var duration=5;
$('.visual').on('afterChange', function (event, slick, currentSlide) {
time=0;
duration=5;
$('.current-range').addClass('on');
$('.current-range.on').css({
'animation-duration': '5s',
})
timeSet = setInterval(function(){
duration--;
},500)
});
$('.visual').on('beforeChange', function (event, slick, currentSlide) {
$('.current-range').removeClass('on');
clearInterval(timeSet);
});
$('.visual').on('mouseenter',function(){
interval = setInterval(function(){
time=time+1;
},500)
})
$('.visual').on('mouseleave ',function(){
clearInterval(interval);
//$('.current-range.on').css({
// 'animation-duration': duration+ time +'s',
//})
duration = duration+ time;
time = 0;
});
* 참고