maskew - A JS Library For Skewing The Shapes Of Elements

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.