Gwiaździste niebo
Stwórz efekt gwiaździstego nieba: animowane gwiazdy, meteory, kolory. Do tła strony, prezentacji i animacji CSS/Canvas. Bezpłatnie.
-
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";
}
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGwiaździste niebo – animowany efekt nocnego nieba dla web
Gwiaździste niebo to popularny efekt wizualny dla tła stron, prezentacji i kreacji graficznych. Narzędzie generuje animowany canvas z gwiazdami, opcjonalnymi meteorami, mgławicami i Drogą Mleczną – możliwy export do JS/CSS lub jako SVG.
Techniki tworzenia gwiaździstego nieba
Canvas 2D: drawArc dla gwiazd, requestAnimationFrame dla animacji. CSS: box-shadow na jednym div (klasyczna technika). WebGL: particles dla tysięcy gwiazd z dobrą wydajnością. Three.js: BufferGeometry z PointsMaterial. SVG:
CSS gwiaździste niebo (klasyczne)
Technika: jeden div, mega box-shadow. .stars { box-shadow: 100px 200px #fff, 300px 50px #fff, ... (tysiące pozycji). Generuj: JavaScript → CSS string. Animacja: @keyframes moveStars { from { transform: translateY(0); } to { transform: translateY(-2000px); } }. Wady: duży CSS, jeden rozmiar gwiazd.
Canvas JavaScript – podstawy
const canvas = document.getElementById("sky"); const ctx = canvas.getContext("2d"). Tło: ctx.fillStyle = "#0a0a1a"; ctx.fillRect(0,0,W,H). Gwiazda: ctx.beginPath(); ctx.arc(x,y,r,0,2*Math.PI); ctx.fillStyle = "rgba(255,255,255,alpha)"; ctx.fill(). Twinkle: alpha = 0.5 + 0.5 * Math.sin(Date.now()*freq + phase).
Efekty dodatkowe: meteory i mgławice
Meteory: linia z gradient (jasny koniec → przeźroczysty). Ruch: requestAnimationFrame, resetuj gdy poza ekranem. Mgławica: radialGradient z opakowaniem blur(). Droga Mleczna: elipsa z dużą ilością małych gwiazd i gradient fog. Aurora: falujące sinusoidy z gradient fill. Parallax: różne warstwy gwiazd poruszają się z różną prędkością.
Najczęstsze pytania
Jak dodać gwiaździste tło do strony web?
Opcja 1: biblioteka particles.js lub tsParticles. Opcja 2: czysty Canvas (jak na tej stronie). Opcja 3: CSS-only (box-shadow technique). Opcja 4: Lottie animation (plik JSON). Wydajność: canvas jest lepszy niż setki DOM elementów. Z-index: canvas za treścią, pointer-events: none.
Jak optymalizować animację gwiazd dla mobile?
requestAnimationFrame: zawsze zamiast setInterval/setTimeout. OffscreenCanvas: rendering w WebWorker (Chrome). Ograniczenie FPS: if (Date.now() - lastFrame < 16) return; (max 60fps). Mniej gwiazd na mobile: window.innerWidth < 768 → 100 gwiazd zamiast 400. WebGL: wydajniejszy dla dużych ilości. reduce-motion: @media (prefers-reduced-motion) { animacja wyłączona }.
Jakie biblioteki do animacji gwiazd?
particles.js (npm/CDN): popularna, konfigurowalna. tsParticles: następca particles.js, TypeScript. Three.js: jeśli potrzebujesz 3D parallax. PIXI.js: WebGL 2D renderer, doskonała wydajność. Anime.js: ogólne animacje JS. Lottie: odtwarzaj plik After Effects (.json). Dla prostych star fields: własny canvas (50-100 linii kodu).
Czy gwiazdy animowane wpływają na SEO?
Nie bezpośrednio. Ale: animacje mogą zwiększyć czas ładowania (JS bundle). Core Web Vitals: animacje z requestAnimationFrame nie powinny wpływać na LCP. CLS: jeśli canvas zepcha treść przy ładowaniu = zły CLS. INP: heavy animations = blokują main thread = słaby INP. Rozwiązanie: Canvas animacje nie blokują main thread (GPU), ale JS loop może.
Jak generować losowe gwiazdy ze stałym senem?
Seedowany PRNG: seedrandom (npm). var rng = new Math.seedrandom("mystar"). Użyj rng() zamiast Math.random(). Ten sam seed → te same gwiazdy. Przydatne: gdy chcesz ten sam "sky" dla każdego użytkownika. Lub użyj: hash URL jako seed dla unique-per-page niebo.
Powiązane narzedzia: generator animacji CSS, generator tla strony i efekty cząstek.