使用猫头鹰旋转木马2缩放自定义动画

Question

我正在使用猫头鹰旋转木马2。我在图像中添加了一些比例动画。

我收到两个问题

1. 我不想把滑块从右向左滑动
2. 如何重新启动动画？我的意思是，如果我刷新页面，那么动画对两个图像都有效，但我的幻灯片是循环的。我必须重新启动动画

$('.hero-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
dots: true,
autoplay: true,
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
})

.heroBannerContent {
position: absolute;
top: 0;
display: flex;
align-items: center;
height: 100%;
left: 0;
right: 0;
text-align: center;
margin: auto;
width: 400px;
}
.heroBannerContent p {
color: #fff;
font-size: 20px;
}
.heroBanner {
height: 500px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
.heroBannerImg1 {
background-image: url('https://cdn.pixabay.com/photo/2014/11/13/06/12/boy-529067_960_720.jpg');
}
.heroBannerImg2 {
background-image: url('https://cdn.pixabay.com/photo/2016/02/28/12/55/boy-1226964_960_720.jpg');
}
.heroBanner {
animation: 50s ease 0s normal none infinite running zoomEffect;
-webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
-o-animation: 50s ease 0s normal none infinite running zoomEffect;
-moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
}
@keyframes zoomEffect {
from {
transform: scale(1, 1)
}
to {
transform: scale(2, 2)
}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous"
/>
<div class="slide-progress-main">
<div class="slide-progress"></div>
</div>
<div class="owl-carousel owl-theme hero-carousel">
<div class="item">
<div class="heroBanner heroBannerImg1 heroMobileBannerImg1"></div>
<div class="heroBannerContent">
<div class="heroContent-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<div class="mt-4"><a class="button theme-button bg-black" href="about-us">About us</a></div>
</div>
</div>
</div>
<div class="item">
<div class="heroBanner heroBannerImg2 heroMobileBannerImg2"></div>
<div class="heroBannerContent">
<div class="heroContent-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<div class="mt-4"><a class="button theme-button bg-black" href="shop">Our Products</a></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>

Answer 1

若要在使用transform: scale()时更改动画，请为.owl-carousel.owl-drag .owl-item选择器添加overflow: hidden。要做到这一点，请将其添加到您的自定义css中。比如：

.owl-carousel .owl-item {
overflow: hidden;
}

1-我不想从右向左滑动滑块:

为了防止手动更改幻灯片，请将以下参数添加到幻灯片初始化中：

touchDrag: false,
mouseDrag: false,

2-如何重新启动动画？我的意思是，如果我刷新页面，那么动画对两个图像都有效，但我的幻灯片是循环的。我必须重新启动动画:

您的滑块在@keyframes中具有scale()的效果。但随着下一张幻灯片的出现，图像会越来越大。而且看起来不太好。

为了避免这个问题，我修改了jquery代码，该代码在转换到下一张幻灯片时重置动画。比如：

$(".heroBanner").css("animation", "none");

但同时，在转换动画完成后，我们通过事件requestAnimationFrame返回默认值animation规则。比如：

window.requestAnimationFrame(function () {
$(".heroBanner").css("animation", "");
});

下面是一个片段：

$(".hero-carousel").owlCarousel({
loop: true,
margin: 10,
nav: false,
dots: true,
touchDrag: false,
mouseDrag: false,
autoplay: true,
responsiveClass: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
responsive: {
0: {
items: 1,
},
600: {
items: 1,
},
1000: {
items: 1,
},
},
});
$(".hero-carousel").on("changed.owl.carousel", function () {
$(".heroBanner").css("animation", "none");
window.requestAnimationFrame(function () {
$(".heroBanner").css("animation", "");
});
});

.owl-carousel .owl-item {
overflow: hidden;
}
.heroBannerContent {
position: absolute;
top: 0;
display: flex;
align-items: center;
height: 100%;
left: 0;
right: 0;
text-align: center;
margin: auto;
width: 400px;
}
.heroBannerContent p {
color: #fff;
font-size: 20px;
}
.heroBanner {
height: 500px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
.heroBannerImg1 {
background-image: url("https://cdn.pixabay.com/photo/2014/11/13/06/12/boy-529067_960_720.jpg");
}
.heroBannerImg2 {
background-image: url("https://cdn.pixabay.com/photo/2016/02/28/12/55/boy-1226964_960_720.jpg");
}
.heroBanner {
animation: 50s ease 0s normal none infinite running zoomEffect;
-webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
-o-animation: 50s ease 0s normal none infinite running zoomEffect;
-moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
}
@keyframes zoomEffect {
from {
transform: scale(1, 1);
}
to {
transform: scale(2, 2);
}
}

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="
crossorigin="anonymous"
/>
<div class="slide-progress-main">
<div class="slide-progress"></div>
</div>
<div class="owl-carousel owl-theme hero-carousel">
<div class="item">
<div class="heroBanner heroBannerImg1 heroMobileBannerImg1"></div>
<div class="heroBannerContent">
<div class="heroContent-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<div class="mt-4"><a class="button theme-button bg-black" href="about-us">About us</a></div>
</div>
</div>
</div>
<div class="item">
<div class="heroBanner heroBannerImg2 heroMobileBannerImg2"></div>
<div class="heroBannerContent">
<div class="heroContent-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<div class="mt-4"><a class="button theme-button bg-black" href="shop">Our Products</a></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>