滑らかなスライダーを使用してスライダー画像にスローズーム効果を追加するにはどうすればよいですか？私は、スライダは、このウェブサイトで使用して効果が遅いズームを複製しようとしています

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