在弯曲的路径上移动文字

最近， 《纽约时报》上发表了一篇引人入胜的文章，详细介绍了伊丽莎白·沃伦（Elizabeth Warren）及其团队为粉丝自拍照而雇用的独特方法。有趣的是，这些不是传统自拍照，因为摄影师捕捉了图像。这篇文章巧妙地包含了一个移动文本元素，这是读者卷轴时沿页面优雅弯曲的短语。让我们探讨如何实现这种效果。

视觉演示：

曲线文本是使用SVG实现的。一个<path></path>元素定义曲线，并且<textpath></textpath>将文本沿此路径定位：

<svg height="160px" viewbox="0 0 1098.72 89.55" width="100%"><path d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19" fill="transparent"></path><text style="transform:translate3d(0,0,0);" width="100%"><textpath alignment-baseline="top" style="transform:translate3d(0,0,0);" xlink:href="#curve"> *图片在技术上不是自拍照。</textpath></text></svg>

动画是通过操纵开始的startOffset属属性来控制的<textpath></textpath>元素。虽然确切的《纽约时报》实施仍然未公开，但简化的方法使用JavaScript跟踪页面滚动位置并动态调整startOffset ，从而创造了滚动文本效果。

 const textPath = document.queryselector（“＃text-path”）;

const h = document.documentelement， 
      b = document。
      st ='scrolltop'，
      sh ='scrollheight';

document.addeventlistener（“ scroll”，e => {
  令百分比=（h [st] || b [st]） /（（（h [sh] || b [sh]）） -  h.clientheight） * 100;
  textpath.setAttribute（“ startOffset”，（ - ％ * 40）1200）
}）;

这种弯曲的移动文本提供了视觉上引人注目且令人难忘的设计元素，这是网络上不经常看到的技术，使其特别引人注目。

以上是在弯曲的路径上移动文字的详细内容。更多信息请关注PHP中文网其他相关文章！