2624人阅读
常用特效（19）
很多人找了很久，都没找到一款好用的H5全屏滚动插件，而H5全屏滚动又是一个常用的技术，常用于移动端的营销推广，虽然现在有很多类似易企秀之类的合成软件，除了数据没法对接到自己平台之外，收集用户数据也有被平台运营方获取的风险。所有我们今天自己查找了一款全屏滚动插件，就是swiper，很多人乍一看，swiper这么的API一下就蒙圈了，这里我做了一下简要的提炼，方便你快速上手，H5移动端全屏滚动动画的制作。
说白了，关于此类动画页面，你只要掌握swiper相关的回调函数和,当然了，你要是css3基础过硬，就更棒了！
下面我们首先介绍几个关键性的回调函数
onInit(swiper)
回调函数，初始化后执行。 可选Swiper实例作为参数。
使用方法实例：
language="javascript"&
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
onSlideChangeEnd(swiper) 回调函数，回调函数，slider切换结束时执行。
使用方法实例：
language="javascript"&
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeEnd: function(swiper){
alert('事件触发了;');
onTransitionEnd(swiper) 回调函数，过渡结束时触发，接收Swiper实例作为参数。
使用方法实例：
&script language="javascript"&
var mySwiper = new Swiper('.swiper-container',{
onTransitionEnd: function(swiper){
onProgress(swiper, progress) 回调函数，当Swiper的progress被改变时执行。接受Swiper实例和progress作为参数（可选）。
使用方法实例：
language="javascript"&
var mySwiper = new Swiper('.swiper-container',{
watchSlidesProgress : true,
onProgress: function(swiper, progress){
for (var i = 0; i & swiper.slides. i++){
var slide = swiper.slides[i];
es = slide.
es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'rotate('+360*slide.progress+'deg)';
onSetTransition(swiper, transition) 回调函数，每次当Swiper开始过渡动画时持续执行。transtion获取到的是Swiper的speed值。
下面在说说Swiper Animate使用方法，需要引入swiper.animate.min.js和animate.min.css等常识就不说了，
初始化时隐藏元素并在需要的时刻开始动画。
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){
swiperAnimateCache(swiper);
swiperAnimate(swiper);
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper);
在需要运动的元素上面增加类名
，和其他的类似插件相同，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&
下面我粘上一个demo，希望大家能看懂哈
&!DOCTYPE html&
lang="en"&
http-equiv="Content-Type" content="text/ charset=utf-8" /&
&打虎新形态&
name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/&
rel="stylesheet" href="css/swiper.min.css"&
rel="stylesheet" href="css/animate.min.css"&
src="js/swiper.min.js"&&
src="js/swiper.animate.min.js"&&
*{margin:0;padding:0;}
,{height:100%;}
{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%;}
{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);}
class="swiper-container"&
class="swiper-wrapper"&
class="swiper-slide swiper-slide1"&
src="upload/bonus_01.png" class="ani resize" style="width:320height:43left:0top:30z-index:3;" swiper-animate-effect="swing" swiper-animate-duration="1.5s" swiper-animate-delay="0s"
class="swiper-slide swiper-slide2"&
src="upload/004.png" class="ani resize" style="width:320height:64left:0top:10z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s"
src="images/arrow.png" style="width:20height:15 top:460 left:150" id="array" class="resize"&
class="swiper-pagination"&&
scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
for (var j = 0; j & resizes. 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',
mousewheelControl : true,
onInit: function(swiper){
swiperAnimateCache(swiper);
swiperAnimate(swiper);
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper);
onTransitionEnd: function(swiper){
swiperAnimate(swiper);
onProgress: function(swiper){
for (var i = 0; i & swiper.slides. i++) {
var slide = swiper.slides[i];
var progress = slide.
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 =
es = slide.
es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';
onSetTransition: function(swiper, speed) {
for (var i = 0; i & swiper.slides. i++){
es.webkitTransitionDuration =
es.MsTransitionDuration =
es.msTransitionDuration =
es.MozTransitionDuration =
es.OTransitionDuration =
es.transitionDuration = speed + 'ms';
相关详细资料参考
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：57615次
积分：1732
积分：1732
排名：千里之外
原创：114篇
转载：18篇
(2)(5)(8)(3)(2)(6)(13)(19)(7)(4)(31)(17)(5)(5)(7)更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
使用您的微博帐号登录，即刻尊享微博用户专属服务。
使用您的QQ帐号登录，即刻尊享QQ用户专属服务。
使用您的人人帐号登录，即刻尊享人人用户专属服务。
按住视频可进行拖动
把视频贴到Blog或BBS
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
收藏成功，可进入查看所有收藏列表
方式1：用手机看
用爱奇艺APP或微信扫一扫，在手机上继续观看：
八秒教程 八秒手机编辑器使用方法
方式2：一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
爸爸去哪儿2游戏 立即参与
八秒教程 八秒手机编辑器使用方法
播放量数据：
你可能还想订阅他们：
{{#needAdBadge}} 广告{{/needAdBadge}}
&正在加载...
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制您的位置：
标签： 商业广告
【八秒手机编辑器】免费注册邀请码，八秒神器，微商必备!微信营销神器，在微信文章中插入广告的手机工具，转发文章时，顺便把自己的广告插入你喜欢的文章内。插入广告的形式(八秒功能)：插入文字(带连接)插入图片(带链接)插入 背景音乐插入视频插入个人微店、网店插入滚动字幕、滚动图片插入 QQ 在线对话插入同步时间显示插入初页、易企秀插入场景秀、时光相册等，让你的微信朋友圈多姿多彩，与众不同。让热门的文章载着你的广告飞吧!放眼未来，微信营销，都在用八秒!!【怎么注册】八秒注册实行邀请制，微信扫描上方二维码，获取注册链接或者用手机打开下面链接注册：/ok/bpp8s/registto.htm?u=429418使用帮助注册完毕后，关注【八秒】公众号即可使用，如有不懂，请加微信号：d 教你使用八秒。注意：点击会员中心，往下拉，请确定推荐人必须是：江月。备注：苹果手机不用下载软件，直接关注八秒公众号操作。使用须知免费用户，不能导入外面的文章，只能点击首页“第二步：选择文章”
当前页：1/2
(window.slotbydup=window.slotbydup || []).push({
id: '2863855',
container: s,
size: '300,250',
display: 'inlay-fix'播放列表加载中...
正在载入...
分享视频：
嵌入代码：
拍下二维码，随时随地看视频
##手机编辑器八秒功能演示
上 传 者：
内容介绍：
##手机编辑器八秒功能演示
我来说点啥
版权所有 CopyRight
| 京网文[0号 |
| 京公网安备：
互联网药品信息服务资格证：（京）-非经营性- | 广播电视节目制作经营许可证：（京）字第403号
<img src="" width="34" height="34"/>
<img src=""/>
<li data-vid="">
<img src=""/><i data-vid="" class="ckl_plays">
<img width="132" height="99" src=""/>
在线人数：
<li data-vid="">
<img src=""/><i data-vid="" class="ckl_plays">
<img src="///img/blank.png" data-src=""/>
<img src="///img/blank.png" data-src="http://"/>
<li data-vid="" class="cfix">
src="///img/blank.png" data-src=""/>
<i data-vid="" class="ckl_plays">
<li data-vid="" class="cfix">
src="///img/blank.png" data-src=""/><i data-vid="" class="ckl_plays">
没有数据！
{upload_level_name}
粉丝 {fans_count}
{video_count}
{description}　　这里集合了几款很棒的制作网页滚动动画的
库和插件。它们中，有的可以帮助你在页面滚动的时候添加动感的元素动画，有的则是实现目前非常流行的全屏页面切换动画。相信借助这些插件，你也可以让网站变得高大上起来。
ScrollReveal.js
　　ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加&data-scrollreveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。
ScrollMagic
　　ScrollMagic 是一款&&插件，它让你可以像使用进度条一样使用滚动条。如果你想在特定的滚动位置开始一个动画，并且让动画同步滚动条的动作，或者把元素粘在一个特定的滚动位置，那么这款插件正是你需要的。
pagePiling.js
　　全屏滚动效果是最近非常流行的网页设计形式，带给用户良好的视觉和交互体验。pagePiling.js 这款&&插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器，包括IE8+，支持移动设备。
　　在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js&就是一款帮助你实现这种&&动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
　　ScrollMe 是一款&&插件，用于给网页添加简单的滚动效果。当你向下滚动页面的时候，ScrollMe 可以缩放，旋转和平移页面上的元素。它易于设置，不需要任何自定义的&&代码支持。
Parallax.js
　　Parallax.js&是一个简单的，轻量级的的视差引擎，能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候，使用光标的位置来代替。有很多的行为，你就可以设置为任何给定的视差实例。这些行为既可以通过在标记中指定的数据属性或通过构造函数 和
API 调用。
您可能感兴趣的相关文章
本文链接：
编译来源：
阅读(...) 评论()