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

问题描述

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

把它变成了一个代码笔。希望有人可以帮助我。谢谢！

这是我指向 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,1 -200,0 z" transform="rotate(225,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,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,startOffset) =>
  textPathB.setAttribute("startOffset",percent * 10 + startOffset);

textPathB.setAttribute("startOffset",startOffset));
});

解决方法

您复制了变量的名称

把第二个改成这样：

/* 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));
});