Swiper插件之Animate动画

之前一直都没有注意到Swiper插件有可供选择的动画效果插件Swiper Animate,在这个插件里面有很多可供选择的动画比如缩放、旋转、摇晃等各种动画效果。

1.在使用Swiper Animate之前,必须要保证已经加载swiper.animate.min.jsanimate.min.css

<!DOCTYPE html>

<html>

<head>

    ...

    <link rel="stylesheet" href="path/to/swiper.min.css">

    <link rel="stylesheet" href="path/to/animate.min.css">

</head>

<body>

    ...

    <script src="path/to/swiper.min.js"></script>

    <script src="path/to/swiper.animate.min.js"></script>

</body>

</html>

2. 初始化swiper

<script>

//Swiper3.x、Swiper2.x

  var mySwiper = new Swiper ('.swiper-container', {

    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

      swiperAnimateCache(swiper); //隐藏动画元素

      swiperAnimate(swiper); //初始化完成开始动画

    },

    onSlideChangeEnd: function(swiper){

      swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

    }

  })

 

//Swiper4.x

  var mySwiper = new Swiper ('.swiper-container', {

    on:{

      init: function(){

        swiperAnimateCache(this); //隐藏动画元素

        swiperAnimate(this); //初始化完成开始动画

      },

      slideChange: function(){

        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画

      }

    }

  })

 

  </script>

</body>

3. 在需要运动的元素上面增加类名  ani   ,和其他的类似插件相同,Swiper Animate需要指定几个参数:
swiper-animate-effect:切换效果,例如 fadeInUp 
swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s

<div class="swiper-slide">

    <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>

</div>

4. 自定义动画,虽然Swiper Animate提供的动画效果已经很丰富了,但是很多时候我们会有一些其它的需求,比如我这次就需要让图片缓慢变大,参照swiper Animate的动画,实现了自己的动画

首先是加入自己的样式:

//added by Aimee

@-webkit-keyframes scaleSlow {

    0% {

        opacity: 1;

        -webkit-transform: scale(1,1);

        transform: scale(1,1);

        transition: all 5s;

    }

 

    100% {

        opacity: 1;

        -webkit-transform: scale(1.05,1.05);

        transform: scale(1.05,1.05);

        transition: all 5s;

        

    }

}

 

@keyframes scaleSlow {

    0% {

        opacity: 1;

        -webkit-transform: scale(1,1);

        transform: scale(1,1);

        transition: all 5s;

    }

 

    100% {

        opacity: 1;

        -webkit-transform: scale(1.05,1.05);

        transform: scale(1.05,1.05);

        transition: all 5s;

        

    }

}

 

.scaleSlow {

    -webkit-animation-name: scaleSlow;

    animation-name: scaleSlow;

}

然后在结构中使用自定义的动画:

 

 <div class="swiper-slide">

      <img class="ani" swiper-animate-effect="scaleSlow" swiper-animate-duration="5s" src="images/banner01.jpg" alt="banner" title="banner">

</div>

JS与正常引用动画时一样,这样就实现了自定义的动画了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值