yoone-snow/js/snow-canvas.js

84 lines
2.7 KiB
JavaScript

(function(){
function init(){
var canvas = document.getElementById('effectiveAppsSnow');
if (!canvas) return;
var context = canvas.getContext('2d');
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var devicePixelRatio = window.devicePixelRatio || 1;
function resizeCanvas(){
viewportWidth = window.innerWidth;
viewportHeight = window.innerHeight;
var displayWidth = viewportWidth;
var displayHeight = viewportHeight;
canvas.style.width = displayWidth + 'px';
canvas.style.height = displayHeight + 'px';
canvas.width = Math.floor(displayWidth * devicePixelRatio);
canvas.height = Math.floor(displayHeight * devicePixelRatio);
context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
}
resizeCanvas();
var snowflakeCount = Math.floor(Math.min(400, Math.max(120, (viewportWidth * viewportHeight) / 12000)));
var snowflakes = [];
for (var i = 0; i < snowflakeCount; i++){
snowflakes.push({
positionX: Math.random() * viewportWidth,
positionY: Math.random() * viewportHeight,
radius: Math.random() * 2 + 1,
driftSpeed: Math.random() * 0.6 + 0.4,
swingAmplitude: Math.random() * 0.8 + 0.2
});
}
function updateSnowflakes(){
for (var j = 0; j < snowflakes.length; j++){
var flake = snowflakes[j];
flake.positionY += flake.driftSpeed * 2 + flake.radius * 0.25;
flake.positionX += Math.sin(flake.positionY * 0.01) * flake.swingAmplitude;
if (flake.positionY > viewportHeight + 5){
flake.positionY = -5;
flake.positionX = Math.random() * viewportWidth;
flake.radius = Math.random() * 2 + 1;
flake.driftSpeed = Math.random() * 0.6 + 0.4;
flake.swingAmplitude = Math.random() * 0.8 + 0.2;
}
}
}
function drawSnowflakes(){
context.clearRect(0, 0, viewportWidth, viewportHeight);
context.fillStyle = 'rgba(255,255,255,0.9)';
context.beginPath();
for (var k = 0; k < snowflakes.length; k++){
var flake = snowflakes[k];
context.moveTo(flake.positionX, flake.positionY);
context.arc(flake.positionX, flake.positionY, flake.radius, 0, Math.PI * 2);
}
context.fill();
}
function animate(){
updateSnowflakes();
drawSnowflakes();
requestAnimationFrame(animate);
}
window.addEventListener('resize', function(){
resizeCanvas();
viewportWidth = window.innerWidth;
viewportHeight = window.innerHeight;
});
animate();
}
if (document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();