亚伦影音工作室 发表于 2025-11-8 18:43

css视差滚动，炫酷鼠标移入移出效果

本帖最后由 亚伦影音工作室 于 2025-11-12 20:19 编辑 <br /><br /><style>
#papa{
        position: relative;
            width: 1286px;
            height: 720px;
            margin-left: -300px;
            margin-top: 10px;
            overflow: hidden;z-index:12345;
            background:#445500;
        }
#parallax {
position: absolute;
width: 1286px;
height: 720px;
background: url(https://www.kkkkmmmm.com/wj/234016/2025/11/12/98d8e5dd4cbc74070d02987ca88e4451.png)no-repeat center/50% , url(https://www.kkkkmmmm.com/wj/234017/2025/11/12/dc3a622faffabe016a59c57301863171.png)no-repeat center/50% , url(https://www.kkkkmmmm.com/wj/234018/2025/11/12/89f500141a94a1bdb65b78f0b34f6680.png)no-repeat center/50%;
overflow: hidden;
}
#tu{
position: absolute;
top: 0%;
left: 0%; width: 1286px;
height: 720px;
background:url(https://pic1.imgdb.cn/item/68625f9658cb8da5c87f755d.jpg)no-repeat center/cover;
text-transform: uppercase;
opacity: .4;

}
</style>
<div id="papa">
<div id="parallax"><div id="tu"></div></div>
</div>
<script>
(function() {
    // Add event listener
    document.addEventListener("mousemove", parallax);
    const elem = document.querySelector("#parallax");
    // Magic happens here
    function parallax(e) {
      let _w = window.innerWidth/2;
      let _h = window.innerHeight/2;
      let _mouseX = e.clientX;
      let _mouseY = e.clientY;
      let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`;
      let _depth2 = `${50 - (_mouseX - _w) * 0.05}% ${50 - (_mouseY - _h) * 0.05}%`;
      let _depth3 = `${50 - (_mouseX - _w) * 0.1}% ${50 - (_mouseY - _h) * 0.1}%`;
      let x = `${_depth3}, ${_depth2}, ${_depth1}`;
      console.log(x);
      elem.style.backgroundPosition = x;
    }

})();
</script>

红影 发表于 2025-11-8 19:43

这个很奇妙，碎玻璃和破洞都随鼠标移动，那碎玻璃还挺有立体感的呢。{:4_199:}

红影 发表于 2025-11-8 19:44

去看了代码，原来碎玻璃是两个透明图，怪不得。这样的透明图组合很奇妙，随鼠标移动更奇妙。
欣赏亚伦老师好帖{:4_199:}

樵歌 发表于 2025-11-8 19:57

做得非常巧妙！{:4_199:}

杨帆 发表于 2025-11-9 21:54

晕~我这里怎么看不到鼠标移入移出效果呢{:4_197:}

老谟深虑 发表于 2025-11-11 18:52

            我这里也是看不到效果。
页: [1]
查看完整版本: css视差滚动，炫酷鼠标移入移出效果