halloween.js / 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

In the page editor open the block library, go to Other and add the T123 block (Embed HTML Code).
Paste the snippet below into the block and save.
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>

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.
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? 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.