SVG Logo动画

Question

所以我有一个客户端徽标，我想在滚动动画。假设徽标是DANIEL。当用户向下滚动页面时，我希望字母之间的间距扩大，因此它最终会成为D A N I E L.我已经看到如何使用常规文本执行此操作，但这将是我所说的SVG徽标。我一直在寻找购买没找到任何东西。还需要适合移动设备。有什么提示吗？

Answer 1

这其实很简单。您只需要观察滚动事件，然后根据您滚动页面的距离更新<text>元素。

我使用letter-spacing表示属性实现了字母间距。

window.addEventListener("scroll", function() {
  document.getElementById("mytext").setAttribute("letter-spacing", (window.scrollY / window.outerHeight) + "em");
});

body {
  height: 2000px;
}

svg {
  position: fixed;
}

<svg viewBox="0 0 600 100">
  <text id="mytext" x="300" y="70" font-size="50" text-anchor="middle">DANIEL</text>
</svg>

更新

对于其他非文本元素，如<path>等，您需要采取略微不同的认可。你需要用transform物理移动它们。

这是一个快速演示。您需要调整它以使对象移动到您想要的位置。

var EXPAND_AMOUNT = 40;

window.addEventListener("scroll", function() {
  var scrollPercent = window.scrollY / window.outerHeight;
  document.getElementById("obj1").setAttribute("transform", "translate("+(scrollPercent * 3 * -EXPAND_AMOUNT)+",0)");
  document.getElementById("obj2").setAttribute("transform", "translate("+(scrollPercent * 2 * -EXPAND_AMOUNT)+",0)");
  document.getElementById("obj3").setAttribute("transform", "translate("+(scrollPercent * -EXPAND_AMOUNT)+",0)");
  document.getElementById("obj4").setAttribute("transform", "translate("+(scrollPercent * EXPAND_AMOUNT)+",0)");
  document.getElementById("obj5").setAttribute("transform", "translate("+(scrollPercent * 2 * EXPAND_AMOUNT)+",0)");
  document.getElementById("obj6").setAttribute("transform", "translate("+(scrollPercent * 3 * EXPAND_AMOUNT)+",0)");
});

body {
  height: 2000px;
}

svg {
  position: fixed;
}

<svg viewBox="0 0 600 100">
  <rect id="obj1" x="165" y="25" width="40" height="50"/>
  <rect id="obj2" x="210" y="25" width="40" height="50"/>
  <rect id="obj3" x="255" y="25" width="40" height="50"/>
  <rect id="obj4" x="300" y="25" width="40" height="50"/>
  <rect id="obj5" x="345" y="25" width="40" height="50"/>
  <rect id="obj6" x="390" y="25" width="40" height="50"/>
</svg>