`

Swiper Animate用法详解

阅读更多

【前言】

      前面我们介绍了Swiper的基本用法,现在总结下动画效果Swiper Animate的用法

 

【简介】

      Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件,适用于Swiper2.x、Swiper3.x和Swiper4.x 

      注意:此插件不适用于loop模式(循环模式)

 

【列表】

(1)引入文件;

(2)添加类名和参数;

(3)JS添加函数,控制初始化时隐藏元素并在需要的时刻开始动画

 

【详解】

(1)引入文件

CSS文件:使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css

JS:引入动画脚本文件swiper.animate.min.js

<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>

 

(2)添加类名和参数

在需要运动的元素上面增加类名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>

 

(3)JS添加函数功能,控制初始化时隐藏元素并在需要的时刻开始动画

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

 

 

 

 

 

 

 

.

分享到:
评论

相关推荐

    swiper+animate.docx

    ### Swiper结合Animate实现整屏滚动效果的知识点详解 #### 一、Swiper与Animate概述 Swiper是一款功能强大且灵活的触摸滑动组件库,适用于网页和移动应用中的多种场景,如幻灯片展示、产品轮播图、广告轮播等。其...

    vue过渡和animate.css结合使用详解

    Vue 过渡和 Animate.css 结合使用详解 Vue 过渡 在 Vue 中,过渡(Transition)是一种特殊的效果,用于在元素显示或隐藏时产生动画效果。Vue 提供了两种形式的过渡:离开过渡(Leave Transition)和进入过渡...

    jQuery+swiper.js幻灯片图片视差滚动轮播特效.zip

    《jQuery与swiper.js结合实现幻灯片图片视差滚动轮播特效详解》 在Web开发中,动态的、富有交互性的用户体验是提升网站吸引力的重要手段。"jQuery+swiper.js幻灯片图片视差滚动轮播特效.zip"这个压缩包提供了一个...

    Vue左滑组件slider使用详解

    本文将详细解析Vue slider组件的使用方法和核心实现逻辑。 首先,slider组件的主要功能是允许用户通过左滑操作显示隐藏在屏幕边缘的右侧内容。它与swiper组件有所不同,swiper通常用于实现页面间的滑动切换,而...

    幻灯片静态效果图

    【标题】:“幻灯片静态效果图”的jQuery实现详解 【描述】:在Web开发中,动态展示信息的方式多种多样,其中幻灯片效果是常见的一种。本资源主要介绍如何使用JavaScript库jQuery来创建一个功能丰富的幻灯片效果,...

    jquery图片滚动demo jqueryimgscroll.rar

    例如,`jCarousel`和`Swiper`都是广泛使用的图片轮播插件,它们提供了丰富的配置选项和自定义事件,可以满足各种需求。 总之,jQuery图片滚动效果的实现涉及到了jQuery的选择器、DOM操作、动画方法以及定时器等基础...

    jquery滚动

    **jQuery图片滚动插件详解** 在网页设计中,图片滚动是一种常见的动态效果,可以增加页面的视觉吸引力。jQuery,作为一款强大的JavaScript库,为实现这种效果提供了丰富的功能和简便的API。本文将深入探讨如何使用...

    js焦点图片自动轮播切换代码.zip

    比如,你可以引入jQuery的animate方法来创建更复杂的动画,或者使用Swiper、Slick等现成的轮播插件来增强功能和用户体验。 总结起来,"js焦点图片自动轮播切换代码.zip"是一个包含HTML、CSS和JavaScript的简单轮播...

    Jquery ppt

    **jQuery PPT 知识点详解** jQuery 是一个高效、简洁、强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在开发Web应用时,jQuery能够帮助开发者快速构建功能丰富的网页。...

    50个开发者最喜欢使用的jQuery插件

    **jQuery 插件详解** jQuery 是一款高效、简洁且易用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。由于其强大的功能和丰富的生态系统,jQuery 插件应运而生,为开发者提供了无数...

    人民网传媒频道Flash多图预览.rar

    1. Flash技术:学习如何使用Adobe Animate(以前的Flash Professional)创建动画和交互元素,包括ActionScript编程语言的使用。 2. JavaScript基础:了解如何用JavaScript操作DOM(Document Object Model),添加...

    JQuery轮播插件

    通过结合使用`animate()`函数和CSS的`left`或`right`属性,可以创建这种动态效果。 三、jQuery轮播插件的实现步骤 1. **HTML结构**:首先,我们需要设置一个包含所有轮播图片的容器,每个图片通常会用`&lt;img&gt;`标签...

    jquery图片闪光幻灯片.rar

    6. **过渡效果**:如果需要更复杂的过渡效果,如滑动,可以使用`.animate()`方法自定义动画。 7. **状态管理**:维护当前显示的图片索引,确保切换的正确性。 8. **兼容性检查**:考虑到浏览器兼容性问题,可能...

    整理的jquery插件

    **jQuery插件详解** jQuery,一个轻量级、高性能的JavaScript库,因其简洁的API和强大的功能,成为了前端开发中的必备工具。它极大地简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。而jQuery插件则是jQuery...

    jq滑动切换页面

    还可以考虑使用插件,如 `fullPage.js` 或 `swiper.js`,它们提供了更丰富的选项和预设效果,可以更快速地构建滑动切换页面。 在实际项目中,`jQuery-huandong20161108` 这个文件可能包含了具体实现滑动切换页面的...

    jquery插件

    **jQuery 插件详解** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和Ajax交互等任务。jQuery 的强大之处在于它的可扩展性,这主要体现在丰富的jQuery插件系统上。这些插件极大...

    jQuery左右滚动切换时间轴代码.zip

    4. **jQuery插件**:虽然这个描述中没有明确提及,但jQuery库可能还使用了一些插件来简化开发工作,比如用于滚动的`fullPage.js`或者`swiper.js`等。这些插件已经封装好了复杂的滚动逻辑,使得开发者能够更容易地...

    jQUERY特效幻灯

    **jQuery特效幻灯详解** jQuery特效幻灯,也被称为jQuery滑块或轮播图,是网页设计中常用的一种展示方式,用于以动态效果展示多张图片、文本或其他内容。它通常应用于产品展示、新闻更新、广告轮播等场景,通过自动...

    jquery实现焦点轮播效果

    【jQuery实现焦点轮播效果详解】 焦点轮播是网页设计中常见的动态...此外,还可以考虑使用现有的轮播插件,如Slick、Swiper等,它们提供了更丰富的功能和更好的性能,但理解基础实现原理对于开发者来说依然很重要。

Global site tag (gtag.js) - Google Analytics