mkg-up
mkg-up focuses to improve user interaction for mobile and web user interfaces. It's for developers who building web applications. It's library agnostic and modular.
- You can easily mark html element with different states (loading, disable, coverback states)
- redirect user to html element with smooth scroll. also scroll command places targeted element's position to most readable location. it's calculate spaces throught to golden ratio. (if sizes of element is smaller than viewport)
- highlight with stylish customizable effect
- add inform text for html elements
- easy to use
- modular usage
- library agnostic
- it's cross browser with ie9+ support
- only css animations
highlight type
to highlight target content
coverback type
coverup back stage for purpose of highlight to target content
loading type
to coverup the target content area with loading state (eg. waiting for ajax request)
disable type
to coverup target area for can not be unaccessable by user
and aditional features are scroll and displaying inform text for areas.
Installition
install with npm
npm install mkg-up --save
or install via bower
bower install mkg-up --save
or you can get the latest release of mkg-up
Usage
//or you can prefer minified version
if you use module system, look modular usage section
Example
;
Shorthand Usage
//there is shorthand for fast usage directly to html element. It's pretty easy right?documentbody;
modular usage with webpack
// import default mUp function es6 style;; //or you can import feature you want;; //commonJS usagevar mUp = ;; var loading = loading;;
Options with default values
duration:null //(number), null for auto decide, 0 for infinite scroll:true //(bool) scrollSpeed:1 //(float), speed ratio for changin velocity fixed:false //(bool), fixed positioned targets, its also disable scroll feature color:null //(text), null: getting from stylesheet textColor:null //(text), null: getting from stylesheet, setting loaders icon color and tip's text color onScrollComplete:null //(function) onShow:null //(function) onHide:null //(function), also triggers when destroying opacity:null //(float), null: getting from stylesheet
License
The code is released under the MIT License.