swiper,animate混合使用方法及页面滚动触发动画效果

要实现的效果：swiper滚动触发动画效果

需要用到的文件(缺一不可)
swiper.min.css
swiper.min.js
animate.css
swiper.animate1.0.3.min.js

swiper 版本用的是4.5.3 下载链接
swiper.animate 版本用的是1.0.3 下载链接
animate 版本用的是4.1.1下载链接

1.引入文件

<link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="./css/animate.css">
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper.animate1.0.3.min.js"></script>

2.初始化一个swiper

注意:swiper版本不同 on的用法也不同

var mySwiper = new Swiper('.swiper', {
	 autoplay: true,//可选选项，自动滑动
     effect: 'fade',   //根据需要修改轮播图切换动画效 https://www.swiper.com.cn/api/effects/193.html
     on: {
         init: function () {
             swiperAnimateCache(this); //隐藏动画元素
             swiperAnimate(this); //初始化完成开始动画
         },
         slideChange: function () {
             swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
         }
     }
 })

3.html
注意
要加动画的标签 需要加class=“ani”
swiper-animate-effect=“动画名”
swiper-animate-duration=“0.5s” //动画持续时间
swiper-animate-delay=“0s” //动画延迟时间

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="./img/index_bg1.png" alt="">
            <div class="banner_content">
                <p class="ani" swiper-animate-effect="animate__fadeInUp" swiper-animate-duration="0.5s"
                    swiper-animate-delay="0s">××××××××有限公司</p>
                <p class="ani" swiper-animate-effect="animate__fadeInUp" swiper-animate-duration="0.5s"
                    swiper-animate-delay="0.3s">
                    公司介绍</p>
                <a href="javascript:;" class="banner_content_on ani" swiper-animate-effect="animate__fadeInUp"
                    swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">
                    <p>获取服务</p>
                    <div class="banner_content_bg"></div>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="./img/index_bg2.png" alt="">
            <div class="banner_content">
                <p class="ani" swiper-animate-effect="animate__fadeInUp" swiper-animate-duration="0.5s"
                    swiper-animate-delay="0.3s">××××××××有限公司</p>
                <p class="ani" swiper-animate-effect="animate__fadeInUp" swiper-animate-duration="0.5s"
                    swiper-animate-delay="0.5s">
                   公司介绍</p>
                <a href="javascript:;" class="banner_content_on ani" swiper-animate-effect="animate__fadeInUp"
                    swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">
                    <p>获取服务</p>
                    <div class="banner_content_bg"></div>
                </a>
            </div>
        </div>
    </div>
</div>

要实现的效果：页面滚动触发动画效果

需要用到的文件(缺一不可)
animate.css
wow.min.js

animate 版本用的是4.1.1下载链接
wow.min.js 下载链接

1.引入文件

<link rel="stylesheet" href="css/animate.min.css">
<script src="/js/wow.min.js"></script>
<script>
	if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
		new WOW().init();     //必须有
	};
</script>

2.html
wow 必须有
animate__animated 必须有
animate__fadeInUp 动画名

 <img src="./img/content1.png" alt="" class="animate__fadeInUp wow animate__animated">