很多人找了很久,都没找到一款好用的H5全屏滚动插件,而H5全屏滚动又是一个常用的技术,常用于移动端的营销推广,虽然现在有很多类似易企秀之类的合成软件,除了数据没法对接到自己平台之外,收集用户数据也有被平台运营方获取的风险。所有我们今天自己查找了一款全屏滚动插件,就是swiper,很多人乍一看,swiper这么的API一下就蒙圈了,这里我做了一下简要的提炼,方便你快速上手,H5移动端全屏滚动动画的制作。
说白了,关于此类动画页面,你只要掌握swiper相关的回调函数和animate.css,当然了,你要是css3基础过硬,就更棒了!
下面我们首先介绍几个关键性的回调函数
onInit(swiper) 回调函数,初始化后执行 。 可选Swiper实例作为参数。
使用方法实例:
xml
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
//Swiper初始化了
//alert(swiper.activeIndex);提示Swiper的当前索引
}
})
</script>
onSlideChangeEnd(swiper) 回调函数,回调函数,slider切换结束时执行 。
使用方法实例:
xml
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeEnd: function(swiper){
alert('事件触发了;');
}
})
</script>
onTransitionEnd(swiper) 回调函数,过渡结束时触发 ,接收Swiper实例作为参数。
使用方法实例:
xml
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onTransitionEnd: function(swiper){
...
}
})
</script>
onProgress(swiper, progress) 回调函数,当Swiper的progress被改变时执行 。接受Swiper实例和progress作为参数(可选)。
使用方法实例:
ini
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
watchSlidesProgress : true,
onProgress: function(swiper, progress){
for (var i = 0; i < swiper.slides.length; i++){
var slide = swiper.slides[i];
es = slide.style;
es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'rotate('+360*slide.progress+'deg)';
}
}
})
</script>
onSetTransition(swiper, transition) 回调函数,每次当Swiper开始过渡动画时持续执行。transtion获取到的是Swiper的speed值。
下面在说说Swiper Animate使用方法,需要引入swiper.animate.min.js和animate.min.css等常识就不说了,
初始化时隐藏元素并在需要的时刻开始动画。
xml
<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>
</body>
在需要运动的元素上面增加类名 ani ,和其他的类似插件相同,Swiper Animate需要指定几个参数:
arduino
swiper-animate-effect:切换效果,例如 fadeInUp
swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s
例如:
ini
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
下面我粘上一个demo,希望大家能看懂哈
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打虎新形态</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
body{font-family:"Microsoft Yahei";}
.swiper-container {width: 100%;height: 100%;background:#000;}
.swiper-slide { width:100%;height:100%;background:url(upload/bg.jpg) no-repeat left top;background-size:100% 100%;}
img{display:block;}
#array{position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;}
.ani{position:absolute;}
@-webkit-keyframes start {
0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
60% {opacity: 1;-webkit-transform: translate(0,0);}
100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
60% {opacity: 1;-moz-transform: translate(0,0);}
100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
0%,30% {opacity: 0;transform: translate(0,10px);}
60% {opacity: 1;transform: translate(0,0);}
100% {opacity: 0;transform: translate(0,-8px);}
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide swiper-slide1">
<img src="upload/bonus_01.png" class="ani resize" style="width:320px;height:43px;left:0px;top:30px;z-index:3;" swiper-animate-effect="swing" swiper-animate-duration="1.5s" swiper-animate-delay="0s" >
</section>
<section class="swiper-slide swiper-slide2">
<img src="upload/004.png" class="ani resize" style="width:320px;height:64px;left:0px;top:10px;z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
</section>
</div>
<img src="images/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize">
<div class="swiper-pagination"></div>
</div>
<script>
scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
for (var j = 0; j < resizes.length; j++) {
resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';
}
var mySwiper = new Swiper ('.swiper-container',{
direction : 'vertical',//设置水平(horizontal)或垂直(vertical)
//pagination : '.swiper-pagination',//分页器容器的css选择器或HTML标签。
mousewheelControl : true,//鼠标滚动控制
onInit: function(swiper){//初始化之后执行
swiperAnimateCache(swiper);//隐藏动画元素
swiperAnimate(swiper);//初始化完成开始动画
},
onSlideChangeEnd: function(swiper){//回调函数,slider切换结束时执行。
swiperAnimate(swiper);//每个slide切换结束时也运行当前slide动画
},
onTransitionEnd: function(swiper){//回调函数,过渡结束时触发,接收Swiper实例作为参数。
swiperAnimate(swiper);
},
//watchSlidesProgress: true,//开启这个参数来计算每个slide的progress(进度),Swiper的progress无需设置即开启。
onProgress: function(swiper){//回调函数,当Swiper的progress被改变时执行。接受Swiper实例和progress作为参数(可选)。
for (var i = 0; i < swiper.slides.length; i++) {
var slide = swiper.slides[i];
var progress = slide.progress;
var translate = progress*swiper.height/4;
scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
slide.style.opacity = opacity;
es = slide.style;
es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';
}
},
onSetTransition: function(swiper, speed) {//回调函数,每次当Swiper开始过渡动画时持续执行。transtion获取到的是Swiper的speed值。
for (var i = 0; i < swiper.slides.length; i++){
es.webkitTransitionDuration =
es.MsTransitionDuration =
es.msTransitionDuration =
es.MozTransitionDuration =
es.OTransitionDuration =
es.transitionDuration = speed + 'ms';
}
}
})
</script>
</body>
</html>
相关详细资料参考
Swiper使用方法
回调函数
Swiper Animate使用方法