我研究了很多方法来完成任务的不同部分，比如改变滚动条的不透明度或改变滚动条的位置，但仍然不明白如何把它们放在一起。

我需要：

有一个容器，有4个字，在一行.只有1个字是可见的一次，然后另一个字必须出现从右向下滚动，反之亦然，对滚动等每个字.我创建了我想要的视觉例子：

第一步：

用户开始滚动，文本从右侧开始显示（示例显示文本1和文本2，但必须与行中的每个文本相关）

的数据

第二步：

用户继续滚动，text 2位于text 11的位置，而text 1的透明度变小

的

后续步骤：

在最后2张图片中显示，最后text 1随着opacity: 0;消失，text 2仍在其位置上

上面的示例显示在向下滚动上，但当用户向上滚动时，它应该以相反的方式工作，并且它应该工作，因此当用户滚动文本2并继续滚动时，文本3出现等等

不幸的是我不能分享我尝试的代码，因为我甚至无法想象如何处理这项任务。但我有一些想法，如创建2滑块当前和下一个或类似的东西。

我希望用图像描述足够清晰，因为我甚至不确定我是否理解正确

任意增加<body>元素的高度以引入垂直滚动。

body {
  height: 9999px;
  background-color: #333;
}

字符串
为单词创建一个容器。当我们滚动时，使用position: fixed将容器保持在屏幕上。

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
}

<div class="words">
</div>

添加文本，在容器内彼此顶部。

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

除了第一个到容器最右边的所有单词。170px是一个任意的量，足以将其他两个单词移出屏幕。通过将overflow: hidden应用于容器，将它们从可见性中删除。

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

.word:nth-child(n + 2) {
  transform: translate(calc(170px - 50%), -50%);
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

的字符串
编写JavaScript，在滚动时更新CSS变量。

const container = document.querySelector('.words');

window.addEventListener('scroll', () => {
  container.style.setProperty('--scroll', window.scrollY);
});

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

.word:nth-child(n + 2) {
  transform: translate(calc(170px - 50%), -50%);
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

使用此CSS变量应用opacity并调整.word元素的transform属性。此示例将文档按原样滚动的像素数传递给--scroll。您可能希望处理此值以调整影响CSS的量，或者您也可以调整CSS中的数学运算。

const container = document.querySelector('.words');

window.addEventListener('scroll', () => {
  container.style.setProperty('--scroll', window.scrollY);
});

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
  --segment-length: 200;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  opacity: calc(((var(--opacity-point) * var(--segment-length)) - var(--scroll, 0)) / var(--segment-length));
}

.word:nth-child(n + 2) {
  transform: translate(calc(clamp(0%, 170px * ((var(--translate-point) * var(--segment-length)) - var(--scroll, 0)) / var(--segment-length), 170px) - 50%), -50%);
}

.word:nth-child(1) {
  --opacity-point: 1;
}

.word:nth-child(2) {
  --opacity-point: 2;
  --translate-point: 1;
}

.word:nth-child(3) {
  --opacity-point: 3;
  --translate-point: 2;
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

这段代码在每滚动200px时在单词之间转换。这由我们的--segment-length值表示。

javascript 平滑滚动时的文本位置和不透明度变化

我需要：

1条答案

相关问题

热门标签

最新问答