[h5年度报告] 1.2使用 swiper和swiper anime实现简单h5滑动动画页面

最新推荐文章于 2023-02-01 17:47:01 发布

LVtomatoJ

最新推荐文章于 2023-02-01 17:47:01 发布

阅读量1.3k

点赞数 1

分类专栏： Web 前端文章标签：前端 js 移动开发

本文链接：https://blog.csdn.net/LVtomatoJ/article/details/119654914

版权

Web 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

下载准备：

swiper3.0.6：swiper.min.js和swiper.min.css 下载地址

swiper animate：animate.min.js和animate.min.css 下载地址

下载好上述两组文件后解压，在index.html所在目录分别创建css和js文件夹，将下载的四个文件放入对应文件夹中。

一、引入与配置

在head中加入以下代码引入下载的文件

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

因为我们面向的主要是移动端需要保持100%占满屏幕所以再在head加入一段样式（style）

  <style>
    html{
    width: 100%;
    height: 100%;
    }
    body{
    width: 100%;
    height: 100%;
    }
    .swiper-container {
    width: 100%;
    height: 100%;
    }
    .swiper-slide{
    width:100%;
    height:100%;
    }
  </style>

最后面两个就是我们后面要用到的class名称了马上就可以见到了！

然后我们在body的最后加入一段js代码来运行所需要的功能

  <script>
    const swiper = new Swiper('.swiper-container', {
      // 方向：竖向
      direction: 'vertical',
      //鼠标控制：允许
      mousewheelControl:true,
      //初始化完成后触发动画
      onInit:function(swiper){
        swiperAnimate(swiper);
      },
      //过度结束时触发动画
      onTransitionEnd:function(swiper){
        swiperAnimate(swiper);
      },
    });
  </script>

这下我们就是配置完毕了！

二、实现滑动和动画

1、滑动

如何实现一页一页的滑动效果呢，在body中加入以下代码！

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <section class="swiper-slide">
        <p>《生成你的专属报告》</p>
      </section>
    </div>
  </div>

按照格式最外层由两层div包裹，class分别为swiper-container和swiper-wrapper

是不是有点眼熟呢就是我们前面样式设置100%的那两个！

然后再加入一层section标签，class为swiper-slide，slide有滑行的意思，里面包含的内容代表了一次滑动所显示的界面。

那我们怎么加入几页呢？只需要把section标签复制就好了，如下代码

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <section class="swiper-slide">
        <p>《生成你的专属报告》</p>
      </section>
      <section class="swiper-slide">
        <p>《生成我的专属报告》</p>
      </section>
      <section class="swiper-slide">
        <p>《生成他的专属报告》</p>
      </section>
    </div>
  </div>

这个时候我们保存好文件在浏览器访问就可以出现滑动的效果了！

但是这样翻页实在没有一点h5的感觉，这个时候就要给他们每个部分加入动画了！

2、动画

动画的实现接住了animate就十分的方便了

只需要在对应的标签内加入固定的class名ani 和设置一些参数就好了如下面代码

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <section class="swiper-slide">
        <p class="ani" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>《生成你的专属报告》</p>
      </section>
      <section class="swiper-slide">
        <p class="ani" swiper-animate-effect='fadeInUpBig' swiper-animate-duration='1s' swiper-animate-delay='0.5s'>《生成我的专属报告》</p>
      </section>
      <section class="swiper-slide">
        <p class="ani" swiper-animate-effect='bounceInLeft' swiper-animate-duration='3s' swiper-animate-delay='0.5s'>《生成他的专属报告》</p>
      </section>
    </div>
  </div>

其中三个参数分别为

swiper-animate-effect	切换效果，例如 fadeInUp
swiper-animate-duration	动画持续时间（单位秒），例如 0.5s （可选）
swiper-animate-delay	动画延迟时间（单位秒），例如 0.3s （可选）

切换效果可以在此页面最下面查看

至此我们就完成了最基础的学习~

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>毕业生读书报告</title>

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

  <style>
    html{
    width: 100%;
    height: 100%;
    }
    body{
    width: 100%;
    height: 100%;
    }
    .swiper-container {
    width: 100%;
    height: 100%;
    }
    .swiper-slide{
    width:100%;
    height:100%;
    }
  </style>

</head>
<body>

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <section class="swiper-slide">
        <p class="ani" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>《生成你的专属报告》</p>
      </section>
      <section class="swiper-slide">
        <p class="ani" swiper-animate-effect='fadeInUpBig' swiper-animate-duration='1s' swiper-animate-delay='0.5s'>《生成我的专属报告》</p>
      </section>
      <section class="swiper-slide">
        <p class="ani" swiper-animate-effect='bounceInLeft' swiper-animate-duration='3s' swiper-animate-delay='0.5s'>《生成他的专属报告》</p>
      </section>
    </div>
  </div>

  <script>
    const swiper = new Swiper('.swiper-container', {
      // 方向：竖向
      direction: 'vertical',
      //鼠标控制：允许
      mousewheelControl:true,
      //初始化完成后触发动画
      onInit:function(swiper){
        swiperAnimate(swiper);
      },
        //过度结束时触发动画
      onTransitionEnd:function(swiper){
        swiperAnimate(swiper);
      },
    });
  </script>

</body>
</html>

LVtomatoJ

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
[h5年度报告] 1.2使用 swiper和swiper anime实现简单h5滑动动画页面

下载准备：swiper3.0.6：swiper.min.js和swiper.min.css 下载地址swiper animate：animate.min.js和animate.min.css 下载地址下载好上述两组文件后解压，在index.html所在目录分别创建css和js文件夹，将下载的四个文件放入对应文件夹中。一、引入与配置在head中加入以下代码引入下载的文件 <link rel="stylesheet" href="css/swiper.mi...
复制链接

扫一扫