Snowfall view in lowendtalk

aaxaa · December 2024

I loved the way the snow fell on lowendtalk

Is there a way to add it to WordPress ? (I have seen many WordPress plugins but this one is quiet and beautiful with on and off button)

Merry Christmas and a Happy New Year

Levi · December 2024

@aaxaa said:
I loved the way the snow fell on lowendtalk

Is there a way to add it to WordPress ? (I have seen many WordPress plugins but this one is quiet and beautiful with on and off button)

Merry Christmas and a Happy New Year

This is custom js. I observed source code in order to copy it, but it looks gnarly and I just didn’t invest time…

NobodyInteresting · December 2024

// Create a new file called snow-effect.js
function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');

    // Random positioning and animation duration
    snowflake.style.left = Math.random() * 100 + 'vw';
    snowflake.style.animationDuration = (Math.random() * 3 + 2) + 's';
    snowflake.style.opacity = Math.random();
    snowflake.style.fontSize = (Math.random() * 10 + 10) + 'px';

    snowflake.innerHTML = '❅';
    return snowflake;
}

function startSnowfall() {
    const container = document.createElement('div');
    container.id = 'snow-container';
    document.body.appendChild(container);

    // Create initial snowflakes
    for(let i = 0; i < 50; i++) {
        const snowflake = createSnowflake();
        container.appendChild(snowflake);
    }

    // Continuously add new snowflakes
    setInterval(() => {
        const snowflake = createSnowflake();
        container.appendChild(snowflake);

        // Remove snowflake after animation
        setTimeout(() => {
            snowflake.remove();
        }, 5000);
    }, 100);
}

// Add the CSS styles
const styleSheet = document.createElement('style');
styleSheet.textContent = `
    #snow-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 9999;
    }

    .snowflake {
        position: fixed;
        top: -10px;
        color: white;
        animation: fall linear forwards;
    }

    @keyframes fall {
        to {
            transform: translateY(100vh);
        }
    }
`;
document.head.appendChild(styleSheet);

// Start the snowfall when the page loads
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', startSnowfall);
} else {
    startSnowfall();
}

To add this snow effect to your WordPress site, follow these steps:

Create a new file called snow-effect.js with the code from the artifact above.
Upload the file to your WordPress theme directory (or a custom scripts folder).
Add the script to your WordPress site by adding this code to your theme's functions.php file:

