Сова Карусель 2 Кен Бернс эффект - PullRequest
0 голосов
/ 01 ноября 2019

В настоящее время при смене слайда происходит «прыжок», и он выглядит не очень хорошо. Мне нужна помощь с эффектом перехода между слайдами. Кто-нибудь может помочь мне улучшить эффект затухания, чтобы он больше походил на эффект перекрестного затухания? .

Вот jsfiddle https://jsfiddle.net/rk48twL6/

HTML

<div class="ken-carousel owl-carousel owl-theme">
<div class="item">
    <img src="https://picsum.photos/id/312/940/460" alt="">
 </div>
 <div class="item">
    <img src="https://picsum.photos/id/290/940/460" alt="">
 </div>
 <div class="item">
     <img src="https://picsum.photos/id/411/940/460" alt="">
 </div>
</div>

CSS

.ken-carousel .owl-item.active .item img {
   -webkit-animation: kenburns 16s forwards;
   animation: kenburns 16s forwards;
}


@keyframes kenburns {
    0% {
        transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale3d(1.3, 1.3, 1.3) translate3d(-100px, -30px, 0px);
        animation-timing-function: ease-in;
    }
}

JS

var ken_owl = $('.ken-carousel').owlCarousel({
    loop: true,
    margin: 0,
    mouseDrag: true,
    autoplay:true,
    autoplayTimeout: 12000,
    nav: false,
    items: 1,
    animateIn: 'fadeIn', // add this
    animateOut: 'fadeOut',  // and this
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...