H5通用结构，初探Swiper.js & Animate.css

最新推荐文章于 2022-12-11 17:48:28 发布

Nora Taki

最新推荐文章于 2022-12-11 17:48:28 发布

阅读量298

点赞数 2

分类专栏：前端开发 H5 文章标签： html css3 js

本文链接：https://blog.csdn.net/u011974819/article/details/113881362

版权

前端开发同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

参考文档：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
 Animate.css | A cross-browser library of CSS animations.

概述及演示

本文实现的是一个自适应全屏的H5动画通用结构
囊括了 4.1.1 版本 Animate.css 的全部 97 种动画效果

废话少说，先看结果
（字体、背景颜色都是随机的呢😋）
在这里插入图片描述

全屏垂直滑动布局

基于 Swiper.js 库的基础上，自定义部分 css 即可

﹂ DOM 结构

<!-- Swiper 区域 -->
<div class="swiper-container">
    <!-- ... -->
    <!-- Slide 显示区域 -->
    <div class="swiper-wrapper">
		<div class="swiper-slide">
			Slide 1
		</div>
		<div class="swiper-slide">
			Slide 2
		</div>
	</div>
    
    <!-- Pagination 分页器区域 -->
    <div class="swiper-pagination"></div>
    <!-- ... -->
</div>

﹂ Swiper 初始化

const swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
        clickable: true,
    },            
});

﹂ Css 调整

html, body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

在这里插入图片描述

生成全部 Slide 区域

动态生成 div.swiper-slide 节点，再配上点色彩

﹂ Animate 的 97 种动画

官网说明中没有明确数量说明，想要得到所有动画的名称还是有很多方法的

比如利用 开发者工具 F12 遍历页面
在这里插入图片描述
再比如直接通过 vscode 的 正则化搜索 查询 .css 内容

﹂增加 DOM 节点

<!-- Swiper 区域 -->
<div class="swiper-container">
    <!-- 标题区域 -->
    <div class="swiper-title">
        SWIPER ANIMATE SHOW PAGE
    </div>

    <!-- Slide 显示区域 -->
    <div class="swiper-wrapper"></div>
    
    <!-- Pagination 分页器区域 -->
    <div class="swiper-pagination"></div>

    <!-- 选项区域 -->
    <div class="swiper-choice">
        <select class="swiper-selector"></select>
    </div>
</div>

增加 selector 和 title 两部分

﹂动态生成 Slide 节点

// 构建 Dom
const effects = ['bounce', 'flash',...,'slideOutUp']

const randRGB = () => { return Math.round(Math.random() * 200) }
const randRGBbg = () => { return Math.round(Math.random() * 55) + 200 }

const swiperWrapper = document.querySelector('.swiper-wrapper')
const swiperSelector = document.querySelector('.swiper-selector')

effects.forEach(val => {
    let swEl = document.createElement('div')
    swEl.className = 'swiper-slide'
    swEl.style.backgroundColor = `rgb(${randRGBbg()},${randRGBbg()},${randRGBbg()})`
    swEl.innerHTML = `<p style="color:rgb(${randRGB()},${randRGB()},${randRGB()});">${val}</p>`

    let opEl = document.createElement('option')
    opEl.value = effects.indexOf(val)
    opEl.innerText = val


    swiperWrapper.append(swEl)
    swiperSelector.append(opEl)
})

其中 randRGB 和 randRGBbg 分别是随机生成字体和背景颜色数值的方法
生成 swiper-slide 的同时，也动态生成 <select> 标签的 <option> 选项

在这里插入图片描述
至此，结构部分就都完成了（个人觉得，还挺好看的🌼）

加入动效

<script src="assets/swiper.animate.min.js"></script>

引入 swiper.animate.js 库

swEl.innerHTML = `<p class="ani" swiper-animate-effect="${val}" swiper-animate-duration="1s"
	swiper-animate-delay="0.3s" style="color:rgb(${randRGB()},${randRGB()},${randRGB()});">${val}</p>`

修改 effects.forEach 回调中 swEl 节点中 p元素的具体内容，增加了 swiper-animate-effect，swiper-animate-duration 属性

const swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
        clickable: true,
    },
    on: {
        init: function () {
            swiperAnimateCache(this); //隐藏动画元素 
            this.emit('slideChangeTransitionEnd');//在初始化时触发一次slideChangeTransitionEnd事件
        },
        slideChangeTransitionEnd: function () {
            swiperAnimate(this); //每个slide切换结束时运行当前slide动画
            swiperSelector.querySelectorAll('option')[this.activeIndex].selected = true // 当动画完成时更新selector                    
        }
    }
});

增加 swiper 的 init 和 slideChangeTransitionEnd 事件方法，来触发动画，同时调整 selected

