forked from dmotz/maskew
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (93 loc) · 3.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Dan Motzenbecker">
<meta name="description" content="Maskew - a javascript library for skewing the shapes of elements">
<title>Maskew - a javascript library for skewing the shapes of elements</title>
<link href="demo/demo.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="demo/favicon.png">
</head>
<body>
<section>
<h1 class="photo">.</h1>
<h1>M</h1>
<h1>A</h1>
<h1>S</h1>
<h1>K</h1>
<h1>E</h1>
<h1>W</h1>
</section>
<section>
<span>Ma<em>sk</em>ew</span>
<span>by <a href="http://oxism.com">Dan Motzenbecker</a></span>
<span>a JS library for skewing the shapes of elements</span>
<span>< 5k</span>
<span>mobile friendly</span>
<span>no dependencies <em>(but a modern browser)</em></span>
<span>optional jQuery plugin</span>
<span>
<a href="maskew.js">maskew.js</a> /
<a href="maskew.min.js">maskew.min.js</a>
</span>
<span><a href="https://github.com/dmotz/maskew">github</a></span>
</section>
<section id="demos">
<div class="demo" id="demo1"></div>
<div class="demo" id="demo2"></div>
<div class="demo" id="demo3"></div>
<div class="demo" id="demo4"></div>
<div class="demo" id="demo5"></div>
<div class="demo" id="demo6"></div>
<div id="count-demo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</section>
<section>
<h3>Use it:</h3>
<pre>var maskew = new Maskew(document.getElementById('skew-me'), angle);</pre>
<h3>With jQuery:</h3>
<pre>var $maskew = $('#skew-me').maskew(angle);</pre>
<h3>Skew it:</h3>
<pre>
maskew.skew(9);
// or with jQuery:
$maskew.maskew('skew', 20);
// or:
$maskew.maskew().skew(20);
</pre>
<h3>Add some touch:</h3>
<pre>
// from the start:
var touchMe = new Maskew(document.getElementById('skew-me'), angle, { touch: true });
// or:
maskew.setTouch(true);
// disable touch:
maskew.setTouch(false);
</pre>
<br>
<h3>See also:</h3>
<a href="http://oridomi.com">oriDomi</a> - fold up the DOM like paper
</section>
<footer>
ex libris <a href="http://oxism.com">oxism.com</a> / <a href="http://twitter.com/dcmotz">@dcmotz</a>
</footer>
<script src="maskew.js"></script>
<script src="demo/demo.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30392798-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>