英文:
Moving text on wave path with jQuery and stop on hover
问题
<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
<path id="curve" fill="transparent" 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"></path>
<text width="100%">
<textPath xlink:href="#curve">*这些图片并不是技术上的自拍照。</textPath>
</text>
</svg>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const textPath = document.querySelector("textPath");
const textPathLength = textPath.getComputedTextLength();
const duration = 10000; // 根据需要调整持续时间
$(textPath).css("startOffset", textPathLength);
function animateText() {
$(textPath).animate(
{ "startOffset": -textPathLength },
{
duration: duration,
easing: "linear",
complete: function() {
animateText();
}
}
);
}
animateText();
});
</script>
英文:
<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
<path id="curve" fill="transparent" 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"></path>
<text width="100%">
<textPath xlink:href="#curve">*The pictures are not technically selfies.</textPath>
</text>
</svg>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const textPath = document.querySelector("textPath");
const textPathLength = textPath.getComputedTextLength();
const duration = 10000; // Adjust the duration as needed
$(textPath).css("startOffset", textPathLength);
function animateText() {
$(textPath).animate(
{ "startOffset": -textPathLength },
{
duration: duration,
easing: "linear",
complete: function() {
animateText();
}
}
);
}
animateText();
});
</script>
I'm trying to move text on wave path but its not working. I want it to move on the path so I add it to section on the website. If I try with marquee tag its move but in straight line. I also try many marquee options but the result is not same as I want.
答案1
得分: 0
以下是使用UNPKG splitting脚本可以做的事情。您需要将所需路径放入CSS变量--path中。调整动画将会给您不同的结果。
Splitting({
whitespace: true
})
html {
font-family: Arial, Helvetica, sans-serif;
}
:root {
--path: "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";
}
.myText {
height: 100px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: red;
}
.char {
position: absolute;
offset-path: path(var(--path));
offset-distance: calc(var(--char-index) * 1.5rem);
animation: loop 4s cubic-bezier(.62, .01, .42, 1.01) infinite alternate calc(var(--char-index) * 10ms);
}
@keyframes loop {
50% {
offset-distance: calc((var(--char-index) * 1rem) + 40%);
}
100% {
offset-distance: calc((var(--char-index) * 1rem));
}
}
<script src="https://unpkg.com/splitting@1.0.6/dist/splitting.min.js"></script>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
<p class="myText" data-splitting>Your text here</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
英文:
Here is something you could do using UNPKG splitting script. You need to put the needed path in the CSS variable --path. Tweaking the animation will give you different results.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Splitting({
whitespace: true
})
<!-- language: lang-css -->
html {
font-family: Arial, Helvetica, sans-serif;
}
:root {
--path: "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";
}
.myText {
height: 100px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: red;
}
.char {
position: absolute;
offset-path: path(var(--path));
offset-distance: calc(var(--char-index) * 1.5rem);
animation: loop 4s cubic-bezier(.62, .01, .42, 1.01) infinite alternate calc(var(--char-index) * 10ms);
}
@keyframes loop {
50% {
offset-distance: calc((var(--char-index) * 1rem) + 40%);
}
100% {
offset-distance: calc((var(--char-index) * 1rem));
}
}
<!-- language: lang-html -->
<script src="https://unpkg.com/splitting@1.0.6/dist/splitting.min.js"></script>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
<p class="myText" data-splitting>Your text here</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
<!-- end snippet -->
And even if that is not what you want, you could modify it or use it as a base or inspiration for your actual case of use
答案2
得分: 0
Jquery的[`animate()`][1]方法只能动画化**CSS属性** - SVG的**`startOffset`属性无法通过CSS更改**。
## 替代方法：通过[SMIL动画][2]来动画化您的文本
```javascript
let svg = document.querySelector('svg')
// 暂停和恢复
svg.addEventListener('mouseover', e => {
svg.pauseAnimations();
})
svg.addEventListener('mouseleave', e => {
svg.unpauseAnimations();
})
<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
<path id="curve" fill="transparent" 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"></path>
<text width="100%">
<textPath id="textPath" href="#curve" startOffset="100%">*这些图片在技术上不是自拍。
<animate attributeName="startOffset" from="100%" to="-50%" begin="0s" dur="5s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
现在您只需要在您的textpath中添加一个`<animate>`元素，并指定参数`duration`，初始值和最终值，如下所示
<textPath id="textPath" href="#curve" startOffset="100%">*这些图片在技术上不是自拍。
<animate
attributeName="startOffset"
from="100%"
to="-50%"
begin="0s"
dur="5s"
repeatCount="indefinite" />
</textPath>
现在我们可以通过调用pauseAnimations()轻松暂停所有动画
<details>
<summary>英文:</summary>
Jquery's [`animate()`][1] method can only animate **CSS properties** – SVG's **`startOffset` attribute can't be changed via CSS**.
## Alternative: animate your text via [SMIL animation][2]
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let svg = document.querySelector('svg')
// pause and resume
svg.addEventListener('mouseover', e => {
svg.pauseAnimations();
})
svg.addEventListener('mouseleave', e => {
svg.unpauseAnimations();
})
<!-- language: lang-html -->
<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
<path id="curve" fill="transparent" 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"></path>
<text width="100%">
<textPath id="textPath" href="#curve" startOffset="100%">*The pictures are not technically selfies.
<animate attributeName="startOffset" from="100%" to="-50%" begin="0s" dur="5s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
<!-- end snippet -->
You just need to add an `<animate>` elements to your textpath and specify parameters duration, initial and final values like so
<textPath id="textPath" href="#curve" startOffset="100%">*The pictures are not technically selfies.
<animate
attributeName="startOffset"
from="100%"
to="-50%"
begin="0s"
dur="5s"
repeatCount="indefinite" />
</textPath>
Now we can easily pause all animations by calling `pauseAnimations()`
See also ["How to pause and run just one SMIL animation in svg?"][3]
[1]: https://api.jquery.com/animate/
[2]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
[3]: https://stackoverflow.com/questions/72498272/how-to-pause-and-run-just-one-smil-animation-in-svg
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论