Feature Proposal option 1: a variable in the options object to set

Fireworks for limited amount of time about fireworks-js HOT 1 CLOSED

crashmax-dev commented on May 18, 2024

Fireworks for limited amount of time

from fireworks-js.

Comments (1)

BadRookiDev commented on May 18, 2024

i wrote a piece of code that did exactly what i want. The fireworks start once the h2 element in the container is visibile. It starts of with lots of fireworks but decreases quickly to very low intensity so that the CTA is readable.

    const fireworks = new Fireworks(container, {intensity: 60, trace: 1});
    let intensity = 58.5;
    let intensityDecay = [0,20,15,10,6,3,2,1];
    let intensityInterval = null;

    let fireworksObserver = new IntersectionObserver(function (entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                fireworksObserver.disconnect();
                fireworks.start();
                intensityInterval = setInterval(function (){
                    if (intensityDecay.length>0){
                        intensity-=intensityDecay.shift();
                        console.log(intensity);
                        fireworks.setOptions({intensity: intensity});
                    } else {
                        clearInterval(intensityInterval);
                    }
                }, 400);
            }
        });
    }, {
        rootMargin: '0px',
        threshold: 0.5
    });

    fireworksObserver.observe(document.getElementById('2ndHeading'));

This resolved my issue, but it might be a cool idea to include similar functionality in the library natively.

from fireworks-js.

Recommend Projects