22
Comet trail behind mouse cursor
source link: https://codepen.io/rgembalik/pen/MWKdqRX
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
0 unsaved changes
xxxxxxxxxx
<div class="info">Move mouse to see the effect<br>Or don't move it to see it jumpin around</div>
<canvas></canvas>
CSS (SCSS)
CSS (SCSS)
canvas {width: 100%;
height: 100%;
cursor: none;
}
.info {position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
color: white;
text-align: center;
pointer-events: none;
}
body,
html {margin: 0;
padding: 0;
width: 100%;
height: 100%;
JS (Babel)
JS (Babel)
xxxxxxxxxx
let cv = document.querySelector("canvas");let rect = cv.getBoundingClientRect();
cv.width = rect.width;
cv.height = rect.height;
let ctx = cv.getContext("2d");let cvWidth = cv.width;
let cvHeight = cv.height;
const TTL = 500;
const BASE_RADIUS = 30;
const mousePos = { x: cv.width / 2, y: cv.height / 2 };const noise = new Noise(Math.random());
const speedNoise = new Noise(Math.random());
let mouseDriven = false;
const perlinTimeStart = Date.now();
let trail = [];
const BASE_COLOR = [128, 255, 128];
const TARGET_COLOR = [255, 255, 200];
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK