我按照一個很棒的教程在我的 Wordpress 網站上實作了一個“SVG 文本路徑影片”，但現在我完全陷入了困境。我的 SVG 和文本路徑可以正常作業，但 javascript 影片不行。
您可以在這里看到 SVG 路徑和 textPath “Testing testing testing” ，沒有任何作業影片。
這是我使用 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);
}
}
任何幫助是極大的贊賞。謝謝！
uj5u.com熱心網友回復：
作業腳本
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521026.html
標籤：javascriptWordPress动画svgsvg-动画元素
上一篇：如何在應用欄上滾動和影片物件？