流線のアニメーション

現状できている範囲は流線を固定で表示させることです。
以下コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
const draw = function(){
	
	const SCREEN_WIDTH = 1440,
		SCREEN_HEIGHT = 1000,
		canvas = document.getElementById("canvas"),
		g = canvas.getContext("2d"),
		speed = 1

	let lineX = SCREEN_WIDTH / 2
	let	lineY = 0

	g.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
	g.fillStyle = "rgba(0, 0, 0, 1)";
	g.fillStyle = "rgba(0, 0, 0, 1)";
	
	while(lineY < SCREEN_HEIGHT){
		g.beginPath()
		g.arc(lineX, lineY, 1, 1, Math.PI, false)
		g.stroke()

		lineX = lineX + Math.sin((lineY + speed) * Math.PI/240)
		lineY = lineY + speed
	}
};

window.onload = function(){
	draw()
}
</script>
<style>
body, #canvas {
	margin: 0;
	padding: 0;
}
</style>
 
</head>
<body>
	<canvas id="canvas" width="1440" height="1000"></canvas>
</body>
</html>

画像

行いたいこと
この流線を、スクロールに合わせて上から下にアニメーション（フェードイン的な形）で取り入れたいのですが、keyframeだとうまくいきませんでした。

<style>
#canvas {
    animation-name:slideTextY100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY100 {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
</style>

どなたかご助力を頂けましたらと思います。

yambejp

2021/07/12 05:25

いまいち何をしたいのかわかりません画像を背景に設定する以外なにをしたいのでしょうか？

konia

2021/07/12 05:35 編集

@yambejpさんありがとうございます！例えとして適切ではないかもしれないですが、iphoneのサイトのようにスクロールに合わせて動きをつけるようなものを流線でおこないたく考えております。 https://www.apple.com/jp/iphone-12/

行動規範の内容に同意します

回答1件

ちょっと何をしたいのかわかりませんが
bodyの背景画像のオフセットを調整するくらいしか。
スクロールとあわせてどうしたいかイメージ湧きません

javascript
1<style>
2body{
3  background-Image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><polyline points="50,0 0,25 100,75 50,100" fill="none" stroke="black" /></svg>');
4  background-Repeat:repeat-y;
5  background-attachment: fixed;
6}
7</style>
8<script>
9window.addEventListener('DOMContentLoaded', ()=>{
10  let top=0;
11  setInterval(()=>{
12    top+=10;
13    if(top>=100)top=0;
14    document.body.style.backgroundPosition=`center top ${top}px`;
15  },100);
16});
17</script>