基于swiper 的 animate动画,适用于Swiper2.x和Swiper3.x 。

1. 使用Swiper Animate需要先加载swiper.animate.min.jsanimate.min.css

  1.  

2.初始化时隐藏元素并在需要的时刻开始动画。

  1. <script>
  2. var mySwiper = new Swiper ('.swiper-container', {
  3. onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
  4. swiperAnimateCache(swiper); //隐藏动画元素
  5. swiperAnimate(swiper); //初始化完成开始动画
  6. },
  7. onSlideChangeEnd: function(swiper){
  8. swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  9. }
  10. })
  11. </script>

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

swiper-animate-effect:切换效果,例如 fadeInUp (更多的切换效果可参考如下:https://daneden.github.io/animate.css/)

swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s

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

swiper.animate--css3翻页动画的更多相关文章

  1. css3 --- 翻页动画 --- javascript --- 3d --- Action

    用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...

  2. css3 --- 翻页动画 --- javascript --- 3d --- 准备

    用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...

  3. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  4. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  5. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  6. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

  7. WPF中ListBox ListView数据翻页浏览笔记(强调:是数据翻页,非翻页动画)

    ListBox和ListView在应用中,常常有需求关于每页显示固定数量的数据,然后通过Timer自动或者手动翻页操作,本文介绍到的就是该动作的实现. 一.重点 对于ListBox和ListView来 ...

  8. 如何用纯 CSS 创作一个记事本翻页动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKOPGw 可交互视频教 ...

  9. 移动web:翻页场景动画

    在移动web,特别是在微信中,经常看到一种翻页动画效果,也称为场景动画. 一页一页的翻过,像在看书,每页的内容以各种"炫酷"的效果出现在你的眼里,配上一首动听的音乐,你有没有喜欢上 ...

随机推荐

  1. 关于Android热点模式下的UDP广播

    最近尝试让easylink3在热点模式下连接,发现用普通的广播地址会报错,Network unreachable 尝试按照stackoverflow上的方法: public static int ge ...

  2. 【Silverlight】Bing Maps学习系列(三):如何控制地图

    [Silverlight]Bing Maps学习系列(三):如何控制地图 本篇主要介绍如何对地图的一些常用控制操作,包括地图加载模式.根据精度和纬度定位.变焦程度等. 一.动态设置地图加载模式 在本系 ...

  3. bzoj2705 [SDOI2012]Longge的问题——因数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2705 一开始自己想了半天... 有了点思路:遍历 n 的因数 k,每个因数要预处理出 gcd ...

  4. java程序死锁,3种方式快速找到死锁代码

    java程序中出现死锁问题,如果不了解排查方法,是束手无策的,今天咱们用三种方法找到死锁问题. 运行下面代码 package com.jvm.visualvm; /** * <a href=&q ...

  5. Invalid default value for 'create_date' timestamp field

    创建表的语句中有这么一句 `create_date` TIMESTAMP NOT NULL DEFAULT '0000-00-00 00:00:00', 1 之后就报了这个错误. That is be ...

  6. 数组去重----es6&es5&数组对象去重

    es6方法: 普通数组: 1.使用Array.from(new Set(arr)); /* * @param oldArr 带有重复项的旧数组 * @param newArr 去除重复项之后的新数组 ...

  7. 第八届河南省省赛 A.挑战密室

    挑战密室 时间限制: ms | 内存限制: KB 难度: 描述 R组织的特工Dr. Kong 为了寻找丢失的超体元素,不幸陷入WTO密室.Dr. Kong必须尽快找到解锁密码逃离,否则几分钟之后,WT ...

  8. 构建一个.net的干货类库,以便于快速的开发 - 前言

    前言: 工作已经快两年了,项目也做过不少,不知道大家有没有一个习惯,就是把在做项目过程中那些好的方法记录下来.我觉得这个习惯在开发的过程中还是很有用的,举个例子,我之前做过一个支付宝的支付功能,然后把 ...

  9. redis学习-sds数据类型

    今天开始了redis的学习,本来想直接从源码看起的,不过看到有篇对redis介绍的基础教程 <Redis 设计与实现(第一版)> 于是决定从这个开始入门. 1.数据类型定义 typedef ...

  10. 2017-11-28 Html-浅谈如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...