Jak zrobić efekt spadających płatków śniegu na stronę

Skrypt generujący efekt spadających płatków śniegu może być wykorzystany na stronach internetowych w celu stworzenia przyjemnej, sezonowej atmosfery, szczególnie w okresie zimowym i świątecznym. Tego typu animacja sprawia, że witryna staje się bardziej dynamiczna i angażująca, co może przyciągnąć uwagę użytkowników i poprawić ich doświadczenia, zwłaszcza na stronach e-commerce, promujących świąteczne produkty lub wydarzenia.

Efekt spadających płatków śniegu może być także użyty w kampaniach marketingowych, które chcą podkreślić zimowy lub świąteczny charakter oferty. W kontekście wydarzeń, takich jak festiwale, jarmarki czy zawody sportowe, może wzmocnić wizualną oprawę strony i lepiej oddać atmosferę eventu.

Tego typu animacja może również działać relaksująco na stronach związanych z medytacją czy zdrowiem psychicznym, gdzie śnieżne płatki przywołują skojarzenia z ciszą i spokojem. W każdym z tych przypadków, skrypt z płatkami śniegu podnosi atrakcyjność strony, tworząc bardziej interaktywne i sezonowe doświadczenie dla użytkowników.

Aby stworzyć efekt spadających płatków śniegu na stronie internetowej, możesz wykorzystać JavaScript, HTML oraz CSS. Poniżej znajduje się prosty przykład, który możesz łatwo zaadaptować.

1. HTML

Zacznij od przygotowania struktury HTML. Dodamy kontener, w którym będą pojawiały się animowane płatki śniegu:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Efekt spadających płatków śniegu</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="snow-container"></div>

  <script src="script.js"></script>
</body>
</html>

2. CSS

Stylizacja płatków oraz kontenera w CSS. Płatki będą prostymi białymi kropkami, które będą animowane w dół.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #0a0a23;
  overflow: hidden;
}

#snow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.snowflake {
  position: absolute;
  top: -10px;
  background-color: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}

3. JavaScript

Teraz dodajmy trochę JavaScriptu, aby generować płatki śniegu i animować ich spadanie.

function createSnowflake() {
  const snowflake = document.createElement('div');
  snowflake.classList.add('snowflake');

  // Ustawianie losowych rozmiarów płatków śniegu
  const size = Math.random() * 10 + 5 + 'px';
  snowflake.style.width = size;
  snowflake.style.height = size;

  // Ustawianie losowej pozycji na osi X
  snowflake.style.left = Math.random() * window.innerWidth + 'px';

  // Ustawianie losowej prędkości animacji
  snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';

  // Dodanie płatka do kontenera
  document.getElementById('snow-container').appendChild(snowflake);

  // Usunięcie płatka po zakończeniu animacji
  setTimeout(() => {
    snowflake.remove();
  }, 5000);
}

// Tworzenie płatków co 100 ms
setInterval(createSnowflake, 100);

Jak to działa?

HTML: Kontener #snow-container przechowuje wszystkie płatki śniegu.
CSS: Płatki śniegu to białe, okrągłe elementy, które mają różne rozmiary i animowane są w dół strony przy użyciu @keyframes.
JavaScript: Funkcja createSnowflake() generuje pojedynczy płatek śniegu, ustawiając jego rozmiar, pozycję początkową oraz prędkość spadania. Płatki są tworzone co 100 ms przy użyciu setInterval().

Ten prosty efekt można dostosować, np. zmieniając wygląd płatków śniegu, ich szybkość spadania lub ilość tworzonych płatków.