H5场景动画 swiper Animate使用方法

1、先链接css和js文件

<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/><script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>

2、初始化

/* 初始化swiper.js */
var mySwiper = new Swiper('.swiper-container',{pagination : '.swiper-pagination', //分页器direction:'vertical', //垂直方向换页slideToClickedSlide: true, //slide1向slide2 swipe的过程中轻点slide1会回到slide1/* 初始化animate */onInit: function(swiper){  //Swiper2.x的初始化是onFirstInitswiperAnimateCache(swiper);  //隐藏动画元素 setTimeout(function(){ //2s后开始运行动画（移动端总是没加载完图片就开始动画了。。。。。）swiperAnimate(swiper); //初始化完成开始动画},2000)}, onSlideChangeEnd: function(swiper){ swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
})

4、使用animate的动画，注意class中要加“ani”

<img class="ani pic" src="pic.jpg"  swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s" />

　　自定义的动画效果：

　　html中添加class=“ani” 和swiper-animate-effect=“动画名”，可以与animate自带的动画一样，在每次切换时运行动画。

<img class="ani pic" src="pic.jpg"  swiper-animate-effect="shutter2" />

　　css中定义效果

@-webkit-keyframes shutter2{from{top: 100%;}to{top: 0;}
}
.shutter2{-webkit-animation: shutter2 0.5s forwards;animation: shutter2 0.5s forwards;
}

API地址： http://www.swiper.com.cn/api/start/2014/1218/140.html

H5场景动画 swiper Animate使用方法相关推荐

[h5年度报告] 1.2使用 swiper和swiper anime实现简单h5滑动动画页面
下载准备: swiper3.0.6:swiper.min.js和swiper.min.css 下载地址 swiper animate:animate.min.js和animate.min.cs ...
用css的animation动画属性来实现一个H5场景动态电子邀请函
接触css的animation 也有一段时间,经常在朋友圈会看到一些很漂亮的电子邀请函,刚开始以为是视频,后来发现原来是用css的animation来实现的.经过分析,其实是利用css的animati ...
h5画布动画_使用HTML5画布制作动画的漫画面板
h5画布动画 Continuing the comic theme I've been building over the past few weeks and inspired by the new ...
移动web：翻页场景动画
在移动web,特别是在微信中,经常看到一种翻页动画效果,也称为场景动画. 一页一页的翻过,像在看书,每页的内容以各种"炫酷"的效果出现在你的眼里,配上一首动听的音乐,你有没有喜欢上 ...
移动web：翻页场景动画（结婚浪漫请柬）
在移动web,特别是在微信中,经常看到一种翻页动画效果,也称为场景动画. 一页一页的翻过,像在看书,每页的内容以各种"炫酷"的效果出现在你的眼里,配上一首动听的音乐,你有没有喜 ...
vue-cli3、swiper、swiper.animate配合使用
vue-cli3.swiper.swiper.animate配合使用 1.swiper安装使用 1.1下载swiper 1.2引入.使用swiper 1.2.1全局引入 1.2.2组件中引入 2.使用 ...
手机端触摸滑动（H5+CSS3+JS+Swiper）
当你遇到这样一个项目,要求如下: 1. 手机端实现触摸滑动 2. 实现点击滑动 3. 在来回切换每一屏的时候动画能够重新执行 4. 在汉堡菜单里点击某一项,实现滑动到相应的屏.(菜单页左右切换) 要 ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
h5画布动画_如何使用CCapture保存画布动画
h5画布动画 by Ibby EL-Serafy 由Ibby EL-Serafy 如何使用CCapture保存画布动画 (How to save canvas animations with CCap ...

H5场景动画 swiper Animate使用方法

H5场景动画 swiper Animate使用方法相关推荐

最新文章

热门文章