在 Swiper 中使用 animate.css

最新推荐文章于 2024-09-26 01:42:12 发布

俊小赞

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量1.9k

点赞数 2

分类专栏： # Swiper 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44808483/article/details/113126203

版权

Swiper 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章目录

前言
一、animate
二、准备
三、Demo
总结

前言

在上一篇文章当中我们介绍到了 SwiperJS ，那么在本篇文章当中我们接着来说和 swiper 相关连的插件 animate，通过两者的相互结合，我们可以快速地制作精美的 h5 页面。

一、animate

animate.css 是一个强大的跨平台的预设 css3 动画库，内置了许多的 css3 动画效果，并且兼容性较好，同时属于MIT开源协议，支持商用。

二、准备

1.文件

想要在 swiper 中执行 animate 我们需要先引入以下四个相关的文件。

swiper.css：swiper框架的样式。
swiper.js：实现swiper的逻辑文件。
animate.css：常见的动画样式框架。
swiper-animate.js：根据swiper效果控制动画。
相关文件下载

2.类名

在需要设置动画的元素中添加ani类名。

<!-- 例如 -->
<h1 class="ani">Swiper 是什么?</h1>

3. 动画样式

为需要设置动画的元素设置动画名（必要的）、动画的持续时间、动画的延迟触发时间。

<!-- 例如 -->
<img
	class="ani img"
    swiper-animate-effect="fadeInUp" 
    swiper-animate-duration="0.5s"
    swiper-animate-delay="0.3s"
    src=""
    />

4.初始化

在new Swiper中，同时初始化动画。

on: {
	init: function () {
    	swiperAnimateCache(this); //隐藏动画元素
    	swiperAnimate(this); //初始化完成开始动画
    },
    slideChange: function () {
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
    },
},

三、Demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SwiperJS</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" />
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/2.0/animate.css" rel="stylesheet">
    <style>
      body,
      div {
        margin: 0;
        padding: 0;
      }
      div.swiper-container {
        width: 100vw;
        height: 100vh;
      }
      .swiper-wrapper .swiper-slide {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: #ffffff;
      }
      .swiper-wrapper .swiper-slide.bg1 {
        background-color: #16a085;
      }
      .swiper-wrapper .swiper-slide.bg2 {
        background-color: #2980b9;
      }
    </style>
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide bg1">
          <img
            class="ani bg1"
            swiper-animate-effect="flip"
            src="https://ae01.alicdn.com/kf/U750d4e4b89e447f0bf8df87b0c97a505C.jpg"/>
          <h1 class="ani" swiper-animate-effect="bounceInLeft">Swiper</h1>
        </div>
        <div class="swiper-slide bg2">
          <h1 class="ani" swiper-animate-effect="bounceInRight">Swiper 是什么?</h1>
          <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-delay="0.2s">
            Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
          </p>
          <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-delay="0.4s">
            Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
          </p>
          <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-delay="0.6s">
            Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
          </p>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
  <script src="./js/swiper.animate1.0.3.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      autoplay: true,
      // 在swiper中初始化animate动画
      on: {
        init: function () {
          swiperAnimateCache(this); //隐藏动画元素
          swiperAnimate(this); //初始化完成开始动画
        },
        slideChange: function () {
          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
        },
      },
    });
  </script>
</html>