0.2.0 • Published 2 years ago

jqfuwatto v0.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

jqFuwatto

ghost

What is jqFuwatto?

jqFuwatto is jQuery plugin, enables to move element, images, or blocks moves "Fuwatto".
"Fuwatto" is Japanese onomatopoeia of "things moves fluffy".

Example Page

Gif

How to use

  1. Load jQuery Script
  2. 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>
  3. Call jqFuwatto after DOM gets ready
    $(someSelector).fuwatto();

Options

$(jQuerySelector).fuwatto({
   duration: 1000,
   slde: 'right-left',
   distance: 500,
});
KeyTypeDefaultDescription
durationnumber2000Slide, show duration(ms)
sidestring''Way to slide.'left-right', 'right-left', 'top-bottom', 'bottom-top' are accepted.'' won't slide.
distancenumber500Distance to slide the element.(px)

⚠️ If using slide option, element should have height & width.(Especially for image)

For Contributers

Setup

  1. Install
    git clone git@github.com:yn1323/jqFuwatto.git
cd jqFuwatto
npm install
  2. 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
  3. 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

jqueryscroll
jquery
@everything-registry/sub-chunk-1970@zalastax/nolb-jqf
0.2.0

2 years ago