保持视差固定但在滚动时更改图像？

Posted

技术标签:

【中文标题】保持视差固定但在滚动时更改图像？【英文标题】：Keep parallax fixed but change image on scroll? 【发布时间】：2021-08-07 03:00:31 【问题描述】：

我有一个 div，我想在其中滚动时更改图像和文本。我已经得到了一些方法，但我不知道如何保持“视差行”固定，但就像它的滚动一样？我有一个代码笔链接可以在下面提供帮助。 我的目标：当您在视差窗口中的任意位置滚动时，一切都应该粘住，但图像和文本会发生变化。我已经看到了一些很酷的使用视差的图像效果，所以这就是我学习它的原因。

codepen

<html>
<body>
  <!---------PARALLAX------->
  <div class="parallax-window">
    <div class="parallax-container">
      <div class="parallax-row">
        <div class="parallax-image-container">
          <img src="https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg" >
        </div>
        <div class="parallax-text">
          <h1>Title 1</h1>
          <h3>This is a description.
          </h3>
          <div class="mouseicon">
            <div class="mousewheel"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

/*PARALLAX */
.parallax-container::-webkit-scrollbar 
  display: none;

.parallax-window 
  position: relative;
  height: 400px;
  width: 100vw;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */

.parallax-container 
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  height: 1000px;
  background-color: rgb(221, 221, 221);

.parallax-row 
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 400px;
  width: 100%;

.parallax-image-container 
  display: block;
  height: inherit;

.parallax-image-container img 
  height: inherit;

.parallax-text 
  height: inherit;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  padding: 0em 4em;

.mouseicon 
  margin: 1em;
  display: flex;
  justify-content: center;
  width: 40px;
  height: 65px;
  border: solid 2px black;
  border-radius: 50px;

.mousewheel 
  width: 10px;
  height: 20px;
  background-color: black;
  border-radius: 50px;
  animation: scroll 1.5s infinite;

@keyframes scroll 
  0% 
    transform: translateY(0px);
    opacity: 0.5;
  
  100% 
    transform: translateY(5px);

JS

//-------PARALLAX SCROLL-------- //
const parallaxContainer = document.querySelector(".parallax-window");
const parallaxImage = document.querySelector(".parallax-image-container img");
parallaxContainer.scrolltop = 0;
const parallaxText = document.querySelector(".parallax-text h1")

var scrollHandler = function () 
  var newImageUrl = parallaxImage.src;

  var scrollTopParallax =
    parallaxContainer.scrollTop || parallaxContainer.scrollTop;
  if (scrollTopParallax > 100) 
    newImageUrl =
      "https://cdn.pixabay.com/photo/2016/11/29/07/16/balancing-1868051__480.jpg";
    parallaxText.innerHTML = "Title 2"
  
  if (scrollTopParallax < 100) 
    newImageUrl =
      "https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg";
    parallaxText.innerHTML = "Title 1"
  

  parallaxImage.src = newImageUrl;
  console.log("new: " + parallaxImage.src);
;
parallaxContainer.addEventListener("scroll", scrollHandler);

【问题讨论】：

【参考方案1】：

我已经用我自己的答案更新了我的 codepen。本质上是创建一个覆盖以滚动，然后根据该不可见的覆盖滚动位置更改元素。请参阅上面的 codepen 链接。

【讨论】：

以上是关于保持视差固定但在滚动时更改图像？的主要内容，如果未能解决你的问题，请参考以下文章

如何居中对齐/居中视差滚动内容？

在 UIScrollView 中滚动图像时添加视差效果

使用固定标题实现视差滚动 [Windows Phone]

视差滚动部分不固定/100% 高度？

告诉 UIPageViewController 何时滚动（用于图像的视差滚动）

仅在 Chrome/Safari 中滚动嵌入 Vimeo YouTube 或 Flash 时，浮动视差 DIV 背景图像会跳转