需要帮助创建一个鼠标悬停在图像链接上的链接，该链接隐藏顶部图像并显示底部图像，该图像在与顶部图像相同的空间内垂直滚动

Question

我希望达到与上看到的相同的效果：https://huemor.rocks/case-studies/

我需要帮助创建一个鼠标悬停在图像链接上的链接，该链接隐藏顶部图像并显示底部图像，该图像在与顶部图像相同的空间内垂直滚动

长垂直图像（400x755px或更长/更短）将在与顶部图像（400x328px）相同的图像尺寸下缓和和滚动

这是我迄今为止尝试过的代码笔：到目前为止的进展

function initProps(el) {
  const scrollMultiple = 5;
  var imageHeight = el.height;
  el.style.bottom = `-${imageHeight - 328}px`;
  el.style.setProperty("--top", `-${imageHeight - 328}px`);
  el.style.setProperty(
    "--animation-duration",
    `${scrollMultiple * imageHeight}ms`
  );
}

.container {
  padding: 10px 0;
}

.scrolling-window {
  border-radius: 10px;
  display: block;
  width: 400px;
  height: 328px;
  overflow: hidden;
  position: relative;
  border: 2px solid #b3b3b3;
  margin: 0 auto;
}

.scrolling-window img {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  top: 0;
  margin: 0;
  padding: 0;
  animation: fadeIn 1s;
  /*   filter: grayscale(100%); */
  transition-duration: 0.5s;
}

.scrolling-window:hover img {
  animation: scroll var(--animation-duration) cubic-bezier(0.5, 0, 0.5, 0) infinite alternate;
  animation-delay: 0.2s;
  filter: grayscale(0);
  cursor: pointer;
}

@keyframes scroll {
  /* to stop for a moment while reversing the animation */
  90% {
    bottom: 0px;
    top: var(--top);
  }
  100% {
    bottom: 0px;
    top: var(--top);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    top: -16px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

<div class="container">
  <div class="row">
    <div class="col mt-3">
      <!--<div class="main-image">
        <img src="https://place-hold.it/600x492/" alt="main-image" class="main-image">
      </div>-->
      <div class="scrolling-window">
        <img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
      </div>
    </div>
    <div class="col mt-3">
      <div class="scrolling-window">
        <img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
      </div>
    </div>
    <div class="col mt-3">
      <div class="scrolling-window">
        <img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
      </div>
    </div>
  </div>
</div>

Answer 1

您似乎只缺少显示顶部图像的功能，当目标悬停时，该图像预计会隐藏。

要实现这一点，您需要在 html 中添加这样的图片到您希望应用的同一容器中

.scrolling-window

：

<div class="scrolling-window">
    <img class="top-image" src="https://t.ly/tkht2" />    
    <img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
</div>

/* the -top-image is styled to be on top */
.scrolling-window .top-image {
    z-index: 1;
    transition: opacity 0.5s;
}

/* and vanish when hovered */
.scrolling-window:hover .top-image {
    opacity: 0;
}

CSS 样式

.top-image

出现在相应容器的顶部，悬停时它们将隐藏。

我在您的演示中添加此策略只是为了您的集合中的第一张图片以显示它的实际效果（另请考虑滚动图像的样式有一个附加设置为

z-index: 0;

）

function initProps(el) {
  const scrollMultiple = 5;
  var imageHeight = el.height;
  el.style.bottom = `-${imageHeight - 328}px`;
  el.style.setProperty("--top", `-${imageHeight - 328}px`);
  el.style.setProperty(
    "--animation-duration",
    `${scrollMultiple * imageHeight}ms`
  );
}

.container {
  padding: 10px 0;
}

.scrolling-window {
  border-radius: 10px;
  display: block;
  width: 400px;
  height: 328px;
  overflow: hidden;
  position: relative;
  border: 2px solid #b3b3b3;
  margin: 0 auto;
  
  z-index: 0; /* added */
}

.scrolling-window img {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  top: 0;
  margin: 0;
  padding: 0;
  animation: fadeIn 1s;
  /*   filter: grayscale(100%); */
  transition-duration: 0.5s;
}

.scrolling-window:hover img {
  animation: scroll var(--animation-duration) cubic-bezier(0.5, 0, 0.5, 0) infinite alternate;
  animation-delay: 0.2s;
  filter: grayscale(0);
  cursor: pointer;
}

@keyframes scroll {
  /* to stop for a moment while reversing the animation */
  90% {
    bottom: 0px;
    top: var(--top);
  }
  100% {
    bottom: 0px;
    top: var(--top);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    top: -16px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

.scrolling-window .top-image {
  z-index: 1;
  transition: opacity 0.5s;
}

.scrolling-window:hover .top-image {
  opacity: 0;
}

<div class="container">
  <div class="row">
    <div class="col mt-3">
      <!--<div class="main-image">
        <img src="https://place-hold.it/600x492/" alt="main-image" class="main-image">
      </div>-->
      <div class="scrolling-window">
        <img class="top-image" src="https://media.istockphoto.com/id/989977830/it/foto/corso-cors-cane-marrone.jpg?s=2048x2048&w=is&k=20&c=VdwtTcNIe6VXrYYMedLT_C3ZE2NYAMiWuKIDvWtaToU=" />
        <img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
      </div>
    </div>
    <div class="col mt-3">
      <div class="scrolling-window">
        <img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
      </div>
    </div>
    <div class="col mt-3">
      <div class="scrolling-window">
        <img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
      </div>
    </div>
  </div>
</div>