Question

所以我想要实现的是构建一个 HTML 页面，该页面的背景移动方向与鼠标相反。问题是，我想创建双层图像，背景和前景。前景图像较小，而背景图像是全角。到目前为止，这是我的代码：

<!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>trymoving</title>

    <style type="text/css">
        body
        {
            margin:0;
            padding:0;
        }

        section
        {
            height:100vh;
            background:url(background-image.png);
            overflow:hidden;
        }

        .sec2 {
            width: 100%;
            position: relative;
            top: 0;
            left: 0;
            background:url('foreground-image.png');
        }
        
    </style>
</head>

<body>
    <section class="first">
        <div class="sec2"></div>
    </section>

    <script>
        const section = document.getElementsByTagName('section')[0];

        section.addEventListener('mousemove', (e) =>{
            const moveX = (e.pageX * -1 / 40);
            const moveY = (e.pageY * -1 / 40);

            section.style.backgroundPosition = moveX + 'px ' + moveY + 'px';
        });
    
        const section2 = document.getElementsByClassName('sec2')[0];

        section2.addEventListener('mousemove', (e) =>{
            const moveX = (e.pageX * -1 / 10);
            const moveY = (e.pageY * -1 / 10);

            section2.style.backgroundPosition = moveX + 'px ' + moveY + 'px';
        });
    </script>
</body>

</html>

我目前的问题是前景图像左对齐。我希望它在中间。此外，我想让它在多种屏幕尺寸上都具有响应性。

Answer 1

我不确定这是否正是您所追求的，但这会使背景图像居中并向相反方向移动图像

const moveX = ((e.pageX) - (window.innerWidth / 2)) / 30;
const moveY = ((e.pageY)  - (window.innerHeight / 2)) / 30;
section.style.backgroundPosition = (50 - moveX + "% ") + (50 - moveY + "%");

Answer 2

这需要对 css、html 和 javascript 进行一些调整。

将内部图像居中：我用 display: flex 将内部图像居中，因为您也尝试过...您将其应用于子元素，但需要在父元素上设置

移动前景图像： 我用 section 元素替换了内部的 img 元素。背景仍然在编辑 backgroundPosition 时移动，但前景图像需要通过 JavaScript 编辑 top 和 left 移动。为此，您需要在前景图像上设置 position: relative。

调整事件监听器：您只需要监听父 mousemove 元素上的 section 事件。见下面的代码：

<head>
    ...
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }

      #background {
        height: 100vh;
        background: url(https://wallpapercave.com/wp/12oNQS9.jpg);
        overflow: hidden;
        background-repeat: no-repeat;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      #foreground {
        position: relative;
      }
    </style>
  </head>

  <body>
    <section id="background">
      <img id="foreground" src="data:image/jpg;base64,/9j/..."></div>
    </section>

    <script>
      const backgroundEl = document.getElementById("background");
      const foregroundEl = document.getElementById("foreground");

      backgroundEl.addEventListener("mousemove", (e) => {
        const moveBackgroundX = (e.pageX * -1) / 40;
        const moveBackgroundY = (e.pageY * -1) / 40;

        const moveForegroundX = (e.pageX * -1) / 10;
        const moveForegroundY = (e.pageY * -1) / 10;

        backgroundEl.style.backgroundPosition = moveBackgroundX + "px " + moveBackgroundY + "px";
        foregroundEl.style.left = moveForegroundX + "px ";
        foregroundEl.style.top = moveForegroundY + "px ";
      });
    </script>
  </body>

我也updated your codesandbox

双图像背景在鼠标悬停时移动

2 个答案: