所有分类
  • 所有分类
  • 市场推广

swiper循环轮播添加文字动画

一直用Swiper插件,但之前一直都没留意到Swiper插件有可供选择的动画效果插件Swiper Animate,在实现swiper循环轮播添加加文字入场动画的效果时用到了Swiper Animate,接下来就把使用方法分享出来,供大家参考!

HTML部分:

<head>
    <meta charset="utf-8">
    …
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
</head>
<body>
<div class="swiper banner">
    <div class="swiper-wrapper">
    <!-- banner1 -->
    <div class="swiper-slide">
        <div class="img"><img src="./images/1.jpg" alt=""></div>
        <div class="text ani" <!-- 需要运动的元素上面增加类名 ani -->
        swiper-animate-effect="fadeInUp" <!-- 切换效果,例如 fadeInUp -->
        swiper-animate-duration="0.8s" <!-- 可选,动画持续时间(单位秒),例如 0.8s -->
        swiper-animate-delay="0.3s" <!-- 可选,动画延迟时间(单位秒),例如 0.3s -->
        swiper-animate-style-cache="">
        第一张Banner文字内容
        </div>
    </div>
    <!-- banner2 -->
    <div class="swiper-slide">
        <div class="img"><img src="./images/2.jpg" alt=""></div>
        <div class="text ani"
        swiper-animate-effect="fadeInUp"
        swiper-animate-duration="0.8s"
        swiper-animate-delay="0.3s"
        swiper-animate-style-cache="">
        第二张Banner文字内容
        </div>
    </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/swiper.animate.min.js"></script>
</body>

 

JS部分:

<script language="JavaScript">
    var swiper = new Swiper(".banner", {
        spaceBetween: 30,
        centeredSlides: true,
        effect : 'fade',
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        on:{
            init: function(){
                swiperAnimateCache(this);//隐藏动画元素
                this.emit('slideChangeTransitionEnd');//初始化时触发一次slideChangeTransitionEnd事件
            },
            slideChangeTransitionStart:function(){
                swiperAnimate(this);//每个slide切换开始前运行当前slide动画
            },
            slideChangeTransitionEnd:function(){
                swiperAnimate(this);//每个slide切换结束时运行当前slide动画
                //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只执行一次
            }
        }
    });
</script>

原文链接:https://www.aiwre.com/knowledge/11192.html,转载请注明出处~~~

0
广告位招租

评论0

显示验证码
没有账号? 注册  忘记密码?