function add_snow_effect() {
    wp_enqueue_script('snow-effect', get_template_directory_uri() . '/path/to/snow-effect.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'add_snow_effect');

The snow effect features:

Randomly sized snowflakes (❅)
Variable fall speeds
Random horizontal positioning
Smooth animations
No impact on page performance
Works on all pages
Doesn't interfere with page interactions

You can customize the effect by:
1. Changing the number of snowflakes (modify the 50 in the initial loop)
2. Adjusting the snowflake character (change ❅ to ❆, ❄, or other Unicode characters)
3. Modifying the fall speed (adjust the animationDuration values)
4. Changing the z-index if needed
5. Adjusting the size range of snowflakes

aaxaa · December 2024

@NobodyInteresting Thank you very much ( I added it to my website, it's working and beautiful)

NobodyInteresting · December 2024

@aaxaa said:
@NobodyInteresting Thank you very much ( I added it to my website, it's working and beautiful)

Any time!

Levi · December 2024

Is it possible to make snow acumulate on some div elements?

aaxaa · December 2024

@Levi said:
Is it possible to make snow acumulate on some div elements?

I used code from @NobodyInteresting and it works fine.

NobodyInteresting · December 2024

@Levi said:
Is it possible to make snow acumulate on some div elements?

Yes! Lets create an enhanced version that makes snowflakes accumulate on elements with a specific class (e.g., 'snow-accumulator'). The snow will gradually build up at the top of these elements.

// Create a new file called snow-effect-with-accumulation.js
class SnowAccumulation {
    constructor() {
        this.accumulators = new Map(); // Store accumulation data for each element
        this.setupStyles();
        this.startSnowfall();
        this.setupAccumulators();
    }

    setupStyles() {
        const styleSheet = document.createElement('style');
        styleSheet.textContent = `
            #snow-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                pointer-events: none;
                z-index: 9999;
            }

            .snowflake {
                position: fixed;
                top: -10px;
                color: white;
                text-shadow: 0 0 3px rgba(0,0,0,0.1);
                animation: fall linear forwards;
            }

            .snow-accumulator {
                position: relative;
            }

            .snow-pile {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                pointer-events: none;
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-wrap: wrap;
                transform-origin: top;
            }

            .accumulated-snowflake {
                color: white;
                text-shadow: 0 0 3px rgba(0,0,0,0.1);
                margin: -3px;
                transform-origin: center;
                transition: all 0.3s ease;
            }

            @keyframes fall {
                to {
                    transform: translateY(100vh);
                }
            }
        `;
        document.head.appendChild(styleSheet);
    }

    createSnowflake() {
        const snowflake = document.createElement('div');
        snowflake.classList.add('snowflake');

        // Random positioning and animation duration
        snowflake.style.left = Math.random() * 100 + 'vw';
        const duration = Math.random() * 3 + 2;
        snowflake.style.animationDuration = duration + 's';
        snowflake.style.opacity = Math.random() * 0.7 + 0.3;
        snowflake.style.fontSize = (Math.random() * 10 + 10) + 'px';

        snowflake.innerHTML = '❅';

        // Check for collision with accumulators
        this.checkCollision(snowflake, duration);

        return snowflake;
    }

    setupAccumulators() {
        const accumulators = document.querySelectorAll('.snow-accumulator');
        accumulators.forEach(elem => {
            // Create snow pile container
            const pile = document.createElement('div');
            pile.classList.add('snow-pile');
            elem.appendChild(pile);

            // Initialize accumulator data
            this.accumulators.set(elem, {
                rect: elem.getBoundingClientRect(),
                pile: pile,
                snowCount: 0
            });
        });

        // Update positions on resize
        window.addEventListener('resize', () => {
            this.accumulators.forEach((data, elem) => {
                data.rect = elem.getBoundingClientRect();
            });
        });
    }

    checkCollision(snowflake, duration) {
        const startTime = performance.now();
        const startY = -10;
        const velocity = (window.innerHeight + 10) / (duration * 1000); // pixels per millisecond

        const checkPosition = () => {
            const elapsed = performance.now() - startTime;
            const currentY = startY + (elapsed * velocity);
            const snowflakeRect = {
                left: parseFloat(snowflake.style.left),
                top: currentY,
                right: parseFloat(snowflake.style.left) + 20,
                bottom: currentY + 20
            };

            this.accumulators.forEach((data, elem) => {
                if (this.intersects(snowflakeRect, data.rect)) {
                    this.accumulateSnow(data);
                    snowflake.remove();
                    return;
                }
            });

            if (currentY < window.innerHeight && snowflake.parentNode) {
                requestAnimationFrame(checkPosition);
            }
        };

        requestAnimationFrame(checkPosition);
    }

    intersects(rect1, rect2) {
        return !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom);
    }

    accumulateSnow(accumulator) {
        const snowflake = document.createElement('div');
        snowflake.classList.add('accumulated-snowflake');
        snowflake.innerHTML = '❅';
        snowflake.style.fontSize = (Math.random() * 8 + 8) + 'px';
        snowflake.style.transform = `rotate(${Math.random() * 360}deg)`;
        snowflake.style.opacity = Math.random() * 0.7 + 0.3;

        accumulator.pile.appendChild(snowflake);
        accumulator.snowCount++;

        // Adjust pile height based on snow count
        const height = Math.min(20 + (accumulator.snowCount / 3), 
                              accumulator.rect.height * 0.5);
        accumulator.pile.style.height = height + 'px';
    }

    startSnowfall() {
        const container = document.createElement('div');
        container.id = 'snow-container';
        document.body.appendChild(container);

        // Create initial snowflakes
        for(let i = 0; i < 50; i++) {
            container.appendChild(this.createSnowflake());
        }

        // Continuously add new snowflakes
        setInterval(() => {
            const snowflake = this.createSnowflake();
            container.appendChild(snowflake);

            // Remove snowflake after animation
            setTimeout(() => {
                if (snowflake.parentNode) {
                    snowflake.remove();
                }
            }, 5000);
        }, 100);
    }
}

// Initialize when the page loads
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => new SnowAccumulation());
} else {
    new SnowAccumulation();
}

To use this enhanced version:

Add the class snow-accumulator to any elements where you want snow to accumulate:

<div class="snow-accumulator">
    Your content here
</div>

Upload the JavaScript file to your WordPress theme directory.
Add it to your WordPress site by adding this to your theme's functions.php:

function add_snow_effect() {
    wp_enqueue_script('snow-effect', get_template_directory_uri() . '/path/to/snow-effect-with-accumulation.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'add_snow_effect');

Key features of this enhanced version:

Snow realistically accumulates on top of elements with the snow-accumulator class
Snowflakes pile up gradually and stack on each other
The snow pile grows in height as more snow accumulates
Accumulation is limited to 50% of the element's height to prevent overflow
Snowflakes in the pile have random rotations and slight variations in size
Smooth transitions and natural-looking accumulation
Collision detection for accurate accumulation points
Responsive design that updates with window resizing

You can customize the effect by adjusting:
1. Maximum accumulation height (change the 0.5 multiplier in accumulator.rect.height * 0.5)
2. Snow pile density (modify the starting height 20 and growth rate /3 in the height calculation)
3. Snowflake appearance (size, color, shadow effects)
4. Accumulation speed (adjust the snowflake creation interval)

ralf · December 2024

@NobodyInteresting said:

@Levi said:
Is it possible to make snow acumulate on some div elements?

Yes!

I don't even use WordPress but you impressed me with your enthusiasm to improve the script!

NobodyInteresting · December 2024

@ralf said:

@NobodyInteresting said:

@Levi said:
Is it possible to make snow acumulate on some div elements?

Yes!

I don't even use WordPress but you impressed me with your enthusiasm to improve the script!

Can't blame ya, WordPress is horrible :-)

css, html and js is where its at. I converted all of my sites from WordPress to that, and hosting free on cloudflare pages. And the speed improvements are unreal.

Howdy, Stranger!

Categories

In this Discussion

Snowfall view in lowendtalk

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Snowfall view in lowendtalk

Comments