如何使用光滑滑块为滑块图像添加慢速缩放效果？

Question

我正在尝试复制滑块在此网站上使用的慢速缩放效果：https://www.palazzokitchens.co.nz/

我使用光滑的滑块，我该如何实现这种效果？

我尝试使用scale(1.5)进行长时间的转换，但这也会使其子级也能扩展。

我已经设置了滑块演示，非常感谢任何帮助：https://codepen.io/ifusion/pen/EvRPOB

Answer 1

使用此代码，请参阅完整页面中的代码。

$(document).ready(function() {
    $('.hero-slider').slick({
        arrows: false,
        autoplay: true,
        autoplaySpeed: 3000
    });
});

.no-overflow {
  overflow: hidden;
}
.columns{
  position:relative;
}
.hero-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 550px;
  position: relative;
  width: 100%;
}
.hero-text {
  font-size: 50px;
  color: white;;
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.slick-slider { overflow: hidden; }
.slick-slider div.slick-active .hero-image {
  -webkit-animation: myMove 8s 1 ease-in-out;
  -moz-animation: myMove 8s 1 ease-in-out;
  -o-animation: myMove 8s 1 ease-in-out;
  -ms-animation: myMove 8s 1 ease-in-out;
  animation: myMove 8s 1 ease-in-out;
}
@keyframes myMove {
  from { transform: scale(1.0,1.0); transform-origin: 50% 50%; }
  to { transform: scale(1.1,1.1); transform-origin: 50% 0%; }
}
@-webkit-keyframes myMove {
  from { -webkit-transform: scale(1.0,1.0); -webkit-transform-origin: 50% 50%; }
  to { -webkit-transform: scale(1.1,1.1); -webkit-transform-origin: 50% 0%;  }
}
@-o-keyframes myMove {
  from { -o-transform: scale(1.0,1.0); -o-transform-origin: 50% 50%; }
  to { -o-transform: scale(1.1,1.1); -o-transform-origin: 50% 0%;  }
}
@-moz-keyframes myMove {
  from { -moz-transform: scale(1.0,1.0); -moz-transform-origin: 50% 50%; }
  to { -moz-transform: scale(1.1,1.1); -moz-transform-origin: 50% 0%; }
}
@-ms-keyframes myMove {
  from { -ms-transform: scale(1.0,1.0); -ms-transform-origin: 50% 50%; }
  to { -ms-transform: scale(1.1,1.1); -ms-transform-origin: 50% 0%; }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="hero-slider">
  <div class="columns">
    <div class="hero-image" style="background-image: url('http://lorempixel.com/output/city-q-c-1900-500-6.jpg')">      
    </div>
    <div class="hero-text">Dummy text in here 1</div>
  </div>
  <div class="columns">     
    <div class="hero-image" style="background-image: url('http://lorempixel.com/output/technics-q-c-1900-500-8.jpg')">      
    </div>
    <div class="hero-text">Dummy text in here 2</div>
  </div>
  <div class="columns">
    <div class="hero-image" style="background-image: url('http://lorempixel.com/output/nature-q-c-1900-500-5.jpg')">      
    </div>
    <div class="hero-text">Dummy text in here 3</div>
  </div>  
</div>

Answer 2

您需要将图片与幻灯片分开并为only image设置动画：

Updated codepen