1️⃣ Nyisd meg az oldalad szerkesztésre

Systeme.io → Pages → kiválasztod az oldalt → Edit page

2️⃣ Húzz be egy Raw HTML elemet

A bal oldali elemek közül keresd meg a Raw HTML-t, és tedd be az oldalra (lehet akár legalul is).

3️⃣ Másold be ezt a kódot

Kattints a Raw HTML blokkra → Edit code, és illeszd be ezt:

<div class="kg-snow" aria-hidden="true"></div>

<style>

.kg-snow{

position:fixed; inset:0; pointer-events:none; z-index:19999;

background-image:

radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.1px),

radial-gradient(circle, rgba(255,255,255,.9) 0 1.6px, transparent 1.7px),

radial-gradient(circle, rgba(255,255,255,.85) 0 2.2px, transparent 2.3px);

background-size:240px 360px, 320px 480px, 420px 640px;

background-position:0 0, 0 0, 0 0;

filter:drop-shadow(0 0 2px rgba(255,255,255,.6));

opacity:.85; will-change:background-position;

animation:kg-snow-down 38s linear infinite, kg-snow-drift 52s linear infinite;

}

@keyframes kg-snow-down{ to{ background-position:0 110vh, 0 220vh, 0 330vh; } }

@keyframes kg-snow-drift{ to{ background-position:12vw 120vh, -8vw 240vh, 6vw 360vh; } }

@media (max-width:768px){ .kg-snow{ background-size:260px 420px, 360px 540px, 480px 720px; opacity:.45; } }

</style>

Majd kattints Save/Mentés gombra.

4️⃣ Mentsd el az oldalt és nézd meg élesben

Kattints Save, majd a preview nézetre, nézd meg élő oldalon (az előnézet/ preview néha nem mutatja jól).

Több hó → a background-size számokat kicsinyítsd (pl. 240px helyett 180px)

Kevesebb hó → a background-size számokat növeld (pl. 240px helyett 360px)

Lassabb esés → az animation értékeit növeld (pl. 38s helyett 50s)

Gyorsabb esés → az animation értékeit csökkentsd (pl. 38s helyett 25s)

Töröld a Raw HTML blokkot → kész, nincs több hó.

Ha valami (pl. menü, popup) eltakarja a havat, emeld a z-index értéket 29999-re.

A kód nem lassít, nem blokkol semmit.

Teljesen mobilbarát.

🎁 Ez a hóesés egy ingyenes ajándék – bárki forrásmegjelöléssel használhatja és megoszthatja szabadon