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
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
animateControl v1.0.3 的功能特点: 1、完全兼容swiper的loop模式,完美支持swiper的嵌套。 2、完美支持animate.css,能够为页面中的任意元素添加动画。 3、完美支持为单个元素同时添加多个animate.css动画效果(无需进行HTML标签的嵌套),并且,可以随意控制这些动画效果的播放方式。 4、能够设置每一个动画效果的播放方式:同步播放、依次播放、循环播放。 5、能够设置每一个动画效果的动画类型:进入动画、表演动画、退出动画(在animate.css的源码中,opacity值从0至100的是进入动画,没有opacity属性的是表演动画。opacity值从100到0的是退出动画)。 6、实现了排版效果、动画效果、动画控制的完美分离,极大的提高了开发效率,能够在很短的时间内实现复杂的动画效果控制。 7、animateControl 不与swiper结合时,可对网页中的其它元素添加动画效果,并进行控制。 8、能够让不懂JS代码的人,经过简单的学习,就能快速的制作HTML5+CSS3动态微网页。 9、相较于上一个版本,在 v1.0.3 中对整个核心代码进行了优化,大大提升了运行速率,使动画播放更流畅。 10、相较于上一个版本,在 v1.0.3 中简化了所有参数的名称,让使用变得更加简单(用更少的代码,就能实现更复杂的效果)。 11、本次发布的动画控制器文件为min版,大大减少了文件的体积(下载解压后,文件位置在:js/swiper.animate.min.js)。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值