swiperSelector.addEventListener('change', () => {
    swiper.slideTo(swiperSelector.selectedIndex)
})

增加 select 的 change 事件，增加除滑屏以外第二种切换方式

至此全部完成🤭
在这里插入图片描述

完整代码

Github - h5-demos / SwiperAnimate

﹂ HTML代码

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

<head>
    <meta charset="utf-8">
    <title>Swiper animate demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.14/swiper-bundle.min.css" rel="stylesheet">

    <!-- animate.min.css 使用前需要带有prefix -->
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/style.css">

</head>

<body>
    <!-- Swiper 区域 -->
    <div class="swiper-container">
        <!-- 标题区域 -->
        <div class="swiper-title">
            SWIPER ANIMATE SHOW PAGE
        </div>

        <!-- Slide 显示区域 -->
        <div class="swiper-wrapper"></div>
        
        <!-- Pagination 分页器区域 -->
        <div class="swiper-pagination"></div>

        <!-- 选项区域 -->
        <div class="swiper-choice">
            <select class="swiper-selector"></select>
        </div>
    </div>

    <!-- 引入 JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.14/swiper-bundle.min.js"></script>
    <script src="assets/swiper.animate.min.js"></script>

    <script>
        // 构建 Dom
        const effects = ['bounce','flash','pulse','rubberBand','shakeX','shakeY','headShake','swing','tada','wobble','jello','heartBeat','backInDown','backInLeft','backInRight','backInUp','backOutDown','backOutLeft','backOutRight','backOutUp','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','fadeInTopLeft','fadeInTopRight','fadeInBottomLeft','fadeInBottomRight','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','fadeOutTopLeft','fadeOutTopRight','fadeOutBottomRight','fadeOutBottomLeft','flip','flipInX','flipInY','flipOutX','flipOutY','lightSpeedInRight','lightSpeedInLeft','lightSpeedOutRight','lightSpeedOutLeft','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','hinge','jackInTheBox','rollIn','rollOut','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp','zoomOut','zoomOutDown','zoomOutLeft','zoomOutRight','zoomOutUp','slideInDown','slideInLeft','slideInRight','slideInUp','slideOutDown','slideOutLeft','slideOutRight','slideOutUp']

        const randRGB = () => { return Math.round(Math.random() * 200) }
        const randRGBbg = () => { return Math.round(Math.random() * 55) + 200 }

        const swiperWrapper = document.querySelector('.swiper-wrapper')
        const swiperSelector = document.querySelector('.swiper-selector')

        effects.forEach(val => {
            let swEl = document.createElement('div')
            swEl.className = 'swiper-slide'
            swEl.style.backgroundColor = `rgb(${randRGBbg()},${randRGBbg()},${randRGBbg()})`
            swEl.innerHTML = `<p class="ani" swiper-animate-effect="${val}" swiper-animate-duration="1s"
                    swiper-animate-delay="0.3s" style="color:rgb(${randRGB()},${randRGB()},${randRGB()});">${val}</p>`

            let opEl = document.createElement('option')
            opEl.value = effects.indexOf(val)
            opEl.innerText = val


            swiperWrapper.append(swEl)
            swiperSelector.append(opEl)
        })

        //初始化swiper
        const swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
                clickable: true,
            },
            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素 
                    this.emit('slideChangeTransitionEnd');//在初始化时触发一次slideChangeTransitionEnd事件
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时运行当前slide动画
                    swiperSelector.querySelectorAll('option')[this.activeIndex].selected = true // 当动画完成时更新selector                    
                }
            }
        });

        swiperSelector.addEventListener('change', () => {
            swiper.slideTo(swiperSelector.selectedIndex)
        })
    </script>
</body>

</html>

﹂ CSS 代码

/**
* 全屏通用 RESET 部分
*/

html, body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/**
* 本例独用
*/

.swiper-title {
    top: 20px;
    left: 0;
    width: 100%;
    position: absolute;
    text-align: center;
    -webkit-transition: .3s opacity;
    -o-transition: .3s opacity;
    transition: .3s opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

.swiper-wrapper p {
    font-size: 40px;
}

.swiper-choice {
    bottom: 40px;
    left: 0;
    width: 100%;

    position: absolute;
    text-align: center;
    -webkit-transition: .3s opacity;
    -o-transition: .3s opacity;
    transition: .3s opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

码字不易，如果喜欢，不用三连，点个赞👍便是最大的鼓励
欢迎关注微信公众号 "书咖里的曼基康"

Nora Taki

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
H5通用结构，初探Swiper.js & Animate.css

参考文档：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发Animate.css | A cross-browser library of CSS animations.文章目录概述及效果演示概述及效果演示废话少说，先看结果![在这里插入图片描述](https://img-blog.csdnimg.cn/2021022013204294.gif)...
复制链接

扫一扫