手搓页面预加载

页面预加载

本文实现了

1.预加载转圈动画+加载完毕销毁组件

2.开屏蒙版特效（after资源加载完毕）

3.主页背景图模糊+缩放动画（after资源加载完毕）

代码结构

HTML

1
2
3
4
5
6
7
<!-- 加载动画 -->
<div class="svg">
    <div class="container">
        <div class="circle"></div>
        <span>loding......</span>
    </div>
</div>

门板

1
2
3
<!-- 门板 -->
<div class="left"></div>
<div class="right"></div>

主页面

1
2
<!-- 主页面 -->
<img class="page" src="https://haowallpaper.com/link/common/file/previewFileImg/718a61f6cd6efa803ca87eb743fec045718a61f6cd6efa803ca87eb743fec045" alt="" />

JS

预加载工具

1
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

动态更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- JS动态更新 -->
<script>
    let left = document.querySelector('.left')  //左门
    let right = document.querySelector('.right')//右门
    let page = document.querySelector('.page')  //获取图片对象

    $(window).on('load', function () {
        $('.svg').animate(
            {
                opacity: 0,
            },
            500
        )
        setTimeout(function () {
            $('.svg').remove()
            //remove组件loding后执行
            setTimeout(function () {
                //门板开屏动态
                left.style.transform = `translateX(-60vw)`
                right.style.transform = `translateX(60vw)`
                //模糊/放缩背景图片效果
                page.style.animation = `blur-to-clear 2s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1
                        normal backwards running,scale 2s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1 both`
            }, 200)
        }, 500)
    })
</script>

CSS

全局配置

1
2
3
4
5
6
7
8
9
10
11
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    /* 取消滚动条 */
    overflow: hidden;
}

动画函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 动画 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 模糊动画 */
@keyframes blur-to-clear {
    0% {
        filter: blur(35px);
    }
    100% {
        filter: blur(0px);
    }
}
/* 图片大小变化动画 */
@keyframes scale {
    0% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

包裹加载的样式svg（loding后去除）

1
2
3
4
5
6
7
.svg {
    z-index: 999;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
}

主页背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
img.page {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    min-width: 1080px;
    transition: opacity 1s;
    /* 背景图片变化动画(已存入JS) */
    /* animation: blur-to-clear 2s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1
    normal backwards running,
    scale 2s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1 both; */
}

加载圆圈样式

详细拆分见文章“页面circle加载动画”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 10px solid rgb(0, 132, 255); */
    background-color: rgb(30, 30, 30);
}
.circle {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* border: 10px solid rgb(0, 255, 170); */
    background-image: linear-gradient(
        0deg,
        rgb(0, 255, 170),
        rgb(0, 17, 255),
        rgb(255, 0, 255)
    );
    /* 动画 */
    animation: rotate 2s linear infinite;
}
/* 模糊 */
.circle::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* border: 10px solid rgb(0, 255, 170); */
    background-image: linear-gradient(
        0deg,
        rgb(0, 255, 170),
        rgb(0, 17, 255),
        rgb(255, 0, 255)
    );
    filter: blur(35px);
}
/* 黑圈 */
.circle::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: rgb(30, 30, 30);
    /* filter: blur(35px); */
}
span {
    position: absolute;
    color: rgb(255, 255, 255);
}

开屏门板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.left {
    z-index: 998;
    position: absolute;
    width: 50vw;
    height: 100vh;
    background-color: rgb(30, 30, 30);
    transition: transform 1s;
    transform-origin: center center;
}
.right {
    z-index: 998;
    position: absolute;
    width: 50vw;
    height: 100vh;
    left: 50vw;
    background-color: rgb(30, 30, 30);
    transition: transform 1s;
    transform-origin: center center;
}