Skip to content

Latest commit

 

History

History
174 lines (146 loc) · 5.25 KB

README.md

File metadata and controls

174 lines (146 loc) · 5.25 KB
Raw

Skew

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.

GitHub release npm GitHub Github file size

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

Getting started

Before closing <body> tag add:

<script type="text/javascript" src="skew.min.js"></script>
<!--CDN-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/skewjs@0.7.1/skew.min.js"></script>

Then add script:

window.onload = function() {
  var Skew = new Skew('selector', {x: 50});
}

or use jQuery:

$(function() {
  $('selector').skew({x: 50});
});

Syntax

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:

$('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).
breakpoints array [] Array of objects containing breakpoints and setting objects (see 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).
afterSkew array/function [] Function/array of functions fired after skew (see events).
beforeElementSkew array/function [] Function/array of functions fired before single element's skew (see events).
afterElementSkew array/function [] Function/array of functions fired after single element's skew (see events).

Unskew option example

//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

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)
afterSkew listener : function Add listener to afterSkew event (see events)
beforeElementSkew listener : function Add listener to beforeElementSkew event (see events)
afterElementSkew listener : function Add listener to afterElementSkew event (see 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.