jqFuwatto
What is jqFuwatto?
jqFuwatto is jQuery plugin, enables to move element, images, or blocks moves "Fuwatto".
"Fuwatto" is Japanese onomatopoeia of "things moves fluffy".
How to use
- Load jQuery Script
- Load CDN or downloaded jqFuwatto
<head> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous" ></script> <!-- Use CND --> <script src="https://raw.githubusercontent.com/yn1323/jqFuwatto/master/dist/jqFuwatto.umd.js" defer></script> <!-- Use downloaded module(https://github.com/yn1323/jqFuwatto/releases) --> <script src="jqFuwatto.umd.js" defer></script> </head>
- Call jqFuwatto after DOM gets ready
$(someSelector).fuwatto();
Options
$(jQuerySelector).fuwatto({
duration: 1000,
slde: 'right-left',
distance: 500,
});| Key | Type | Default | Description |
|---|---|---|---|
| duration | number |
2000 | Slide, show duration(ms) |
| side | string |
'' | Way to slide. 'left-right', 'right-left', 'top-bottom', 'bottom-top' are accepted. '' won't slide. |
| distance | number |
500 | Distance to slide the element.(px) |
For Contributers
Setup
- Install
git clone git@github.com:yn1323/jqFuwatto.git cd jqFuwatto npm install - Commands
- Launch develop mode:
npm run dev - Build document(GitHub Page):
npm run build:doc - Bundle modules:
npm run build:bundle - Build document & Bundle modules:
npm run build
- Launch develop mode:
- Static html, js test
- Open statc.html with Live Server
Support
Checked jQuery Version
- 3.6.0
- 2.2.4
- 1.12.4
Other versions may work properly.
browsers
- Chrome
✅ - IE
❌ - Firefox
❓ - Safari
❓
License
MIT