Apply Skew Effect To Any Block Element - Skew.js

Skew.js is a dead simple jQuery/JavaScript plugin for skewing any block element using CSS3 2D transforms. Fully responsive and mobile compatible.

How to use it:

1. Download and place the skew.min.js script after jQuery library but before the closing body tag.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="skew.min.js"></script>

2. Create a block element on the page.

<div class="box">
  Skew
</div>

.box {
  height: 300px;
  width: 100%;
  background-color: #333;
  line-height: 300px;
  text-align: center;
}

3. Call the function skew to skew the block element along the X and/or Y-axis by given angles.

$(function() {
  $('.box').skew({
    x: 50, // default: 0
    y: 10 // default: 0
  });
});

4. You can specify the angles on different screen widths.

$(function() {
  $('.box').skew({
    x: 50,
    y: 10,
    breakpoints: [
      {
        break: 1024
        x: 50,
        y: 10
      },
      {
        break: 768,
        x: 20
      },
      {
        break: 480,
        y: 50
      }
    ]
  });
});

5. Config the debounce.

$(function() {
  $('.box').skew({
    x: 50,
    y: 10,
    debounce: true,
    debounceTime: 50
  });
});

6. Set the unskew content. The value can be true/false or a selector.

$(function() {
  $('.box').skew({
    x: 50,
    y: 10,
    unskewContent: false
  });
});

7. API methods.

// update options
$('.box').skew('update', object);

// destroy
$('.box').skew('destroy');

Changelog:

v0.7.1 (2018-09-08)

• BUGFIX: While unskewing content, text nodes aren't ignored

v0.7 (2018-09-05)

• Update

---

This awesome jQuery plugin is developed by wiserim. For more Advanced Usages, please check the demo page or visit the official website.