一直用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