It’s snowing on the TrendMiner Community.
Want to add some end-of-year fun to your community as well? Add the following script before </Body> under Customization --> Third-party Scripts…
<!-- Snow script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
// Create a canvas element dynamically
const canvas = document.createElement('canvas');
canvas.id = 'snowCanvas';
// Append the canvas to the body
document.body.appendChild(canvas);
// Set up the canvas and its context
const ctx = canvas.getContext('2d');
// Make the canvas cover the whole screen
function setCanvasSize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
setCanvasSize();
// Update canvas size on window resize
window.addEventListener('resize', setCanvasSize);
// Create an array to store snowflakes
const snowflakes = e];
// Snowflake class
class Snowflake {
constructor() {
this.x = Math.random() * canvas.width; // Random x position
this.y = Math.random() * canvas.height; // Random y position
this.radius = Math.random() * 3 + 2; // Random size
this.speed = Math.random() * 1 + 0.5; // Random speed
this.wind = Math.random() * 0.5 - 0.25; // Random horizontal drift
}
// Update the snowflake's position
update() {
this.y += this.speed; // Move down
this.x += this.wind; // Drift horizontally
// Reset snowflake to the top if it goes off-screen
if (this.y > canvas.height) {
this.y = 0;
this.x = Math.random() * canvas.width;
}
}
// Draw the snowflake
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
}
}
// Create initial snowflakes
for (let i = 0; i < 150; i++) {
snowflakes.push(new Snowflake());
}
// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
snowflakes.forEach(snowflake => {
snowflake.update();
snowflake.draw();
});
requestAnimationFrame(animate); // Continue animation
}
// Start the animation
animate();
// Style the canvas directly via JavaScript
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.zIndex = '9999'; // Ensure it appears above other elements
canvas.style.pointerEvents = 'none'; // Allow clicks through the canvas
});
</script>