Halloween Effects for Any Website, Turned On by One CSS Class

Описание и применение

Библиотека halloween.js автоматически активирует хэллоуинские эффекты при добавлении класса "halloween" к <body>, без необходимости ручного инициализации, и ограничивает их работу только в сезон (18 окт–2 ноя).

Задача

Integrating seasonal visual effects into a website without requiring explicit initialization code and ensuring they activate only during a specific calendar window.

Результат

The library eliminates the need for manual init calls, automatically synchronizes with dynamic class changes, and gates effects to a seasonal window, reducing maintenance overhead and preventing silent failures.

Рабочий процесс

• 1. Include halloween.js via script tag or npm install.
• 2. Add class="halloween" to the <body> element (or toggle it dynamically).
• 3. Optionally add sub‑classes (e.g., halloween-eyes) to enable specific effects.
• 4. The library’s MutationObserver detects class changes and runs syncEffectsToClassList.
• 5. Effects run only if the current date falls within the default or overridden season window.
• 6. For custom season dates, set data-halloween-start and data-halloween-end attributes on <body> or use ?s= and ?e= query params in the script src.

Доказательства

Drop in a script tag or npm install it, add class="halloween" to <body>, and the page is decorated.

Источник

A MutationObserver watches the DOM and reacts.

Источник

The library is seasonal by default: effects only run inside a window around Halloween (18 Oct–2 Nov).

Источник