鼠标移动图像层效果答案

【问题标题】：Mouse-movement image-layer effect鼠标移动图像层效果
【发布时间】：2022-01-14 02:05:57
【问题描述】：

我想创建以下效果：

有两个全屏图像重叠在一起，但只有一个可见。当您移动鼠标时，第二个鼠标会显示在鼠标所在的圆圈内。

我知道如何使用 JS 创建跟随鼠标的圆圈。至于图像叠加层，我很难过。我摆弄了伪元素、剪辑路径和不透明度、径向渐变、多个背景——但无济于事。

径向渐变在这里实际上是理想的，但据我所知，它只接受颜色，而不接受图像。

也许是第三个覆盖层？有任何想法吗？（如果已经有一个 CodePen 可以做到这一点并且我错过了，请链接到它）。

谢谢大家！

【问题讨论】：

你能包含所有与问题有关的代码吗？
没有代码。在这个问题中，我要求社区帮助我想出一个代码。
您可以查看画布，也可以查看蒙版。
你还需要这个吗？也许我可以做到 Pixie（我有一个小想法）如果你不需要它，我会回答另一个答案......但这看起来很有趣和复杂
是的，我还需要这个。我只是在 28 分钟前发布的...

标签： css image overlay

【解决方案1】：

简短回答：（以下所有代码均已注释）

我在<div> 中使用了background 属性，而不是使用<img> 标记...
诀窍是当你使用 background-attachment: fixed;

在此示例中，我使用了 Windows 11 操作系统 的 2 个背景，您可以看到真正的诀窍！一暗一亮……

详细解释：

所以<div> 并分配了background-image 到灯光图像的URL

这里的问题是：当 div 与 JS 一起移动时，图像也会移动......
但我找到了解决方案

使图像fixed，使图像始终在同一位置，即使图像正在移动

#circle {
    background-attachment: fixed;
 
    /* your code */
}

这里的问题是：图像没有响应，
但我找到了解决方案：

将图像大小设置为cover，以便根据设备的视口自动调整图像的大小和高度。

#circle {
    background-size: cover;
 
    /* your code */
}

移动很简单...因为我们可以使用 Javascript，eventListener 和 mousemove

document.addEventListener('mousemove', (e) => {
   /* your code */
});

现在解决了所有的问题，但是，我会在下面放一些文档

可以帮助您的文档：

这里是代码

代码可能看起来很长，
但不是真的因为我加了很多cmets所以大家都能看懂

let circle = document.getElementById('circle');

// on mouse move move the circle
document.addEventListener('mousemove', (e) => {
  // make the image move relative to the mouse (make sure that in css you applied position: relative; to the div)
  circle.style.left = e.pageX - 100 + 'px'; // 100 is half height of circle, so the cursor is in the middle
  circle.style.top = e.pageY - 100 + 'px';
});

body {
  margin: 0;
  overflow: hidden;
}

#bg-image {
  position: fixed;
  height: 100vh;
  width: 100vw;
  /*make the background responsive*/
  object-fit: cover;
  /* under the circle div*/
  z-index: -1;
}

#circle {
  height: 200px;
  width: 200px;
  /* make the the div circle */
  border-radius: 50%;
  /* important using relative for using top and left in javascript */
  position: relative;
  /* change the url with the link of image you want */
  background-image: url(https://laaouatni.github.io/w11-clone/images/0light.jpg);
  /*center the background */
  background-position: center;
  background-repeat: no-repeat;
  /* TRICK: making the background responsive*/
  background-size: cover;
  /* TRICK: the MAGIC is HERE make the image fixed, so is not moving  */
  background-attachment: fixed;
}

<!-- background image -->
<img id="bg-image" src=" https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt=" ">

<!-- the circle, and moved with javascript -->
<div id="circle"></div>

请在完整模式下查看，
为了获得更好的结果...您可以将值更改为 vh 或 vw 以提高响应速度。

希望对你有帮助。

【讨论】：

感恩米勒！你太棒了。我几年前看过的一些教程中有“附件：已修复”，现在它派上了用场。喜欢你的写作风格，顺便说一句（“......但我找到了解决方案”）。这就是精神。
grazie, quindi parli italiano。你好！ piacere di esserti d'aiuto！继续！

【解决方案2】：

您可以在 CSS 中使用径向渐变作为蒙版。

这个 sn-p 有一个 'underneath' 元素，它实际上在 body 元素的背景之上。

遮罩图像除了不透明部分下方的背景部分外，其余部分都被剪掉了。

显然，您需要更改尺寸以适合您的用例。

此外，mousemove 确实如此（例如，不查看是否为 mousedown）只是为了提供一个简单的演示。

请注意，某些浏览器仍需要 -webkit- 前缀作为掩码。

<!doctype html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      margin: 0;
      background-image: url(https://picsum.photos/id/1016/1024/768);
      width: 100vw;
      height: 100vh;
      background-size: cover;
      background-position: center;
    }
    
    .underneath {
      position: absolute;
      width: 100%;
      height: 100%;
      --x: 50vw;
      --y: 50vh;
      background-image: url(https://picsum.photos/id/1015/1024/768);
      background-size: cover;
      background-position: center;
      -webkit-mask-image: radial-gradient(black 0 15vmin, transparent 15vmin 30vmin);
      -webkit-mask-size: 30vmin 30vmin;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: calc(var(--x) - 15vmin) calc(var(--y) - 15vmin);
      mask-image: radial-gradient(black 0 15vmin, transparent 15vmin 30vmin);
      mask-size: 30vmin 30vmin;
      mask-repeat: no-repeat;
      mask-position: calc(var(--x) - 15vmin) calc(var(--y) - 15vmin);
    }
  </style>
</head>

<body>
  <div class="underneath"></div>
  <script>
    const underneath = document.querySelector('.underneath');
    document.body.addEventListener('mousemove', function() {
      underneath.style.setProperty('--x', event.clientX + 'px');
      underneath.style.setProperty('--y', event.clientY + 'px');

    });
  </script>
</body>

【讨论】：

谢谢，这看起来很棒。如果我没记错的话，Chrome 对某些 CSS 掩码功能的支持是有限的，即使使用 webkit 前缀也是如此。但我正在 Chrome 中观看你的 sn-p，它看起来很完美。再次感谢！