canvas滚动鼠标实现全屏线条波浪动画效果代码-html代码-BFW代码库

canvas滚动鼠标实现全屏线条波浪动画效果代码

代码语言：html

代码描述：canvas滚动鼠标实现全屏线条波浪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#content {
  position: relative;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

p {
  font-size: 1.2em;
  line-height: 1.6;
}
</style>


  
  
</head>

<body>
  <canvas id="generativeCanvas"></canvas>
<div id="content">
	<h1>Scroll to Explore the Generative Landscape</h1>
	<p>As you scroll down, watch the landscape evolve and change...</p>
	<!-- Add more content here to enable scrolling -->
	<div style="height: 2000px;"></div>
</div>
  
      <script id="rendered-js" >
const canvas = document.getElementById("generativeCanvas");
const ctx = canvas.getContext("2d");

let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;

let scrollProgress = 0;
let lines = [];

class Line {
  constructor(y) {
    this.y = y;
    this.originalY = y;
    this.color = `hsl(${Math.random() * 60 + 180}, 70%, 60%)`;
    this.points = [];
    this.numberOfPoints = Math.floor(width / 10);

    for (let i = 0; i < this.numberOfPoints; i++) {
      this.points.push({
        x: i * (width / (this.numberOfPoints - 1)),
        y: 0 });

    }
  }

  update(sc.........完整代码请登录后点击上方下载按钮下载查看