Apply Skew Effect To Any Block Element - Skew.js

Apply Skew Effect To Any Block Element - Skew.js

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

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');

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

  • Publication date: 05.08.2018
  • Source