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

说明与用途

halloween.js 在 <body> 添加 "halloween" 类时自动激活万圣节效果，无需手动初始化，并仅在指定季节（10月18日–11月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).

来源