halloween.js / Wix
Add Halloween effects to Wix
Wix has a Custom Code section in the site settings. The <body> tag is not
editable, so the snippet below adds the classes from a script. Wix only allows custom code
on a published site with a connected domain.
Steps
- Open Settings → Advanced → Custom Code in your site dashboard.
- Click Add Custom Code and paste the snippet below.
- Name it (for example "Halloween"), set Add Code to Pages to All pages and Place Code in to Body - end.
- Apply, then publish the site.
The snippet
One paste, no other files. It loads halloween.js 1.0.3 from jsDelivr and turns on webs in two corners, blinking eyes, flying witches, a dropping spider and a rising tombstone.
<script src="https://cdn.jsdelivr.net/npm/halloween.js@1.0.3/dist/halloween.iife.js"></script>
<script>
(function () {
function apply() {
document.body.classList.add("halloween", "halloween-screen-left-top", "halloween-screen-right-bottom", "halloween-eyes", "halloween-witches", "halloween-spider-drop", "halloween-tombstones");
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", apply);
} else {
apply();
}
})();
</script>
Make it yours
Pick corners, effects, intensity, color and season dates in the playground and open the Paste-only tab. It produces this same snippet, library line included, with your choices.
Good to know
- The effects only appear in a window around Halloween, 18 October to 2 November by default. Change the dates in the playground to see them on another day.
- Ambient effects stop when a visitor has reduced motion turned on. The screen-corner webs stay.
- The effects sit in a fixed layer and never shift your page layout.
- The Wix editor does not run custom code. Open the published site to see the effects.
- Nothing showing? Reload without cache, then check that the snippet is on the live site and that no content blocker is stripping it.
Other platforms
All options on the halloween.js home page, full documentation on GitHub.