Question

嗨，我尝试实现像 https://ludmillamaury.com/ 这样的动画。当您将鼠标悬停在“选定作品”部分上时，会显示一个图像。我试着看看他们用了什么，但我没有找到。我认为它是一个 js 库，但我没有找到哪个。他有同样的效果：https://olivierguillard.dev/

我从几个小时以来一直在寻找，但我什至不知道应该寻找哪些关键字。也许有人可以帮助我！

Answer 1

所以看起来它们有 <a> 标签，当您将鼠标悬停在它们上面时会做出反应。这可以使用 JavaScript 或 CSS 来完成，但您需要使用什么取决于您想要的反应是什么。

如果您想让图像像在这些网站上那样显示在光标周围，则必须使用事件侦听器或像其他人所说的那样使用光标。话虽如此，显示的网站没有使用光标，因为我仍然可以在那里看到我的普通指针光标。

这是我使用 JavaScript 和一些 CSS 实现的方法（图像显示并随光标移动，当您停止将鼠标悬停在链接上时消失）。

HTML：

<div id="container">
  <a href="" data-src="road.png" class="hover">
    <h1>Hover here!</h1>
  </a>
</div>

确保您的 href 是您希望人们点击它时转到的链接。如果您不想要链接（我假设您想要，因为您展示的两个网站都有它们），只需将其更改为 <div> 或其他内容。这里的 data-src 属性非常重要，因为它告诉 JavaScript 使用什么图片。还有其他方法可以做到这一点，但我个人最喜欢数据集，它最适合在 HTML 和 JavaScript 之间共享特定于元素的小信息位。你怎么称呼它并不重要，只要它以“data-”开头（例如data-image或data-href）。

CSS：

#container {
  position: relative;
}
.followMouse {
  z-index: -1;
  position: absolute;
}

followMouse 将成为我们在图像显示时添加到图像的类。我给它一个 z-index -1 所以它显示在页面上的其他元素后面（就像你的例子一样）。我也把它的位置absolute。这非常重要。这就是允许我们设置其坐标的原因，也是阻止它弄乱页面上其他样式的原因。并且为了确保它有效，将其父元素（在本例中，id 为“container”的元素）设置为 relative 位置总是一个好主意。

现在是有趣的部分！以下是使其工作的 JavaScript 事件侦听器：

for (let el of document.querySelectorAll('.hover')) {
  let image = new Image();
  image.src = el.dataset.src;
  image.className = "followMouse";
  el.addEventListener('mouseover',(e)=>{
    document.getElementById('container').append(image);
    image.style.left = `${e.x - (image.width/2)}px`;
    image.style.top = `${e.y - (image.height/2)}px`;
  })
  el.addEventListener('mouseout',(e)=>{
    image.remove();
  })
}
window.addEventListener('mousemove',(e)=> {
  let image = document.querySelector('.followMouse');
  if (image) {
    image.style.left = `${e.x - (image.width/2)}px`;
    image.style.top = `${e.y - (image.height/2)}px`;
  }
})

我使用 document.querySelectorAll 来获取所有以 'hover' 作为它们的类的元素，以防您想对多个元素执行此操作。为了获得 data-src 属性，我调用了元素的 dataset。基本上，先执行 el.dataset. ，然后在破折号之后执行任何操作（但如果您的 HTML 中有破折号，现在使用驼峰命名法）。然后我加载了一个以该属性作为源和 followMouse 作为其类的图像（在 JavaScript 中必须将其称为 className，因为 class 已经是一个东西）。我还没有将它附加到文档中，因为它会在用户将鼠标悬停在标签上之前显示出来。对于每个具有 'hover' 类的元素，我添加了两个事件侦听器：一个在鼠标悬停在元素上时将图像添加到容器中，另一个在鼠标移开时移除图像。在前者中，我还更改了图像的 style 属性，使其坐标为鼠标左侧宽度的一半和鼠标上方高度的一半——基本上，它会与鼠标一起显示在它的中心。由于我必须从元素的 CSS 样式中调用它的“left”和“top”CSS 属性，因此我必须传入一个字符串，其中包含我要发送的数字类型。例如，在 CSS 中是这样的：

el {
  left: 10px
}

所以我需要向 CSS 发送一个像“10px”这样的字符串。为此，我使用 `` 而不是普通的双引号或单引号，这样我就可以定义一个包含变量或 JavaScript 的字符串（${insert js here}）。

最后，我在整个窗口中添加了一个事件监听器来监听鼠标移动。这次我只调用了 querySelector 而不是 querySelectorAll 因为一次应该只有一个元素属于那个类。这个事件侦听器所做的就是检查图像是否存在（也就是说，如果您将鼠标悬停在执行此操作的元素上），如果存在，则更新图像的位置，使光标仍位于其中心。< /p>

Answer 2

<div class="portfolio">
          <a class="thecococlub" href="project/the-coco-club.html">  <div class="folio" >
                <p>001</p>
                <hr>
                <h3>THE COCO CLUB</h3>
            </div></a>
            <div class="folio" >
                <p>002</p>
                <hr>
                <h3>Tanja Kuriger Fotografie</h3>
            </div>
            <div class="folio">
                <p>003</p>
                <hr>
                <h3>Metall Schmiededesign</h3>
            </div>
            <div class="folio">
                <p>004</p>
                <hr>
                <h3>Creative & Code</h3>
            </div>

            <a href="project/maeva.html">
            <div class="folio">
                <p>005</p>
                <hr>
                <h3>Maeva</h3>
            </div></a>
            <div class="folio">
                <p>006</p>
                <hr>
                <h3>Mint Fashion</h3>
            </div>
        </div>

和CSS是：

.thecococlub::before{
  content: " ";
}

.thecococlub::after{
  content: " ";
  background-image: url("../img/thecococlub_500px.png");
  width: 500px;
}

Answer 3

最简单的方法是使用图像作为鼠标光标。您可以使用 SVG、PNG 或 GIF（虽然不是动画）。要在悬停时更改光标，您可以使用 :hover 伪选择器。

然而，鼠标光标图像将从“目标”开始显示在右下角。您可以使用像素偏移量将光标图像“居中”。

a:hover {
  cursor: url("https://via.placeholder.com/100.png") 50 50, auto;
}


/* for styling purpose only */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<a href="#">Hover me!</a>

将鼠标悬停在文本上并显示图像

3 个答案: