DARMOWE NARZĘDZIE

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.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Density

Size min

Size max

Opacity

Palette

Base kolorów

Seed

Preview height

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

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.

konfetti animacja celebracja efekt canvas confetti JavaScript animacja

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.