Swiper Animate使用方法、Swiper 动画效果

蔡菜小奥比

已于 2024-01-25 13:48:32 修改

阅读量1.4k

点赞数 18

分类专栏： CSS3 文章标签：前端 css 动画

于 2024-01-25 13:46:41 首次发布

本文链接：https://blog.csdn.net/huang_99/article/details/135840733

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先先放个官网地址（很通俗易懂）：https://www.swiper.com.cn/usage/animate/index.html

Swiper Animate也就是swiper轮播图的文字的动画效果，也可以是有轮播图大图作为背景，有个小的产品图绝对定位定到上面的一个动画效果。

在这里插入图片描述

我是想着参照这个网站做出来这个效果的，无意中发现了swiper有个animate插件。

在这里插入图片描述

下面是我做的练习：
在这里插入图片描述

放上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animate.css测试</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <style>
        .box {
            width: 100%;
            height: 100%;
        }

        .box p {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000;
            font-size: 50px;
        }

        .mySwiper {
            width: 100%;
            height: 600px;
        }

        .mySwiper img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .mySwiper p,
        .mySwiper h2 {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
            font-size: 50px;
            color: #fff;
            font-weight: bold;
            top: 0;
        }

        .mySwiper h2 {
            top: 15%;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="animated bounce">bounce</p>
    </div>

    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="images/huanfu1.jpg" alt="">
                <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s"
                    swiper-animate-delay="0s">居中1</p>
            </div>
            <div class="swiper-slide">
                <img src="images/huanfu2.jpeg" alt="">
                <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s"
                    swiper-animate-delay="0s">居中2</p>
                <h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
                    swiper-animate-delay="0s">标题</h2>
            </div>
            <div class="swiper-slide">
                <img src="images/huanfu3.jpeg" alt="">
                <p class="ani fadeInUp animated" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.7s"
                    swiper-animate-delay="0s">居中3</p>
            </div>
            <div class="swiper-slide">
                <img src="images/huanfu4.jpg" alt="">
                <p>居中4</p>
            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素 
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                }
            }
        }) 
    </script>
</body>
</html>