网页上使用swiper+animate实现轮播和入场动效

前言

animate使用

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。使用步骤如下：

1. 登录wow.js官网 wow.js — Documentation (wowjs.uk)，查看使用过程
2. new一个wow的构造函数。注意：4.0之后的版本在添加animateClass时的属性值要做修改

new WOW({
     boxClass:     'wow',      // default
     animateClass: 'animate__animated', // default
     offset:       0,          // default
     mobile:       true,       // default
     live:         true        // default
   }
   )
   wow.init();

1. 引入animate.css https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css

和wow.js文件 https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js

1. 使用时在元素上添加wow类名和animate中对应的动画类名以及持续时长

• 需要注意的当为整体大盒子设置animate动画时，默认时长一般是1s，当我们想为其中的子元素单独设置时长时，可在子元素上添加animate__delay-ns属性。eg:

<div class="wood">
    <div class="wood-title  animate__delay-3s">
        高级木作定制   
    </div>
</div>
<script>
    window.onscroll=function(){
        if (window.scrollY - 900 > 0) {
         wood.addClass('wow animate__fadeInRight animate__animated')
         woodTitle.addClass('wow animate__slideInUp animate__animated')
                }
    }
</script>

• wow还有一些高级属性：

data-wow-duration: 更改动画持续时间
data-wow-delay: 动画开始前的延迟时间
data-wow-offset: 动画的距离（与浏览器底部相关）
data-wow-iteration: 动画重复的次数

swiper使用

1. 登录官网 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

下载swiper-bundle.js https://unpkg.com/swiper@8/swiper-bundle.js和swiper-bundle.css https://unpkg.com/swiper@8/swiper-bundle.css

1. 初始化轮播图的页面结构。swiper和swiper-wrapper和swiper-slide的类名一般不做修改

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在Swiper容器之外

1. 构造swiper实例对象。网页中有多个轮播时，swiper构造函数的第一个参数一般不用’.swiper’,而是换作自定义类名

<script>
    var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    autoplay:true,//自动切换
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
       clickable:true,//可点击
        bulletActiveClass: 'my-bullet-active',//分页器激活时的样式
        //另外还有renderBullet等属性
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

总结

1. 遇到图片宽度铺满整屏的情况时，有两种方法解决：

（1）图片定高度

遇到宽度不足图片大小的显示屏时，我们需要把图片的中心区域展示出来，也就是设置background-position为center居中。

<style>
    .banner {
    width: 100%;
    height: 900px;
    background: url('../img/banner.png') no-repeat center;
    background-size: cover;
   </style>   
<div class="banner">
        <img src="img/banner.png" alt="">
    </div>

当视口的宽高都不及图片大时，应设置图片的background-position为center。（只展示图片最中心的区域）。

（2）图片自适应高。

当前视口的图片宽高比和原图片宽高比相同。为了避免出现横滚动条，body要设置min-width不小于视口大小。

/* 按照图片比例制作这个banner盒子 */
.banner{
    width: 100%;
    /* 高度有图片 img 撑起来 */
}
.banner img{
    width: 100%;
    /* 按照图片比例自适应 */
    height: auto;
}

补充：背景属性表

属性名称	属性作用	值
background-color	背景图片颜色	color
background-image	背景图片	url(‘1.png’);
background-repeat	平铺方式	repeat 、 no-repeat 、 repeat-x 、 repeat-y
background-position	图片位置	left、 right、 top、 bottom、 center，百分数，length
background	简写（顺序不能错）	background: green url(1.jpg) no-repeat left bottom;
background-size	背景图片的尺寸	cover(比例不变溢出隐藏),contain（比例不变会有留白），percentage百分比（背景区域的），length(单位是px)

1. 轮播图使用了swiper插件，分页器激活时给bulletActiveClass添加的类名是自定义样式。

轮播大图结构如下：

<div class="swiper swiper-big wow animate__fadeInUp animate__animated">
       <div class="swiper-wrapper">
           <div class="swiperBig-slide swiper-slide">
               <img src="./imgs/swipper1.png" alt="">
           </div>
           <div class="swiperBig-slide swiper-slide">
               <img src="./imgs/swipper2.png" alt="">
           </div>
           <div class="swiperBig-slide swiper-slide">
               <img src="./imgs/swipper3.png" alt="">
           </div>
           <div class="swiperBig-slide swiper-slide">
               <img src="./imgs/swipper4.png" alt="">
           </div>
       </div>
       <ul class="slide-list swiper-pagination">
           <!-- <li class="slide-item">
           </li>
           <li class="slide-item"></li>
           <li class="slide-item"></li>
           <li class="slide-item"></li> -->
       </ul>
   </div>

1. 遇到多图轮播例如下图时，实现如下：

   

找到swiper中对应的样式，查看源代码书写swiper构造函数中对应属性，上图中轮播区域可容纳轮播图的数量是3.5，设置如下：

var mySwiper3 = new Swiper('.swiper-little', {
               loop: true,
               autoplay:true,
               slidesPerView: 3.5,//轮播视图中容纳的轮播项数量
               spaceBetween: 100,
               // slidesPerGroup: 3.5,一次滑动的轮播项数量，默认为1
               navigation: {
                   nextEl: '.swiper-button-next',
                   prevEl: '.swiper-button-prev',
               },
           })

1. 浏览器滚动到一定宽度时给元素设置入场动画实现如下：

当元素的滚动条滚动时触发的事件。用法即：Element.onscroll = function(){};

1. 发生某个鼠标事件时，数字增长的动效实现如下：

（1）引入countup.js插件 https://cdn.bootcdn.net/ajax/libs/countup.js/2.6.0/countUp.js

countup依赖于jquery，需要引入在jq的后面

<script>
    var n1 = new CountUp(num1, 50),
            n2 = new CountUp(num2, 2017),
            n3 = new CountUp(num3, 40),
            n4 = new CountUp(num4, 240);
        // 页面再次刷新时要判断一下卷入距离，然后进行数字增长
        if (window.pageYOffset + window.innerHeight - $('.table')[0].offsetTop > 100) {
            n1.start();
            n2.start();
            n3.start();
            n4.start();
        }
        // 当页面卷入一定距离时数字进行增长
//innerHeight是浏览器窗口的高度
        window.onscroll = _.throttle(function () {
            var dis = window.pageYOffset + window.innerHeight - $('.table')[0].offsetTop;
            if (dis > 100) {
                n1.start()
                n2.start()
                n3.start()
                n4.start()
            }
        }, 50)
    </script>