元素进入视口动画

满杯百香果*

已于 2023-11-10 18:17:42 修改

阅读量135

点赞数

文章标签：前端 javascript html css

于 2023-11-10 18:08:21 首次发布

本文链接：https://blog.csdn.net/jksking_/article/details/134338611

版权

元素进入视口动画

当元素出现在视口中时，会有一个过度动画

一、垂直

1、代码

<!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>元素进入视口动画(垂直)</title>
    <style>
        .box{
            width: 100vw;
        }
        .item{
            width: 500px;
            height: 70px;
            border-radius: 20px;
            background-color: #a0cfff;
            margin: 20px auto;
            transition: all 0.8s;
        }
        .item:nth-child(2n) {
            background-color: #fab6b6;
        }
        .item:nth-child(3n) {
            background-color: #fcbd71;
        }
        .item:nth-child(4n) {
            background-color: #71d5a1;
        }
        .item:nth-child(5n) {
            background-color: #c8c9cc;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <script>
        // 获取所有 .item元素
        let boxs = document.querySelectorAll('.item');
        // 此时的 boxs 并不是数组，需要转换成数组，Array.from() 方法可以将类数组对象转换成数组
        boxs = Array.from(boxs).filter(item => {
            let rect = item.getBoundingClientRect();
            if(rect.bottom < 0 || rect.top > window.innerHeight) {
                // 当前视口不可见的元素 往下偏移50px 透明度为0.6
                item.style.transform = 'translateY(60px)';
                item.style.opacity = '0.5';
                return item;
            }
        })

        // 创建一个观察者
        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                // 当元素出现在视口中时，isIntersecting值为true
                if(entry.isIntersecting){
                    // console.log('box元素出现在视口');
                    entry.target.style.transform = 'translateY(0)'
                    entry.target.style.opacity = '1'
                    // 如果你只想观察一次，你可以在这里停止观察
                    // observer.unobserve(entry.target)
                }
                
            });
        });

        boxs.forEach(item => observer.observe(item)); // 开始观察不在当前视口的元素

    </script>
</body>
</html>

2、效果

元素进入视口动画(垂直)

二、水平

1、代码

<!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>元素进入视口动画(水平)</title>
    <style>
        body {
            overflow-x: hidden;
        }
        .box{
            margin: 0 auto;
            display: flex;
            background-color: salmon;
        }
        .item{
            width: 200px;
            height: 50px;
            border-radius: 20px;
            background-color: #a0cfff;
            margin: 20px auto;
            transition: all 0.6s;
        }
        .item:nth-child(2n) {
            background-color: #fab6b6;
        }
        .item:nth-child(3n) {
            background-color: #fcbd71;
        }
        .item:nth-child(4n) {
            background-color: #71d5a1;
        }
        .item:nth-child(5n) {
            background-color: #c8c9cc;
        }
        .fill {
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="fill"></div>
    <div class="box">
        <div class="item"></div>    
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="fill"></div>

    <script>
        // 获取所有 .item元素
        let boxs = document.querySelectorAll('.item');

        // 创建一个观察者
        let observer = new IntersectionObserver((entries, observer) => {
            let i = 0;
            entries.forEach(entry => {
                // 当元素出现在视口中时，isIntersecting值为true
                if(entry.isIntersecting){
                    setTimeout(() => {
                        entry.target.style.transform = 'translateY(0)'
                        entry.target.style.opacity = '1'
                        // 如果你只想观察一次，你可以在这里停止观察
                        // observer.unobserve(entry.target)
                    }, 130 * (i++));
                }else {
                    entry.target.style.transform = 'translateY(50px)'
                    entry.target.style.opacity = '0.1'
                }
            });
        });

        boxs.forEach(item => observer.observe(item)); // 开始观察不在当前视口的元素

    </script>
</body>
</html>