微信网页动画---swiper.animate.css
项目需要，自己写了个demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" href="./lib/swiper/swiper.css">
<link rel="stylesheet" href="./lib/swiper/swiper.animate/animate.css">
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height: 100%;
font-family: arial,helvetica;
}
.swiper-container {
width: 100%;
height: 100%;
text-align: center;
} #slide1{
background: #BFDA00;
} #slide2{
background: #2C3E50;
} #slide3{
background: #AC4F2C;
} .mySpan{
width:60px;
height:60px;
}
.pic1{
position:absolute;
top: 200px;
left: 60px;
background: url(./img/gaugin.jpg);
}
.pic2{
position:absolute;
top: 80px;
left: 150px;
background: url(./img/giotto.jpg);
}
.pic3{
position:absolute;
top: 180px;
right: 40px;
background: url(./img/leonardo.jpg);
}
.pic4{
position:absolute;
top:230px;
right:80px;
background: url(./img/warhol.jpg);
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="slide1">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s">内容</p>
<span class="ani mySpan pic1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"></span>
<span class="ani mySpan pic2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.2s" swiper-animate-delay="0.5s"></span>
<span class="ani mySpan pic3" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="0.4s"></span>
<span class="ani mySpan pic4" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.6s" swiper-animate-delay="0.2s"></span>
</div>
<div class="swiper-slide" id="slide2">
</div>
<div class="swiper-slide" id="slide3">
</div>
</div>
</div> <script type="text/javascript" src="./lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./lib/swiper/swiper.jquery.min.js"></script>
<script type="text/javascript" src="./lib/swiper/swiper.animate/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: false,
grabCursor: true,
roundLengths : true,
freeMode: false,
effect:"slide",
resistanceRatio : 0,
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
</body>
</html>
API
http://www.swiper.com.cn/usage/animate/index.html
微信网页动画---swiper.animate.css的更多相关文章
- css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
- CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
- 动画利器animate.css
使用过CSS3编写动画的同学一定感叹CSS3的强大,但是也会感到书写的麻烦.每次都要计算动画的各个参数,十分麻烦.有没有一个库能封装一些常用的CSS3动画效果.答案是肯定的,animate.css就是 ...
- vue 动画框架Animate.css @keyframes
<script src="vue.js"></script> <link rel="stylesheet" href=" ...
- css 动画类库Animate.css
地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- Animate.css介绍
Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...
- python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- swiper.animate~之~可以执行两种动画的升级版的Swiper Animate
1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...
随机推荐
- 代码上传不到github远程仓库的经历和总结
第二次的作业是分布式版本控制系统Git的安装与使用.一切都好端端地进行,知道最后的上传到给远程仓库时一直都上传失败.舍友也过来调试和助教的指导,依然不成功.我也上网进行了大量的翻查资料也未能成功.这是 ...
- asp.net简述WP开发模式
详情请参考菜鸟教程:http://www.runoob.com/aspnet/aspnet-tutorial.html 1.ASP.NET 是一个使用 HTML.CSS.JavaScript 和服务器 ...
- Alpha阶段敏捷冲刺⑥
1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 实现对账单条目的编辑 初步设计设置页面 今天要完成的工作. 账单明细 ...
- js+Canvas 利用js 实现浏览器保存图片到本地
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- SQL Server 中几个有用的特殊函数
在SQL Server 的使用过程中,发现几个很有用,但不太常用(或细节不太清楚)的函数(存储过程): isnumeric,isdate,patindex,newid,collate,sp_execu ...
- localStorage存储数组，对象，localStorage,sessionStorage存储数组对象
localStorage存储数组,对象,localStorage,sessionStorage存储数组对象 前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...
- 用python和unittest编写app自动化测试用例
import unittest import webdriver import time class Test(unittest.TestCase): @classmethod def setUpCl ...
- RTMP、RTSP、HTTP视频协议详解（附：直播流地址、播放软件）
- ReentrantLock详解 以及与synchronized的区别
ReentrantLock lock = new ReentrantLock(); //参数默认false,不公平锁 ReentrantLock lock = new ReentrantLock(tr ...
- [UOJ391] 鸽举选仕
我把这题推荐给yyb让他把这题做它的T2他竟然不要QwQ....... 题目大意: 下发八个题目和对应的八份代码,请构造数据Hack下发代码. Task1 下发代码用了一些神奇做法实现A + B = ...