halloween.js

Install guide · Tilda

Add Halloween effects to Tilda

The quickest way on Tilda is a standard HTML block on the page. The <body> tag is not editable, so the snippet below adds the classes from a script.

Steps

  1. In the page editor open the block library, go to Other and add the T123 block (Embed HTML Code).

  2. Paste the snippet below into the block and save.

  3. Publish the page. The block shows only as text in the editor and preview, so check the published page. Repeat for every page that should have the effects.

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.
  • For all pages at once, paste the same snippet into the HTML code for the head section under Site Settings → More, then republish all pages. Check that your Tilda plan includes custom code.
  • Nothing showing in season? See troubleshooting.