为什么我的Javascript动画不能在Wordpress中工作

Question

我遵循了一个很棒的教程，在Wordpress网站上实现了"SVG文本路径动画"，但现在我完全陷入了困境。我的SVG和文本路径正常工作，但javascript动画不正常。

您可以看到SVG路径和textPath"测试测试"；这里没有任何工作动画。

以下是我使用WP页眉和页脚实现的代码：在标题中，我有以下内容：

<script>
var textPath = document.querySelector('#text-path');

function updateTextPathOffset(offset) {
textPath.setAttribute('startOffset', offset);
}

function onScroll() {
requestAnimationFrame(function() {
updateTextPathOffset(window.scrollY * 1.5);
});
}

window.addEventListener('scroll', onScroll);

</script>

在身体里我有这个：

<svg id="svg-path" xmlns="http://www.w3.org/2000/svg" width="1440" height="3500" xml:space="preserve">
<path id="our-text" fill="none" stroke="#000" stroke-width="10" stroke-miterlimit="10" d="M1237.52 0v541.86c0 14.27-11.57 25.83-25.83 25.83H415.53c-14.27 0-25.83 11.57-25.83 25.83v365.73c0 14.27 11.57 25.83 25.83 25.83h252.68c14.27 0 25.83 11.57 25.83 25.83v200.51c0 14.27 11.57 25.83 25.83 25.83h339.64c14.27 0 25.83 11.57 25.83 25.83v270.08c0 14.27-11.57 25.83-25.83 25.83H228.57c-14.27 0-25.83 11.57-25.83 25.83v339.64c0 14.27 11.57 25.83 25.83 25.83h609.21c14.27 0 25.83 11.57 25.83 25.83v496.16c0 14.27-11.57 25.83-25.83 25.83H159.01c-14.27 0-25.83 11.57-25.83 25.83v287.47c0 14.27 11.57 25.83 25.83 25.83h1017.9c14.27 0 25.83 11.57 25.83 25.83v291.81c0 14.27-11.57 25.83-25.83 25.83H972.05c-14.27 0-25.83 11.57-25.83 25.83v100.51c0 14.27-11.57 25.83-25.83 25.83H424.22c-14.27 0-25.83 11.57-25.83 25.83V3500"></path>
<text y="40" font-size="30" font-family="Montserrat, Arial">
<textPath id="text-path" class="text" href="#our-text" startOffset="500">
Testing testing testing
</textPath>
</text>
</svg>

在CSS中，我有这样的：

svg#svg-path {max-width:100%; height:auto;}
.animate {animation: reveal 1s forwards;}
@keyframes reveal {
from {
opacity:0;
transform: translateX(-180px);
}
to {
opacity:1;
transform: translateX(0);
}
}

非常感谢您的帮助。非常感谢。

Answer 1

工作脚本

<script>
jQuery(document).ready(function(){
var textPath = document.querySelector('#text-path');
function updateTextPathOffset(offset) {
textPath.setAttribute('startOffset', offset);
}

function onScroll() {
requestAnimationFrame(function() {
updateTextPathOffset(window.scrollY * 1.5);
});
}
window.addEventListener('scroll', onScroll);
});
</script>