Animation使用

Word count: 345   |   Reading time≈ 1 min

Swiper Animate使用方法

Swiper Animate，是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x和Swiper3.x 。
此插件不适用于loop模式

  1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。code:
    <!DOCTYPE html>
    <html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
<link rel="stylesheet" href="path/to/animate.min.css">


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

  2. 初始化时隐藏元素并在需要的时刻开始动画。
    code:

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

    内容



    如果以上这些效果不能满足你的需求，你可以仿照animate.css的格式制作一些其他效果，加到你自己的css文件。其他参数：transition-timing-function
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2015-2021 魏姣
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信