使用Swiper Animate制作启动页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Swiper Animate制作启动页相关的知识,希望对你有一定的参考价值。

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进行设置,比如切换方向,效果等等。你还可以去官网查看尝试更多丰富的动画效果。

 

以上是关于使用Swiper Animate制作启动页的主要内容,如果未能解决你的问题,请参考以下文章

swiper动画

Swiper Animate??????

AngularJS:使用 ng-animate & ng-view,如何制作 3D 立方体旋转效果?

jquery swiper3自定义切换效果的方法

如何使用 slick/swiper/或任何其他插件或原始代码制作以下滑块?

一个简单的滑动动画广告项目