Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wiserim/skew
Simple, lightweight dependency free library for skewing DOM elements in pixels.
https://github.com/wiserim/skew
dom-manipulation javascript jquery transform
Last synced: 5 days ago
JSON representation
Simple, lightweight dependency free library for skewing DOM elements in pixels.
- Host: GitHub
- URL: https://github.com/wiserim/skew
- Owner: wiserim
- License: mit
- Created: 2018-05-24T20:34:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-16T20:48:40.000Z (about 6 years ago)
- Last Synced: 2024-04-24T21:44:02.193Z (7 months ago)
- Topics: dom-manipulation, javascript, jquery, transform
- Language: JavaScript
- Homepage: https://wiserim.github.io/Skew/
- Size: 103 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**Skew** is a dependency free JavaScript library for performing skew transformations of DOM elements measured in pixels. It allows to keep element's skew by the same amount of pixels and unskew its content.
[](https://github.com/wiserim/Skew/releases) [](https://www.npmjs.com/package/skewjs) [](https://github.com/wiserim/Skew/blob/master/LICENSE) [](https://github.com/wiserim/Skew)
**Features:**
* calculation of skew transformation measured in pixels,
* unskew element's content,
* skew update on window resize,
* dependency free,
* can be used standalone with plain JavaScript or as jQuery plugin,
* responsiveness - breakpoints definition,
* configurable debouncing,
* cross-browser - supports IE9+ and modern browsers,
* lightweight - ~5kB minified.
***NPM***
```
npm install skewjs
```
***CDN***
[https://www.jsdelivr.com/package/npm/skewjs](https://www.jsdelivr.com/package/npm/skewjs)
## Getting started
Before closing `````` tag add:
```html
```
Then add script:
```javascript
window.onload = function() {
var Skew = new Skew('selector', {x: 50});
}
```
or use jQuery:
```javascript
$(function() {
$('selector').skew({x: 50});
});
```
## Syntax
JavaScript:
```javascript
var skewObj = new Skew('selector', {option: value});
//example
var skewObj = new Skew('.skew', {x: 50, y: 100, breakpoints: [{break: 768, x: 30}]});
skewObject.method(argument);
//example
skewObj.update({x: 30, breakpoints: [{break: 768, x: 15}]});
```
jQuery:
```javascript
$('selector').skew({option: value});
//example
$('.skew').skew({x: 50, y: 100, breakpoints: [{break: 768, x: 30}]});
$('selector').skew('method', argument);
//example
$('.skew').skew('update', {x: 30, breakpoints: [{break: 768, x: 15}]});
```
## Options
Option | Type | Default | Description
------------ | ------------- | ------------ | -------------
x | int | 0 | Element's skew on x axis in pixels.
y | int | 0 | Element's skew on y axis in pixels.
unskewContent | bool/string | false | Element's content unskew option / css selector of element's content to unskew ([see example](#unskew-option-example)).
breakpoints | array | [] | Array of objects containing breakpoints and setting objects ([see example](#breakpoints-option-example)).
debounce | boolean | true | Debounce on resize event.
debounceTime | int | 50 | Debounce time tollerance in ms.
beforeSkew | array/function | [] | Function/array of functions fired before skew ([see events](#events)).
afterSkew | array/function | [] | Function/array of functions fired after skew ([see events](#events)).
beforeElementSkew | array/function | [] | Function/array of functions fired before single element's skew ([see events](#events)).
afterElementSkew | array/function | [] | Function/array of functions fired after single element's skew ([see events](#events)).
### Unskew option example
```javascript
//Unskew element's content
var skewObj = new Skew(
'.skew',
{
x: 30,
unskewContent: true
}
);
//Unskew element's content matching css selector
var skewObj = new Skew(
'.skew',
{
x: 30,
unskewContent: '.skew-content'
}
);
//Don't unskew element's content (default)
var skewObj = new Skew(
'.skew',
{
x: 30,
unskewContent: false
}
);
```
### Breakpoints option example
```javascript
var skewObj = new Skew(
'.skew',
{
x: 30,
y: 60,
breakpoints: [
{
break: 1024
x: 60,
y: 30,
unskewContent: true,
debounce: false,
debounceTime: 30
},
{
break: 768,
x: 30,
unskewContent: '.skew-content'
},
{
break: 480,
y: 60
}
]
}
);
```
## Methods
Method | Arguments | Description
------------ | ------------- | ------------
skew | | Recalculates skew
update | options : object | Update Skew options
destroy | | Destroys Skew
beforeSkew | listener : function | Add listener to beforeSkew event ([see events](#events))
afterSkew | listener : function | Add listener to afterSkew event ([see events](#events))
beforeElementSkew | listener : function | Add listener to beforeElementSkew event ([see events](#events))
afterElementSkew | listener : function | Add listener to afterElementSkew event ([see events](#events))
## Events
Events has been added with version 0.7.
Event | Params | Description
------------ | ------------- | ------------
beforeSkew | skewObj, targets | Before start of skewing elements.
afterSkew | skewObj, targets | After skewing all elements.
beforeElementSkew | skewObj, target | Before skew of every element.
afterElementSkew | skewObj, target | After skew of every element.