[JS] Jak dodać śnieg na stronę WWW?

Zbliża się zima, więc postanowiłem napisać krótki poradnik, w którym pokażę Wam jak dodać padający śnieg (taki jak widzicie na zdjęciu wyżej) na stronę internetową. W projekcie skorzystamy z CSS-a oraz JavaScriptu. ❄️

Pada śnieg, pada śnieg…

Choć padający śnieg na stronach internetowych to widok spotykany w latach 2000-2010, to jednak napisanie tak prostego skryptu w JS daje sporo satysfakcji i bez wątpienia jest to szansa na nauczenie się czegoś nowego. 🙂

P.S. Na samym dole przygotowałem dla Was małe wyzwanie!

CSS

Na początku przejdziemy do CSS-a i ostylujemy naszą stronę.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;  
}
/* Podstawowy reset CSS. */

body {
  height: 100vh;
  background-color: royalblue;
  overflow: hidden;
}
/* Chcemy, aby nasza strona była wysoka na cały ekran i miała niebieski kolor tła. 
Co więcej, nie chcemy, aby animowane płatki śniegu psuły widok strony,
dlatego to, co będzie wyciekało poza nasz viewport, będzie ukrywane. */

i.snowflake {
  position: absolute;
  top: -50px;
  animation: snow linear;
}
/* Do płatków śniegu wykorzystamy tagi <i> z klasą "snowflake".
Samą ikoną płatku śniegu zajmiemy się w JS-ie.  */

@keyframes snow {
	to {
		transform: translateY(110vh);
	}
}
/* Animacja, dzięki której płatki śniegu będą opadały (przesuwały się w dół na osi Y). */

JavaScript

Style w CSS gotowe – czas na JS!
Kod podzieliłem na moduły, aby łatwiej było go zrozumieć. Na samym dole tego wpisu znajdziecie cały skrypt. 😉

Nasz prosty programik zaczynamy od dodania funkcji, w której będziemy tworzyć płatki śniegu.
Skorzystamy z tagów <i>, w których umieścimy nasze płatki (w moim przypadku będzie to emotka systemowa, ale można tu skorzystać z np. ikon SVG).
Dodamy też klasę snowflake, którą stworzyliśmy w CSS.

const createSnow = () => {
	const snowflake = document.createElement('i')
	snowflake.classList.add('snowflake')
	snowflake.textContent = '❄️'
}	

Teraz zadbamy o losowość. Nie chcemy przecież, aby wszystkie płatki śniegu pojawiły się w tym samym miejscu i opadały z dokładnie tą samą prędkością.
Dlatego do funkcji createSnow dodamy poniższy kod odpowiadający za losową pozycję left, losowy czas trwania animacji oraz losowe opacity, dzięki któremu uzyskamy efekt głębi.

snowflake.style.left = Math.random() * window.innerWidth + 'px'
snowflake.style.animationDuration = Math.random() * 5 + 3 + 's'
// Animacja będzie trwała od 3 do 8 sekund.

snowflake.style.opacity = Math.random()

Kolejnym krokiem będzie dodanie naszego płatka śniegu na stronę.
Co więcej, aby uniknąć problemów z wydajnością, które mogłyby się pojawić przez miliony stworzonych płatków śniegu w naszym DOM, będziemy je kasować co 8 sekund (a więc wtedy, kiedy najdłuższa animacja dobiegnie końca).

document.body.append(snowflake)

setTimeout(() => {
	snowflake.remove()
  }, 8000)
}

Ostatnim krokiem jest wywołanie funkcji createSnow.
Ta będzie uruchamiana co 50ms. Jeśli chcemy więcej płatków śniegu na stronie, wystarczy zmniejszyć tę wartość do np. 5ms.
Jeśli chcemy nieco spokojniejszy wariant, możemy ustalić np. 500ms.

setInterval(createSnow, 50)

SKRYPT:

const createSnow = () => {
	const snowflake = document.createElement('i')
	snowflake.classList.add('snowflake')
	snowflake.textContent = '❄️'

	snowflake.style.left = Math.random() * window.innerWidth + 'px'
	snowflake.style.animationDuration = Math.random() * 5 + 3 + 's'
	snowflake.style.opacity = Math.random()

	document.body.append(snowflake)

	setTimeout(() => {
		snowflake.remove()
	}, 8000)
}

setInterval(createSnow, 50)

Podgląd na żywo: https://codepen.io/majek93/pen/vYJjYNY

Jak więc widzicie, sam skrypt nie jest wcale taki skomplikowany, dlatego przygotowałem dla Was małe wyzwanie! 😉
Spróbujcie dodać do kodu możliwość tworzenia się zasp śnieżnych na dole strony. Im więcej śniegu spadnie, tym większa powinna być zaspa (może to być zwykły biały prostokąt).

PODPOWIEDŹ: Można do tego wykorzystać div z białym tłem, którego wysokość będzie rosła wraz z ilością wygenerowanych płatków śniegu (++). 🙂
Rozwiązaniem możesz pochwalić się na naszym Discordzie!

Chcesz nauczyć się tworzyć profesjonalne strony internetowe? Sprawdź nasze kursy! 🙂

www.MMCSchool.pl