使用Swiper Animate制作启动页

Posted 2020-06-09

swiper是一个比较好的轮播滑动插件，他的优点就不多说了，用过的都说好！亲可以去官网亲自测试。

前段时间做了一个滑动引导页，需要有丰富的动画效果，虽然都是手写的效果，但是总觉得太麻烦，现在可以用swiper Animate来实现丰富的动画效果。官网的讲解也是非常简单，这里我自己做了个简单的小例子。

效果：

开始制作：

准备图片素材：

页面引用相关的css和js文件：

<link rel="stylesheet" href="js/swiper/swiper-3.3.0.min.css">
<link rel="stylesheet" href="js/swiper/animate.min.css">

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/swiper/swiper-3.3.0.jquery.min.js"></script>
<script src="js/swiper/swiper.animate1.0.2.min.js"></script>

html主要代码结构：

<div class="swiper-container">
	    <div class="swiper-wrapper">
	        <div class="swiper-slide">
	        	<img src="img/plane.png"  class="plane ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.1s">
	        	<img src="img/1.jpg" >
	        </div>
	        <div class="swiper-slide">
	        	<img src="img/sun.png"  class="sun ani" swiper-animate-effect="rotateIn" swiper-animate-duration="3s" swiper-animate-delay="0.1s">
	        	<img src="img/2.jpg" >
	        </div>
	    </div>
	    <!-- 分页器 -->
    	<div class="swiper-pagination"></div>
	</div>

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

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

简单的样式调整：

*{padding: 0;margin: 0;}
	.swiper-slide{width: 100%;position: relative;}
	.swiper-slide img{display: block;width: 100%;}
	.swiper-slide .plane{position: absolute;top: 20px;right: 20px;width: 33%;}
	.swiper-slide .sun{position: absolute;top: 10px;right: 10px;width: 30%;}

　　

配置js代码：

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

这里可以对swiper进行设置，比如切换方向，效果等等。你还可以去官网查看尝试更多丰富的动画效果。