css 在滚动条上按字母更改文本字母的颜色[关闭]

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
18小时前关闭
Improve this question
我试图从一个网站重新创建这种风格：https://www.polestar.com/us/polestar-1/在第三部分，标题为“精度”，这是一种风格，我想重新创建。比如它如何将段落文本颜色从白色变为RGB（211，188，141）。并在完成更改文本颜色时移除粘性位置。
这是怎么回事
我尝试使用相同的方法，因为他们没有，使用不同的元素，为每个字母和隐藏的信白色字母，因为我们滚动，但我不确定与js

一个例子。我试着仔细地注解JS中发生的每件事。

// at what yPosition should we stick?
const stickyAtYPos = 100;
// minumum time between coloring a character
const minTimeColorCharMs = 50;

// browser, do not remember scroll positions for me
history.scrollRestoration = "manual";

// a flag that is set later (yPos to lock the scroll at)
// + which sticky that is currently locked
// + lastTime we colored a span
let lockedAt, lockedSticky, lastColorTime = 0;

// divide text inside .stickyColor elements
// into one span per character
[...document.querySelectorAll('.stickyColor')]
  .forEach(x => x.innerHTML = '<span>'
    + x.innerText.trim().split('')
      .join('</span><span>') + '</span>');

// listen to the scroll event of the window
window.addEventListener('scroll', e => {
  // if scroll is locked and the user scrolls down 
  // and time enough between coloring characters
  if (lockedAt && window.scrollY > lockedAt &&
    (!lastColorTime || Date.now() - lastColorTime > minTimeColorCharMs)) {
    // find the first uncolored span
    let span = [...lockedSticky.querySelectorAll('span')]
      .find(x => !x.classList.contains('newColor'));
    // color it and remember when we did that
    span && span.classList.add('newColor') || (lastColorTime = Date.now());
    // if no more spans to color, release the scroll lock
    !span && (lockedAt = false);
  }
  // if locked, then don't allow scroll down
  lockedAt && window.scrollY > lockedAt && window.scrollTo(0, lockedAt);
  // get the stickycolor elements
  let stickies = [...document.querySelectorAll('.stickyColor')];
  // loop through them
  stickies.forEach((sticky, i) => {
    // if we have a lock already do nothing
    if (lockedAt) { return; }
    // check if the sticky should stick :)
    if (sticky.getBoundingClientRect().top < stickyAtYPos
      && !sticky.classList.contains('locked')) {
      // remember y pos to lock scroll at + locked sticky
      lockedAt = window.scrollY;
      lockedSticky = sticky;
      // add class signaling that we are locked
      sticky.classList.add('locked');
    }
  });
});

body {
  background-color: black;
  margin: 20px 30px;
  color: white;
}

p.stickyColor {
  font-family: 'Verdana';
  margin-top: 200px;
  top: 100px;
  transition: color 1s;
}

p.stickyColor span {
  color: white;
  transition: color 0.1s;
}

p.stickyColor span.newColor {
  color: rgb(192, 143, 35);
}

.big {
  height: 1000px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Color</title>
</head>

<body>
  <p>Please scroll down...</p>
  <p class="stickyColor">Hello there! Nice to see you!</p>
  <p class="stickyColor">Let's play a game of colors...</p>
  <p class="stickyColor">Goodbye everyone! That's all.</p>
  <div class="big"></div>
</body>

</html>

注意 *：虽然你在这里看不到它，但脚本需要作为主体中的最后一个元素包含在内，因为所有元素都需要在运行之前在DOM中，我不会等待文档准备就绪。

css 在滚动条上按字母更改文本字母的颜色[关闭]

1条答案

相关问题

热门标签

最新问答