Flying Santa
Fun little christmas gimmick Web Component, works anywhere, based on Lit and TypeScript.
Usage
npm i @divriots/flying-santa<script type="module">
import '@divriots/flying-santa';
</script>
<flying-santa></flying-santa>Or if you want to extend the components
import { FlyingSanta, SantaPresent } from '@divriots/flying-santa';Or from a CDN without needing NPM
<script type="module" src="https://unpkg.com/@divriots/flying-santa/dist/index.js?module"></script>
<flying-santa></flying-santa>Features
- Configure the interval speed at which Santa changes direction with the
change-speedattribute (default 5000, which is milliseconds) - Configure speed amplifier to change how fast Santa travels with the
speedattribute (default 1) - Change the distance at which Santa starts throwing presents with the
presents-distanceattribute (default 100, which is in pixels) - Change the interval at which Santa throws presents with the
presents-interval(default 100) - Configure the gravity strength pulling on the thrown presents with the
presents-drop-speed(default 0.5)
SPA accumulating Santas
Note that Santa can be put anywhere on the page, and then it will insert itself into <html> element and fly all over your page.
If you use SPA pattern and have the flying-santa on multiple pages, the number of Santas will accumulate.
Therefore, you probably want to clean up the Santas on route switching, there's a util for that:
import { cleanup } from '@divriots/flying-santa';
// whenever you switch routes call this before the new page renders
// if you're using a different tag-name for your Santa element, pass it as an argument
cleanup();