jqfuwatto
v0.2.0
Published
Plugin enables to move element, images, or blocks moves fluffy.
Downloads
4
Readme
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) |
⚠️ If using slide option, element should have height & width.(Especially for image)
For Contributers
Setup
- Install
git clone [email protected]: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