<style>
/*Падающий снег для сайта на Tilda: https://vladislav-land.ru/mods*/
#snowContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 99999999999999999;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
</style>
<div id="snowContainer">
<canvas id="snowCanvas" style="width: 100%; height: 100%;"></canvas>
</div>
<script>
const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
const isSmallScreen = window.innerWidth <= 1200;
const numberOfSnowflakes = isSmallScreen ? 400 : 800;
const flakeRadius = isSmallScreen ? 1 : 2;
const flakeOpacity = isSmallScreen ? 0.2 : 0.5;
/*Здесь задаёте прозрачность снежинок (первое значение - мобилки и планшеты, второе - ПК)*/
const snowflakes = [];
for (let i = 0; i < numberOfSnowflakes; i++) {
snowflakes.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * flakeRadius + 1,
speed: Math.random() * 1.0 + 0.2
/*Здесь задаёте скорость падения снежинок
// speed: Math.random() * 2.0 + 0.5 // станет быстрее
// speed: Math.random() * 0.5 + 0.1 // станет медленнее*/
});
}
function drawSnowflakes() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let flake of snowflakes) {
ctx.beginPath();
ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${flakeOpacity})`;
/*Здесь в rgb формате можно задать цвет снежинок*/
ctx.fill();
flake.y += flake.speed;
if (flake.y > canvas.height) {
flake.y = 0;
flake.x = Math.random() * canvas.width;
}
}
requestAnimationFrame(drawSnowflakes);
}
drawSnowflakes();
window.addEventListener('resize', resizeCanvas);
window.addEventListener('orientationchange', resizeCanvas);
</script>