全屏滚动，微场景，H5全屏切换滚动页面制作的方法介绍

很多人找了很久，都没找到一款好用的H5全屏滚动插件，而H5全屏滚动又是一个常用的技术，常用于移动端的营销推广，虽然现在有很多类似易企秀之类的合成软件，除了数据没法对接到自己平台之外，收集用户数据也有被平台运营方获取的风险。所有我们今天自己查找了一款全屏滚动插件，就是swiper，很多人乍一看，swiper这么的API一下就蒙圈了，这里我做了一下简要的提炼，方便你快速上手，H5移动端全屏滚动动画的制作。

说白了，关于此类动画页面，你只要掌握swiper相关的回调函数和animate.css,当然了，你要是css3基础过硬，就更棒了！
下面我们首先介绍几个关键性的回调函数
onInit(swiper) 回调函数，初始化后执行。可选Swiper实例作为参数。
使用方法实例：

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){//Swiper初始化了//alert(swiper.activeIndex);提示Swiper的当前索引}
})
</script>

onSlideChangeEnd(swiper) 回调函数，回调函数，slider切换结束时执行。
使用方法实例：

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeEnd: function(swiper){alert('事件触发了;');}
})
</script>

onTransitionEnd(swiper) 回调函数，过渡结束时触发，接收Swiper实例作为参数。
使用方法实例：

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onTransitionEnd: function(swiper){...}
})
</script>

onProgress(swiper, progress) 回调函数，当Swiper的progress被改变时执行。接受Swiper实例和progress作为参数（可选）。
使用方法实例：

<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等常识就不说了，
初始化时隐藏元素并在需要的时刻开始动画。

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

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

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

例如：

<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>

下面我粘上一个demo，希望大家能看懂哈

<!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="data: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使用方法

全屏滚动，微场景，H5全屏切换滚动页面制作的方法介绍相关推荐

ih5长图如何滑动_iH5中级教程微场景H5必备,滑动时间轴+轨迹.doc
iH5中级教程微场景H5必备,滑动时间轴轨迹 iH5中级教程:微场景H5必备,滑动时间轴+轨迹你是否还在羡慕别人做的H5各种华丽各种切换各种来?使用一个免费的在线H5编辑工具不需要写代码也可以工具 ...
h5滚动时侧滑出现_iH5中级教程：微场景H5必备，滑动时间轴+轨迹
重点控件:滑动时间轴.轨迹知识点: 1. 点击工具栏上的滑动时间轴工具,在舞台上画出一个框作为滑动区域,添加滑动时间轴.选中滑动时间轴,点击图片工具,添加素材.选中素材,点击轨迹工具,添加轨迹,点击 ...
ih5长图如何滑动_iH5中级教程：微场景H5必备，横向滑动切换
页面5下添加时间轴,时间轴控制富文本从下往上.从无到有显示.第一个关键帧透明度为0,第二个关键帧透明度为100. 重点控件:滑动时间轴.轨迹.透明按钮.富文本知识点: 1. 滑动放大比例:使用此参数 ...
html滚动字幕循环,H5 div文字循环滚动
实际上也叫跑马灯.说起跑马灯这个词,还是去年或前年写iOS时候用到的呢,不知道是哪位前辈兴得这个词儿.在h5里俗点儿说就是,使用一个div做容器,让里面的文字水平轮番播放. 之前在oc内都是使用第三方 ...
冰屏是什么意思？冰屏和透明屏是一样吗
很多人都好奇冰屏是什么意思?冰屏主要应用在舞台舞美领域,通透性高,结构轻薄,观众站在理想距离观看时,画面就像悬浮于玻璃之上.冰屏和透明屏是一样吗?以下为您解答: 冰屏是什么意思: 冰屏是什么?顾名思义 ...
记一次微信H5全屏播放视频的总结
一.H5场景介绍需求:在微信里打开一个H5页面,然后点击按钮全屏播放视频,等视频播放完成后,在视频上显示一个跳转按钮,点击按钮跳转到其他的页面. 二.遇到的问题 1.IOS设备微信上,视频不能预加载 ...
荣耀Magic2 发布：滑盖全面屏、前后6摄、屏下指纹、麒麟980
乾明发自凹非寺量子位报道 | 公众号 QbitAI 昨天,荣耀在北京发布了新一代的旗舰机荣耀Magic 2. 和小米MIX3发布会一样,场地也是露天的,不过在晚上. 发布新机的时候,现场看发 ...
html实现全屏效果原理,HTML5 实现全屏效果
HTML5 实现全屏效果点击进入全屏和点击退出全屏方法: //进入全屏 function requestFullScreen() { var de = document.documentElemen ...
mac上投屏android_全平台Win/Mac全设备Android/iOS 免费无线投屏神器
東笙资源部落 [特别声明]所有软件皆来源于网上收集整理,所分享资源只做日常学习和交流使用,版权归原作者或原网站所有.不得用作其它用途,如有侵犯你的权益,请联系我们,将于24小时内进行删除,谢谢你的配合 ...

全屏滚动，微场景，H5全屏切换滚动页面制作的方法介绍

全屏滚动，微场景，H5全屏切换滚动页面制作的方法介绍相关推荐

最新文章

热门文章