https://github.com/divriots/flying-santa
Flying Santa christmas component
https://github.com/divriots/flying-santa
Last synced: 11 months ago
JSON representation
Flying Santa christmas component
- Host: GitHub
- URL: https://github.com/divriots/flying-santa
- Owner: divriots
- Created: 2021-11-30T12:57:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-10T11:06:41.000Z (over 4 years ago)
- Last Synced: 2025-03-01T14:16:51.421Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://webcomponents.dev/view/MW0MuMtZp2VIRSFEzvQ0
- Size: 337 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flying Santa
Fun little christmas gimmick Web Component, works anywhere, based on [Lit](https://lit.dev) and [TypeScript](https://www.typescriptlang.org/).
[See landing page](https://divriots.github.io/flying-santa/)
[See the full demos & code](https://webcomponents.dev/edit/MW0MuMtZp2VIRSFEzvQ0/stories/index.stories.js)
## Usage
```sh
npm i @divriots/flying-santa
```
```html
import '@divriots/flying-santa';
```
Or if you want to extend the components
```js
import { FlyingSanta, SantaPresent } from '@divriots/flying-santa';
```
Or from a CDN without needing NPM
```html
```
## Features
- Configure the interval speed at which Santa changes direction with the `change-speed` attribute (default 5000, which is milliseconds)
- Configure speed amplifier to change how fast Santa travels with the `speed` attribute (default 1)
- Change the distance at which Santa starts throwing presents with the `presents-distance` attribute (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 `` 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:
```js
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();
```
