博客详情 | LS Blog

js视差学习（鼠标视差）

只用css产生的视差太过简陋，这里加入css使得视差效果更佳。

html

<!DOCTYPE html>
<html lang="zh-cn">
<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>js视差学习</title>
    <style>
        html{
            height: 100%;
            overflow: hidden;
        }
        body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            /* 基本布局 */
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;

            /* 结合数据属性完成3d化 */
            --orgin-width: 50%;
            --orgin-height: 50%;
            overflow-y: auto;
            overflow-x: auto;
            perspective: 1px;
            perspective-origin: var(--orgin-width) var(--orgin-height);
            transform-style: preserve-3d;

            /* 添加动画 */
            transition: perspective-origin .2s ease;
        }
        .item{
            /* 根据数据属性生成每个元素的位置 */
            height: var(--r);
            width: var(--r);
            background: var(--background);
            border-radius: 50%;
            position: relative;
            top: var(--r);
            left: var(--r);
            transform: translate3d(var(--r),var(--r),calc(var(--speed)*-1px)) scale(var(--speed));
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item item1" data-speed="1" data-r="40" data-bgc="blue"></div>
        <div class="item item2" data-speed="2" data-r="20" data-bgc="black"></div>
        <div class="item item3" data-speed="3" data-r="60" data-bgc="yellow"></div>
        <div class="item item4" data-speed="4" data-r="30" data-bgc="pink"></div>
        <div class="item item5" data-speed="5" data-r="20" data-bgc="red"></div>
    </div>
    <script>
        // 使用js使得数据属性可以在css中使用
        document.querySelectorAll('.item').forEach(e => {
            let bgc = e.getAttribute('data-bgc');
            let r = e.getAttribute('data-r');
            let speed = e.getAttribute('data-speed');
            e.style = `--background: ${bgc}; --r: ${r}px; --speed: ${speed}`;
        });

        // 使用鼠标移动监听，动态改变容器视点
        document.addEventListener('mousemove',function (e) {
            console.log(e.pageY/10);
            console.log(e.pageX/10);
            document.getElementsByClassName('container')[0].style = 
            `
            --orgin-width: ${e.pageX/10}%;
            --orgin-height: ${e.pageY/7}%;
            `;
        });

        // 监听鼠标离开，离开时复原
        document.addEventListener('mouseleave',function (e) {
            document.getElementsByClassName('container')[0].style = 
            `
            --orgin-width: 50%;
            --orgin-height: 50%;
            `;
        });
    </script>
</body>
</html>

这是一段关于鼠标的视差特效，用到了html5新特性数据属性，但是目前css3中attr()对数据属性的解析新特性并未被大多数浏览器采纳，故使用js代码完成css变量的生成。

js视差学习（鼠标视差） ​

js视差学习（鼠标视差）