淡出效果

2021-11-11

getBoundingClientRect()

今天发现一个好看的效果—> 404页面

怎么样,效果挺好看吧!

我研究了研究嘻嘻… 雕虫小计看我的:alien:

在写效果之前,想认识一下今天的主角getBoundingClientRect():

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。

getBoundingClientRect的MDN地址快去研究吧

其实很简单,只需要来一点css配合就可以轻松实现效果,下面使我的完整代码:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }

        li {
            padding: 0 10px;
            text-align: center;
            overflow: hidden;
            border-radius: 10px;
            opacity: 0;
            transition: all linear .5s;
            margin: 10px auto;
            width: 250px;
            height: 400px;
        }

        li img {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0 auto;
        }

        .active {
            opacity: 1;
            transform: translateY(10px);
        }
        p {
            font-family: 'Times New Roman', Times, serif;
            margin-top: 20px;
            width: 100%;
            text-align: center;
        }
    </style>
</head>

<body>
    <p>来张壁纸吧</p>
    <ul>
        <li>
            <img src="../phoneimages/thumb-1920-919196.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919203.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919205.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919210.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919214.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919215.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919216.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919217.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919218.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919219.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919220.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919221.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919222.png" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919251.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919254.jpg" alt="">
        </li>
        <li>
            <img src="../phoneimages/thumb-1920-919261.jpg" alt="">
        </li>
    </ul>
    <script>
        var lis = document.querySelectorAll('li')
        let num = 0
        var cliHeight = window.innerHeight
        function show() {
            for (var i = num; i < lis.length; i++) {
                // 获取当前元素的位置
                var off = lis[i].getBoundingClientRect().top
                if (cliHeight - off > 10) {
                    lis[i].className = 'active'
                    num += 1
                }
            }
        }
        show()
        document.addEventListener('scroll',show)
    </script>
</body>

</html>

代码写完了,看一下效果吧:

效果就是这样,还不错,录制gif的软件有点小问题

2021/11/14 20:41 :

又发现一个实现此效果的的高级api:IntersectionOBserver

mdn地址:https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

使用:

之前一篇笔记是关于使用此api自定义vue图片懒加载指令

这次来来实现一下上面的效果:

//html还是上面的结构
//script
var lis = document.querySelectorAll('li')
        for (let i = 0; i < lis.length; i++) {
            const observer = new IntersectionObserver(([{ isIntersecting }]) => {
                if(isIntersecting) {
                    observer.unobserve(lis[i])
                    lis[i].className = 'active'
                }
            }, {
                // 交叉多少开始加载 比列
                threshold: 0.2
            })
            observer.observe(lis[i])
            }

效果:

主要看效果哈,录屏软件有问题