Generator Confetti
Dodaj efekt konfetti do swojej strony – animacja świętowania z konfiguracją kolorów, kształtów i intensywności. Pobierz kod JS/CSS. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Generator efektu konfetti na stronę internetową
Świętuj z użytkownikami – animacja konfetti to idealny efekt przy zakupie, ukończeniu kursu, urodzinach lub każdym innym sukcesie. Generator tworzy konfiguurowalny kod JS.
Konfiguracja efektu
Liczba cząsteczek (50–500), kolory (custom palette), kształty (kwadrat, okrąg, serce, gwiazda), grawitacja, prędkość, czas trwania, tryb (deszcz z góry, eksplozja z centrum, lazer z boków).
Format kodu
Vanilla JS z canvas-confetti library (CDN lub npm), CSS-only (dla prostszych efektów), React hook, Vue directive. Gotowy snippet do wklejenia.
Najczęstsze pytania
Jak wywołać konfetti po kliknięciu przycisku?
import confetti from "canvas-confetti"; button.addEventListener("click", () => confetti()); – najprostsza implementacja.
Czy konfetti wpływa na wydajność strony?
Canvas confetti jest zoptymalizowane – używa requestAnimationFrame i automatycznie czyści canvas. Nie blokuje głównego wątku.
Czy można wywołać konfetti tylko raz?
Tak – parametr count lub jednorazowy trigger. Sprawdź czy użytkownik już widział efekt (localStorage flag).
Inne efekty animacji: gwiaździste niebo i generator Matrix Code Rain.