Install guide · Webflow

Add Halloween effects to Webflow

Webflow does not let you edit the <body> tag directly, so the snippet below adds the classes from a script. Custom code needs an active Site plan or a paid Workspace plan.

Steps

1. Open Site settings → Custom code.

2. Paste the snippet into Footer code (the end of <body>).

3. Save, then publish the site. Custom code does not run in the Designer, only on the published 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>

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.
• To enable it on a single page, paste the snippet into Page settings → Custom code → Before </body> tag of that page instead.
• Nothing showing in season? See troubleshooting.