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

Description and use

halloween.js automatically activates Halloween effects when the class "halloween" is added to <body>, without manual init, and limits them to the season (Oct 18–Nov 2).

Problem

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

Outcome

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.

Workflow

• 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.

Evidence

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

Source

A MutationObserver watches the DOM and reacts.

Source

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

Source