Dodaj troszkę świątecznej magii na swojej stronie... z odrobiną kodu

Jeśli chcesz dodać subtelny, wizualny efekt na swojej stronie internetowej, który nie zaburza funkcjonalności (tutaj nienawidzimy efektów które utrudniają nawigację) i pozwala użytkownikom swobodnie korzystać z treści, wystarczy krótki skrypt JavaScript. W tym artykule pokażę Ci, jak krok po kroku wdrożyć prosty i lekki efekt śniegu, który zachwyci odwiedzających Twoją stronę.

Dodanie delikatnego efektu padającego śniegu, który nie przeszkadza w nawigacji, można osiągnąć za pomocą prostego skryptu w JavaScript. Oto przykład:

Efekt śniegu za pomocą JavaScript, osadzanie kodu w WordPressie:

Jeśli dodajesz kod w bloku HTML lub za pomocą wtyczki, upewnij się, że jest opakowany w tag <script>:

<script>
// Konfiguracja śniegu
const snowflakeCount = 50; // Liczba płatków śniegu
const snowflakes = [];

for (let i = 0; i < snowflakeCount; i++) {
const snowflake = document.createElement(„div”);
snowflake.classList.add(„snowflake”);
document.body.appendChild(snowflake);

snowflake.style.left = Math.random() * window.innerWidth + „px”;
snowflake.style.animationDuration = 2 + Math.random() * 3 + „s”;
snowflake.style.opacity = Math.random();
snowflakes.push(snowflake);
}

window.addEventListener(„resize”, () => {
snowflakes.forEach(snowflake => {
snowflake.style.left = Math.random() * window.innerWidth + „px”;
});
});
</script>

Dodaj style CSS: Upewnij się, że style są wprowadzone, np. w sekcji Dostosuj > Dodatkowy CSS: