滚动 svg 上的动画文本，不能同时激活两个形状？

Question

我在卷轴上制作了这个动画文本，我想要一个心形和一个三角形。首先我不能把它变成一个三角形。其次，我可以让两种形状同时工作。当我删除其中一个 javascript 部分时，它起作用了。

把它变成了代码笔。希望有人能帮助我。谢谢！

这是我的 link 到 https://codepen.io/pen/bGwyKpM。

否则也在这里：

HTML

<!-- Heart -->

  <div class="container1">
      <svg id="heart" data-name="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape" id="shape" d="M-400 32 v-150 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0 z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape" id="textPath"> THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • </textPath>
          </text>
      </svg>
  </div>
  <!-- Triangle -->
  <div class="container2">
      <svg id="hearttwo" data-name="hearttwo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape1" id="shape1" d="M-400 32 v-150 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0 z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape1" id="textPathB"> THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • </textPath>
          </text>
      </svg>
  </div>

CSS


/* heart shape */
.shape {
  fill: none;
  /* stroke: white; */
}

#heart {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPath {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container1 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

/* 2 heart shape */
.shape1 {
  fill: none;
  /* stroke: white; */
}

#hearttwo {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPathB {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container2 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

Java


const textPath = document.querySelector("#textPath");

const a = document.documentElement,
  b = document.body,
  st = "scrollTop",
  sh = "scrollHeight",
  startOffset = 0;

const offsetOnScroll = (percent, startOffset) =>
  textPath.setAttribute("startOffset", percent * 10 + startOffset);

textPath.setAttribute("startOffset", startOffset);

document.addEventListener("scroll", (event) => {
  let percent = ((a[st] || b[st]) / ((a[sh] || b[sh]) - a.clientHeight)) * 100;
  window.requestAnimationFrame(() => offsetOnScroll(percent * -1, startOffset));
});


/* number two; */
const textPathB = document.querySelector("#textPathB");

const a = document.documentElement,
  b = document.body,
  st = "scrollTop",
  sh = "scrollHeight",
  startOffset = 0;

const offsetOnScroll = (percent, startOffset) =>
  textPathB.setAttribute("startOffset", percent * 10 + startOffset);

textPathB.setAttribute("startOffset", startOffset);

document.addEventListener("scroll", (event) => {
  let percent = ((a[st] || b[st]) / ((a[sh] || b[sh]) - a.clientHeight)) * 100;
  window.requestAnimationFrame(() => offsetOnScroll(percent * -1, startOffset));
});

Answer 1

您重复了变量的名称

将二号改为：

/* number two; */
const textPathB = document.querySelector("#textPathB");
const aB = document.documentElement,
    bB = document.body,
    stB = "scrollTop",
    shB = "scrollHeight",
    startOffsetB = 0;
const offsetOnScrollB = (percent, startOffsetB) =>
    textPathB.setAttribute("startOffset", percent * 10 + startOffset);
    textPathB.setAttribute("startOffset", startOffset);
document.addEventListener("scroll", (event) => {
    let percent = ((aB[stB] || bB[stB]) / ((aB[shB] || bB[shB]) - aB.clientHeight)) * 100;
window.requestAnimationFrame(() => offsetOnScrollB(percent * -1, startOffset));
});

滚动 svg 上的动画文本，不能同时激活两个形状？

Animate text on scroll svg, can't active both two shapes at the same time?

javascript

css

svg

scroll

svg-animate