halloween.js

Install guide · HTML website

Add Halloween effects to HTML website

On a hand-written or static-generated site you control the page source, so there are two equally valid ways to switch the effects on. The paste-only snippet is the simplest.

Steps

  1. Open the HTML file, or the shared layout or template that every page uses.

  2. Paste the snippet below just above the closing </body> tag.

  3. Save, deploy, and reload the page.

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>

Install once, then leave it. The effects switch on by themselves every year from 18 October to 2 November and stay off the rest of the time. There is nothing to remove afterwards. Installed earlier? You will see nothing until 18 October. That is expected, not a bug.

Check that it works

  1. Open your live site in a private window and reload without cache.

  2. Between 18 October and 2 November you should see webs in the screen corners and eyes blinking within a few seconds. Outside those dates the page looks unchanged.

Good to know

  • Want to test outside the season? Open the playground, set the active season to cover today and copy the snippet it generates.
  • 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.
  • You can also put the classes straight on the tag, for example <body class="halloween halloween-eyes halloween-witches">, and load the library with only the first line of the snippet (the <script src> tag). It can sit in <head> or at the end of <body>. See the quick start.
  • Static site generators such as Eleventy, Hugo or Jekyll: put the snippet in the base layout so every page gets it.
  • Nothing showing in season? See troubleshooting.