Efekt padającego śniegu na stronie www w HTML, CSS i JS

Jak zrobić efekt padającego śniegu na zdjęciu w HTML, CSS i JS

Efekt śniegu pozwala uzyskać elegancki wygląd strony z ruchomymi płatkami śniegu na obrazku. Sposób, który tu przedstwiam jest efektowy na stronie www i w miarę prosty do wdrożenia.

Efekt padającego śniegu na stronie WWW – czym jest i dlaczego przyciąga uwagę

Efekt padającego śniegu na stronie internetowej to jeden z najprostszych sposobów na dodanie sezonowego klimatu i przyciągnięcie uwagi użytkowników. Animowane płatki śniegu na zdjęciu lub banerze sprawiają, że strona WWW wygląda bardziej dynamicznie i nowocześnie, a jednocześnie buduje pozytywne emocje u odbiorców. Tego typu efekt wizualny jest szczególnie popularny w okresie zimowym, świątecznym oraz podczas kampanii promocyjnych, gdzie liczy się pierwsze wrażenie i zaangażowanie użytkownika.

Efekty wizualne w HTML, CSS i JS – kiedy warto je stosować

Zastosowanie efektu padającego śniegu w HTML, CSS i JavaScript daje dużą elastyczność i nie wymaga korzystania z ciężkich wtyczek czy zewnętrznych bibliotek. Dzięki temu animacja działa płynnie, nie obciąża strony i może być łatwo dostosowana do konkretnego projektu. Efekty wizualne tego typu świetnie sprawdzają się na stronach firmowych, landing page’ach, sklepach internetowych, blogach oraz stronach promocyjnych, gdzie istotna jest estetyka i wyróżnienie się na tle konkurencji.

Korzyści z efektu padającego śniegu na stronie internetowej

Warto wdrożyć efekt śniegu na stronie WWW nie tylko ze względów wizualnych, ale również marketingowych. Subtelne animacje zwiększają czas przebywania użytkownika na stronie, poprawiają odbiór marki i mogą pozytywnie wpłynąć na współczynnik konwersji. Efekt padającego śniegu można wykorzystać na zdjęciach w nagłówku strony, w sekcjach hero, na grafikach promocyjnych czy w specjalnych kampaniach sezonowych. W dalszej części poradnika pokażemy, jak krok po kroku stworzyć taki efekt w czystym HTML, CSS i JS.

Czy nie lepiej prezetnuje się choinka na poniższym zdjęciu?

Zobacz krok po kroku jak zrobić efekt padającego śniegu na stronie

1. HTML – struktura strony

Na początek potrzebujemy kontener na obrazek oraz element, który będzie warstwą śniegu.

<div class="snow-container">
  <img src="URL_DO_TWOJEGO_OBRAZU.jpg" alt="Śnieżny obraz">
  <div class="snow-layer"></div>
</div>

Wyjaśnienie:

.snow-container – kontener, w którym znajduje się obraz i płatki śniegu.
<img> – Twój obraz, na którym będzie padał śnieg.
.snow-layer – warstwa, w której będą generowane płatki śniegu.

2. CSS – wygląd i animacje

CSS odpowiada za wygląd płatków i animacje opadania oraz lekki ruch boczny (wiatr).

/* KONTENER */
.snow-container {
  position: relative;
  overflow: hidden;
}

.snow-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* WARSTWA ŚNIEGU */
.snow-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* PŁATKI */
.snowflake {
  position: absolute;
  top: -20px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.85;
  filter: blur(1px);
  animation: snow-fall linear infinite, snow-drift ease-in-out infinite;
}

/* OPAD PIONOWY */
@keyframes snow-fall {
  to { top: 100%; }
}

/* RUCH POZIOMY */
@keyframes snow-drift {
  0% { transform: translateX(0); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(0); }
}

Wyjaśnienie:

top: -20px; – płatki zaczynają nad obrazkiem.
filter: blur(1px); – lekki efekt rozmycia, aby płatki wyglądały naturalniej.
Animacje snow-fall i snow-drift – odpowiednio opad pionowy i lekki ruch poziomy.

3. JavaScript – generowanie płatków

JS odpowiada za dynamiczne tworzenie płatków śniegu, losowe ustawienia ich rozmiaru, pozycji, prędkości i rozmycie konturów płatków.

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".snow-layer").forEach(layer => {
    const flakes = 80;
    for (let i = 0; i < flakes; i++) {
      const flake = document.createElement("span");
      flake.className = "snowflake";

      const size = Math.random() * 5 + 3;
      flake.style.width = size + "px";
      flake.style.height = size + "px";
      flake.style.left = Math.random() * 100 + "%";

      flake.style.animationDuration =
        (Math.random() * 10 + 10) + "s, " + (Math.random() * 4 + 4) + "s";
      flake.style.animationDelay =
        Math.random() * 10 + "s, " + Math.random() * 4 + "s";

      flake.style.opacity = Math.random() * 0.4 + 0.4;
      flake.style.filter = "blur(" + (Math.random() * 1.5 + 0.5) + "px)";

      layer.appendChild(flake);
    }
  });
});
</script>

Wyjaśnienie:

flakes – liczba płatków śniegu. Możesz zwiększyć lub zmniejszyć.
size – losowy rozmiar płatków.
animationDuration – losowa prędkość opadania i ruchu bocznego.
filter: blur() – różne rozmycie dla naturalnego efektu.
appendChild() – dodanie płatka do warstwy .snow-layer.

4. Efekt końcowy

Po wklejeniu powyższego kodu:

Białe, lekko rozmyte kropki pojawią się nad obrazkiem.
Płatki będą spadać pionowo i delikatnie dryfować na boki.
Efekt można modyfikować poprzez zmianę liczby płatków, prędkości, rozmiaru lub blur.