This time I will share jQuery Plugin and tutorial about Apply Skew Effect To Any Block Element – Skew.js, hope it will help you in programming stack.
| File Size: | 8.93 KB |
|---|---|
| Views Total: | 1476 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
1 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" |
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="skew.min.js"></script> |
2. Create a block element on the page.
1 |
<div class="box"> |
2 |
Skew |
3 |
</div> |
1 |
.box { |
2 |
height: 300px; |
3 |
width: 100%; |
4 |
background-color: #333; |
5 |
line-height: 300px; |
6 |
text-align: center; |
7 |
} |
3. Call the function skew to skew the block element along the X and/or Y-axis by given angles.
1 |
$(function() { |
2 |
$('.box').skew({ |
3 |
x: 50, // default: 0 |
4 |
y: 10 // default: 0 |
5 |
}); |
6 |
}); |
4. You can specify the angles on different screen widths.
01 |
$(function() { |
02 |
$('.box').skew({ |
03 |
x: 50, |
04 |
y: 10, |
05 |
breakpoints: [ |
06 |
{ |
07 |
break: 1024 |
08 |
x: 50, |
09 |
y: 10 |
10 |
}, |
11 |
{ |
12 |
break: 768, |
13 |
x: 20 |
14 |
}, |
15 |
{ |
16 |
break: 480, |
17 |
y: 50 |
18 |
} |
19 |
] |
20 |
}); |
21 |
}); |
5. Config the debounce.
1 |
$(function() { |
2 |
$('.box').skew({ |
3 |
x: 50, |
4 |
y: 10, |
5 |
debounce: true, |
6 |
debounceTime: 50 |
7 |
}); |
8 |
}); |
6. Set the unskew content. The value can be true/false or a selector.
1 |
$(function() { |
2 |
$('.box').skew({ |
3 |
x: 50, |
4 |
y: 10, |
5 |
unskewContent: false |
6 |
}); |
7 |
}); |
7. API methods.
1 |
// up<a href="https://www.jqueryscript.net/time-clock/">date</a> options |
2 |
$('.box').skew('update', object); |
3 |
4 |
// destroy |
5 |
$('.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.
source : jquery.net
