maskew - A JS Library For Skewing The Shapes Of Elements
File Size: | 577 KB |
---|---|
Views Total: | 877 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

maskew is a lightweight and mobile-friendly Javascript library (with optional jQuery plugin) that skews the shapes of elements without distorting their contents.
How to use it:
1. The html
<section id="demos"> <div class="demo" id="demo1"></div> </section>
2. Include maskew.js on your web page
<script src="maskew.js"></script>
3. The CSS
.demo { width: 245px; height: 301px; -webkit-background-size: 245px 301px; -moz-background-size: 245px 301px; background-size: 245px 301px; display: inline-block; margin-bottom: 2rem; } #demo1 { background-image: url("1.jpg"); }
4. The javascript
!function(){ document.addEventListener('DOMContentLoaded', function(){ var letters = document.getElementsByTagName('h1'), demos = document.getElementsByClassName('demo'); for(var i = 0, l = letters.length; i < l; i++){ new Maskew(letters[i], 6, { touch: true, anchor: 'bottom', showElement: 'inline-block' }); } for(i = 0, l = demos.length; i < l; i++){ new Maskew(demos[i], 12, { touch: true }); } new Maskew(document.getElementById('count-demo'), 12, { touch: true }); }, false); }();
Change Log:
v0.1.2 (2013-03-31)
- update build
v0.1.1 (2013-03-24)
- dropped khtml prefix
This awesome jQuery plugin is developed by dmotz. For more Advanced Usages, please check the demo page or visit the official website.