Skip to main content

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>

 

Wow, amazing - might try this here!  :D 


Love it ​@Jef Vanlaer ⛄️🎄


Thanks for sharing ​@Jef Vanlaer  ! I'm saving this for next year as we'll be adding Community to our tech stack 😄

Psst...Unless I’m mistaken I met you at Pulse and seems that you are missing the badge in your profile 🕵️


Psst...Unless I’m mistaken I met you at Pulse and seems that you are missing the badge in your profile 🕵️

Thanks for mentioning, ​@romihache . I guess I have to flag it here: 

 


We’ll get on that!  :-D 


Wow, thanks a lot ​@Jef Vanlaer about this!

I think this is almost annoying when using mobile device so I made small changes and with this code effect can be seen only by the desktop users:

 

(Use it by your own risk)

<script>
document.addEventListener('DOMContentLoaded', function () {
// Check if the user is on a desktop
if (!/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) {
// 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 = s];

// 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>

 


Reply