使用Owl Carousel 2缩放自定义动画 [英] Scale Custom animation with Owl Carousel 2

查看：72
本文介绍了使用Owl Carousel 2缩放自定义动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用猫头鹰传送带2 .我已经在图像中添加了比例动画.

I am using Owl Carousel 2. I have added some scale animation to the images.

我遇到两个问题

  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>

推荐答案

使用 transform:scale()进行正确的动画更改时，为添加 overflow:hidden > .owl-carousel.owl-drag .owl-item 选择器.为此，请将其添加到您的自定义CSS.像这样:

For correct animation change when working with transform: scale() add overflow: hidden for .owl-carousel.owl-drag .owl-item selector. To do this, add this to your custom css. Like that:

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

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

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

To prevent manual slide changes, add these parameters to the slider initialization:

touchDrag: false,
mouseDrag: false,

2-如何再次重新启动动画?我的意思是，如果刷新页面，则动画可以同时处理两个图像，但是我的幻灯片正在循环播放.我必须再次重新启动动画:

您的滑块具有 scale()通过 @keyframes 起作用的效果.但是随着每张下一张幻灯片，图像变得越来越大.而且看起来也不好.

Your slider has an effect of scale() working through @keyframes. But with each next slide, the images get bigger and bigger. And it doesn't look good.

为避免此问题，我修改了您的jquery代码，当过渡到下一张幻灯片时，该代码重置.像这样:

And to avoid this problem, I modified your jquery code, which resets the animation upon the event of a transition to the next slide. Like that:

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

但是同时，过渡动画完成后，我们会通过事件 requestAnimationFrame 返回默认值 animation 规则.像这样:

But at the same time, after the transition animation completes, we return the default value animation rule by event requestAnimationFrame. Like that:

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>

这篇关于使用Owl Carousel 2缩放自定义动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