halloween.js / Ghost

Add Halloween effects to Ghost

Ghost has site-wide code injection built in, so no theme edit is needed.

Steps

  1. Open Settings → Advanced → Code injection in Ghost Admin. Some versions list Code injection directly under Settings.
  2. Paste the snippet below into Site footer.
  3. Save and reload your 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

Other platforms

All options on the halloween.js home page, full documentation on GitHub.