时间戳

首页 > 解决方案 > 视差层被拆分，您可以看到视差部分和下一个内容部分之间的层

javascript - 视差层被拆分，您可以看到视差部分和下一个内容部分之间的层

问题描述

我正在尝试创建一个受页面启发的网站：https ://www.firewatchgame.com/问题是当我缩小屏幕时，会发生这里发生的事情

document.querySelectorAll(".scene").forEach((elem) => {
  const modifier = elem.getAttribute("data-modifier");

  basicScroll
    .create({
      elem: elem,
      from: 0,
      to: 519,
      direct: true,
      props: {
        "--translateY": {
          from: "0",
          to: `${10 * modifier}px`,
        },
      },
    })
    .start();
});
body {
  height: 2000px;
  background: black;
}

.scene {
  position: absolute;
  width: 100%;
  transform: translateY(var(--translateY));
  will-change: transform;
}
<div id="parallax">
  <img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
  <img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
  <img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
  <img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
  <img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
  <img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
</div>
<div id="test">
  <font color="red">This is some text!asdfasd</font>
</div>

<script src="https://s.electerious.com/basicScroll/dist/basicScroll.min.js"></script>

https://jsfiddle.net/ufcqw2xh/

它在视差层和下一个部分之间打开一个部分，并查看视差层。我的问题是：我该如何修复它，或者如何使屏幕更小，视差层的作用就像火表一样，图像仅水平缩短。非常感谢您的回答。

标签： javascripthtmlcss

解决方案

要求是保持图像的垂直尺寸，并根据需要改变其宽度。在场景和背景之间的某些视口大小上显示“间隙”也存在问题（较低的场景显示为一种黄色）。

如果我们width: 100%将场景的设置更改min-width: 100%为高度保持不变，宽度会随着视口的变化而缩短。“差距”问题消失了。

这不是一个绝对完整的答案，因为缩短是从右侧开始的（实际上适合给定场景，因为狼在左侧）但是对于更通用的解决方案，您可能需要进一步调查，也许使用 object-fit in某种方式。

另请注意，文档说计算应该在任何调整大小时运行。这似乎没有影响此更改，但可能对其他更改很重要。

document.querySelectorAll(".scene").forEach((elem) => {
  const modifier = elem.getAttribute("data-modifier");

  basicScroll
    .create({
      elem: elem,
      from: 0,
      to: 519,
      direct: true,
      props: {
        "--translateY": {
          from: "0",
          to: `${10 * modifier}px`,
        },
      },
    })
    .start();
});
body {
  height: 2000px;
  background: black;
}

.scene {
  position: absolute;
  min-width: 100%;
  transform: translateY(var(--translateY));
  will-change: transform;
  }
<div id="parallax">
  <img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
  <img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
  <img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
  <img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
  <img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
  <img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
</div>
<div id="test">
  <font color="red">This is some text!asdfasd</font>
</div>

<script src="https://s.electerious.com/basicScroll/dist/basicScroll.min.js"></script>

推荐阅读