pull/1066/merge
parent
959df65e0a
commit
2aad2c6b8a
|
@ -0,0 +1,91 @@
|
||||||
|
// -------------------------------------------------------------------------------------------------
|
||||||
|
// JavaScript Snow Effect - © Copyright 2020 - Jam-Es.com
|
||||||
|
// Licensed under the MIT License (MIT). See LICENSE in the repo root for license information.
|
||||||
|
// -------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// Change the following variables to customize the appearance of the particles
|
||||||
|
var numParticles = window.innerWidth / 50;
|
||||||
|
var maxSpeed = 2.5;
|
||||||
|
var minSpeed = 1;
|
||||||
|
var maxSize = 5;
|
||||||
|
var minSize = 3;
|
||||||
|
var maxOpacity = 1;
|
||||||
|
var minOpacity = 0.2;
|
||||||
|
|
||||||
|
// If the following is true, the canvas resolution will be set to match the full viewport width and height.
|
||||||
|
// var fixCanvasResolution = true;
|
||||||
|
|
||||||
|
var snow_particles = [];
|
||||||
|
|
||||||
|
var canvas
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
canvas = document.createElement('canvas')
|
||||||
|
canvas.style.position = 'fixed';
|
||||||
|
canvas.style.top = '0px'
|
||||||
|
canvas.style.left = '0px'
|
||||||
|
canvas.style.pointerEvents = 'none'
|
||||||
|
canvas.style.zIndex = 100
|
||||||
|
canvas.width = document.documentElement.clientWidth
|
||||||
|
canvas.height = document.documentElement.clientHeight
|
||||||
|
document.body.appendChild(canvas)
|
||||||
|
|
||||||
|
// if (fixCanvasResolution) {
|
||||||
|
// // canvas.width = window.innerWidth;
|
||||||
|
// canvas.height = window.innerHeight;
|
||||||
|
// }
|
||||||
|
|
||||||
|
InitPoints();
|
||||||
|
|
||||||
|
requestAnimationFrame(Redraw, 15);
|
||||||
|
window.addEventListener('resize', this.onWindowResize)
|
||||||
|
}
|
||||||
|
function onWindowResize (e) {
|
||||||
|
canvas.width = document.documentElement.clientWidth
|
||||||
|
canvas.height = document.documentElement.clientHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
function Redraw() {
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||||
|
for (var i = 0; i < snow_particles.length; i++) {
|
||||||
|
var newYPos = snow_particles[i].yPos + snow_particles[i].speed;
|
||||||
|
if (newYPos > window.innerHeight) {
|
||||||
|
newYPos = getRandomInt(-100,-10);
|
||||||
|
snow_particles[i].xPos = getRandomInt(0, window.innerWidth);
|
||||||
|
snow_particles[i].speed = Math.random() * (maxSpeed - minSpeed) + minSpeed;
|
||||||
|
snow_particles[i].opacity = Math.random() * (maxOpacity - minOpacity) + minOpacity;
|
||||||
|
snow_particles[i].size = Math.random() * (maxSize - minSize) + minSize;
|
||||||
|
}
|
||||||
|
snow_particles[i].yPos = newYPos;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(snow_particles[i].xPos, newYPos, snow_particles[i].size, 0, 2 * Math.PI);
|
||||||
|
ctx.fillStyle = "rgba(255, 255, 255, " + snow_particles[i].opacity + ")";
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
requestAnimationFrame(Redraw)
|
||||||
|
}
|
||||||
|
|
||||||
|
function InitPoints() {
|
||||||
|
for (var i = 0; i < numParticles; i++) {
|
||||||
|
var startX = getRandomInt(0, window.innerWidth);
|
||||||
|
var startY = getRandomInt(0, window.innerHeight);
|
||||||
|
var speed = Math.random() * (maxSpeed - minSpeed) + minSpeed;
|
||||||
|
var opacity = Math.random() * (maxOpacity - minOpacity) + minOpacity;
|
||||||
|
var size = Math.random() * (maxSize - minSize) + minSize;
|
||||||
|
|
||||||
|
snow_particles.push({
|
||||||
|
"xPos": startX,
|
||||||
|
"yPos": startY,
|
||||||
|
"speed": speed,
|
||||||
|
"opacity": opacity,
|
||||||
|
"size": size,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandomInt(min, max) {
|
||||||
|
min = Math.ceil(min);
|
||||||
|
max = Math.floor(max);
|
||||||
|
return Math.floor(Math.random() * (max - min)) + min;
|
||||||
|
}
|
|
@ -16,7 +16,8 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from '@common/utils/vueTools'
|
import { onMounted } from '@common/utils/vueTools'
|
||||||
// import BubbleCursor from '@common/utils/cursor-effects/bubbleCursor'
|
// import BubbleCursor from '@common/utils/effects/cursor-effects/bubbleCursor'
|
||||||
|
// import '@common/utils/effects/snow.min'
|
||||||
import useApp from '@renderer/core/useApp'
|
import useApp from '@renderer/core/useApp'
|
||||||
|
|
||||||
useApp()
|
useApp()
|
||||||
|
|
Loading…
Reference in New Issue