https://github.com/nakasyou/ha

https://github.com/nakasyou/ha

effect effects frontend javascript wave

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/nakasyou/ha
• Owner: nakasyou
• License: mit
• Created: 2024-04-22T04:47:18.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-10-01T03:04:19.000Z (about 1 month ago)
• Last Synced: 2024-10-11T17:43:53.438Z (27 days ago)
• Topics: effect, effects, frontend, javascript, wave
• Language: TypeScript
• Homepage: https://jsr.io/@ns/ha
• Size: 38.1 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @ns/ha | Hajs

Ha (波, means wave) is a JavaScript library to make wave.

Demo: https://nakasyou.github.io/ha

## Usage

You can use JSR.

```shell

deno add @ns/ha

bunx jsr add @ns/ha

pnpx jsr add @ns/ha

yarn dlx jsr add @ns/ha

npx jsr add @ns/ha

```

You can do like this:

```ts

const closeWave = ha({}).do({

  target: document.getElementById('button') as HTMLButtonElement,

  waveDuration: 100, // milliseconds, wave speed

  gooutDuration: 100, // milliseconds, speed for going out

  color: '#aaa', // gray

  opacity: 0.5, // Opacity of wave

  pos: {

    clientX: 0

    clientY: 0

  }, // Position

})

setTimeout(() => closeWave(), 100) // You have to close wave manually.

```

Or, you can save settings when wave init:

```ts

const btnWave = wave({

  target: document.getElementById('button') as HTMLButtonElement,

  duration: 100, // milliseconds, speed

  color: '#aaa' // gray

})

btnWave.do({

  pos: ...

})

```

Extend it:

```ts

const redWave = btnWave.extend({

  color: 'red',

})

```

If you want to use it for buttons, you can use `@ns/ha/events`.

```ts

import { waveAsPointerDown } from '@ns/ha/events'

const mywave = ha({...})

document.getElementById('my-button')

  .addEventListener('pointerdown', waveAsPointerDown(mywave))

```