先上圖:
未命名項目.gif
代碼實作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background-image:url(ubw.png);">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<text id="txt" x="100" y="100" style="font-size:25px;">
http://www.toly1994.com----張風捷特烈
</text>
</svg>
<script src="jquery-3.3.1.js"></script>
<script>
var num = $('#txt').text().trim().length;//文字數目
var x = [];//x值的數組
var s = 40;//波峰/谷
var w = 1;//
var y = null;//y值的數組
var t = 0;
for (let i = 0; i < num; i++) {
x.push(20);
}
/**
* 确定y值
*/
function arrange(t) {
y = [];
var ly = 0, cy;
for (let i = 0; i < num; i++) {
cy = -s * Math.sin(w * i + t);
y.push(cy - ly);
ly = cy;
}
}
/**
* 渲染函數,動态改變
*/
function render() {
$('#txt').attr("dx", x.join(' '));
$('#txt').attr("dy", y.join(' '));
}
/**
* 動畫
*/
function frame() {
t += 0.03;
arrange(t);
render();
requestAnimationFrame(frame);//動畫
}
frame();
</script>
</body>
</html>