swiper如何实现动画效果-小练习初级入门

来源：互联网发布：海南大学网络登录入口编辑：程序博客网时间：2024/06/11 02:20

下面来写一个使用swiper的Animate 实现动画效果的小练习

1.同样在Hbuilder新建一个项目

2.在css文件夹下放入下载好的swiper-3.4.2.min.css 和 animate.min.css

3.在js文件夹下放入下载好的swiper-3.4.2.min.js 和 swiper.animate1.0.2.min.js

4新建html文件，引入 css文件和 js文件详细的在稍后的代码中会看到

5.html部分还是要写上 swiper小练习只能怪的一些结构，如下：

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide slide1"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">这是心聆教育，一家心理咨询培训机构</p></div><div class="swiper-slide slide2">Slide2</div><div class="swiper-slide slide3">Slide3</div></div></div>

6.接下来如斜段scriptz脚本，目的是跟swiper小练习中的一样，初始化Swiper对象，如下：

<script>var mySwiper = new Swiper ('.swiper-container', {  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit    swiperAnimateCache(swiper); //隐藏动画元素     swiperAnimate(swiper); //初始化完成开始动画  },   onSlideChangeEnd: function(swiper){     swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画  }   })     </script>

7.然后具体用法就是在slide中的任意一个想要添加动画的元素上加上ani的类，

在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

上面这段话是从swiper官网摘抄过来的，供大家参考，然后下面贴上这个小练习的全部html代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../css/swiper-3.4.2.min.css" /><link rel="stylesheet" href="../css/animate.min.css" /><style>.swiper-container{height: 600px;}.slide1{background-color: red;}.slide2{background-color: blue;}.slide3{background-color: green;}p{color: black;font-size: 50px;}</style></head><body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide slide1"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">这是心聆教育，一家心理咨询培训机构</p></div><div class="swiper-slide slide2">Slide2</div><div class="swiper-slide slide3">Slide3</div></div></div><script src="../js/swiper-3.4.2.min.js"></script><script src="../js/swiper.animate1.0.2.min.js"></script></body><script>var mySwiper = new Swiper ('.swiper-container', {  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit    swiperAnimateCache(swiper); //隐藏动画元素     swiperAnimate(swiper); //初始化完成开始动画  },   onSlideChangeEnd: function(swiper){     swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画  }   })     </script></html>

运行之后的效果就是这段文字“这是心聆教育，一家心理咨询培训机构” 会有一个动画效果。

本篇的目的也是为了以后能复习swiper 记录的一个入门小练习，方便自己，方便大家。

不积跬步，无以至千里

不积小流，无以成江海

阅读全文

0 0