-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
290 lines (223 loc) · 11.1 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tilt.js • Touch Feedback on HTML Elements</title>
<meta name="description" content="Tilt: A micro script that simulates touch feedback on HTML elements.">
<meta name="author" content="Rik Schennink">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1 class="tilt">
<a href="http://rikschennink.github.io/tilt/">Tilt<span>.js</span></a>
</h1>
<div class="tagline">
<p><strong>A 2 kB, dependency free, micro script that simulates touch feedback on HTML elements.</strong></p>
<p>Give it a try, tap or click the logo.</p>
</div>
<nav role="navigation">
<h2>Navigation</h2>
<ul>
<li><a data-tilt-pivot="none" class="tilt" href="#setup">Setup</a></li>
<li><a data-tilt-pivot="none" class="tilt" href="#demo">Demo</a></li>
<li><a data-tilt-pivot="none" class="tilt" href="#options">Options</a></li>
<li><a data-tilt-pivot="none" class="tilt" href="#api">API</a></li>
<li><a data-tilt-pivot="none" class="tilt" href="#download">Download</a></li>
<li><a data-tilt-pivot="none" class="tilt" href="#issues">Tips</a></li>
</ul>
</nav>
<section id="setup">
<h2>Setup</h2>
<p>You're good to go in two simple steps.</p>
<ol>
<li>Include the <code>tilt.kickstart.js</code> file by adding the following script tag anywhere on your webpage <code><script src="tilt.kickstart.js"></script></code>.</li>
<li>Add the <code>.tilt</code> class to the element you want to tilt.</li>
</ol>
<p>Done!</p>
<p>Okay, there's one little gotcha, your element needs to be a <a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">non inline element</a> for this to work. Basically anything but <code>display: inline</code> will work.</p>
</section>
<section id="demo">
<h2>Demo</h2>
<h3>Swinging Tabs</h3>
<ul class="tilt-tabs-sample">
<li class="tilt" data-tilt-pivot="top" data-tilt-depth="20">Woo!</li>
<li class="tilt" data-tilt-pivot="top" data-tilt-depth="20">Whee!</li>
<li class="tilt" data-tilt-pivot="top" data-tilt-depth="20">Me too!</li>
<li class="tilt" data-tilt-pivot="top" data-tilt-depth="20">Yay!</li>
</ul>
<h3>Keypad</h3>
<div class="tilt-keypad-sample">
<button class="tilt" data-tilt-pivot="none">1</button>
<button class="tilt" data-tilt-pivot="none">2 <span>abc</span></button>
<button class="tilt" data-tilt-pivot="none">3 <span>def</span></button>
<button class="tilt" data-tilt-pivot="none">4 <span>ghi</span></button>
<button class="tilt" data-tilt-pivot="none">5 <span>jkl</span></button>
<button class="tilt" data-tilt-pivot="none">6 <span>mno</span></button>
<button class="tilt" data-tilt-pivot="none">7 <span>pqrs</span></button>
<button class="tilt" data-tilt-pivot="none">8 <span>tuv</span></button>
<button class="tilt" data-tilt-pivot="none">9 <span>wxyz</span></button>
<button class="tilt" data-tilt-pivot="none">0</button>
</div>
<h3>Metro Tiles</h3>
<div class="tilt-metro-sample">
<div class="tilt"><span>Home</span></div>
<div class="tilt"><span>Contact</span></div>
<div class="tilt"><span>About</span></div>
</div>
</section>
<section id="options">
<h2>Options</h2>
<p>Using the kickstarter script you can pass options to tilted HTML elements as shown below:</p>
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-tilt-shadow</span>=<span class="hljs-value">"false"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tilt"</span>></span>Go Tilt!<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code></pre>
<p>The following options are available.</p>
<table class="options">
<thead>
<tr>
<th>Option</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<th>pivot</th>
<td>String</td>
<td>"center"</td>
<td>
Controls around what point the tile tilts. Possible values are:
<ul>
<li>"center"</li>
<li>"top"</li>
<li>"right"</li>
<li>"bottom"</li>
<li>"left"</li>
<li>"none"</li>
</ul>
</td>
</tr>
<tr>
<th>shadow</th>
<td>Boolean</td>
<td>true</td>
<td>
Control whether the shadow inside the tile should be rendered or not.
</td>
</tr>
<tr>
<th>depth</th>
<td>Number</td>
<td>15</td>
<td>The maximum depth the tile can be pressed.</td>
</tr>
<tr>
<th>perspective</th>
<td>String</td>
<td>"500px"</td>
<td>The perspective to render the 3d effects in.</td>
</tr>
</tbody>
</table>
<p>Elements that are being tilted are called tiles. If you want to manually create tiles instead of using the kickstart functionality embed the <code>tilt.js</code> script and use the <code>Tile</code> class as shown below.</p>
<pre class="hljs"><code><span class="hljs-keyword">var</span> myTile = <span class="hljs-keyword">new</span> Tile(element, {
pivot: <span class="hljs-string">"none"</span>,
shadow: <span class="hljs-literal">false</span>,
depth: <span class="hljs-number">30</span>,
perspective: <span class="hljs-string">"400px"</span>
});</code></pre>
</section>
<section id="api">
<h2>API</h2>
<p>There are two API's. One for Tile instances and the other is for the kickstarter logic called InstaTilt. </p>
<h3 id="instatilt-api">InstaTilt</h3>
<p>The InstaTilt API allows you to access tiles once they've automatically been created. You can then manipulate them with the Tile API or unload them.</p>
<table class="api">
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>parse(context)</th>
<td>
Parses a given context for <code>.tilt</code> classes and turns the elements into Tiles.
</td>
</tr>
<tr>
<th>getTileByElement(element)</th>
<td>
Returns the Tile instance for the supplied element, the element can either be a query selector or a DOM node reference. You can use the <a href="#tile-api">Tile API</a> on the returned value.
</td>
</tr>
<tr>
<th>unload(element)</th>
<td>
Removes the Tile instance from the supplied element. Cleans up event listeners and frees memory.
</td>
</tr>
</tbody>
</table>
<p>Get a tile instance by passing an element reference or a query selector string.</p>
<pre class="hljs"><code><span class="hljs-keyword">var</span> myTile = InstaTilt.getTileByElement(<span class="hljs-string">'.my-tile'</span>);</code></pre>
<h3 id="tile-api">Tile</h3>
<p>The Tile API is used for manipulating individual tiles.</p>
<table class="api">
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>tilt([x[, y]])</th>
<td>
Tilts the tile as if pressed at the given "x", "y" position. The position will be limited to the size of the tile. If no values are supplied the middle of the tile is used.
</td>
</tr>
<tr>
<th>untilt()</th>
<td>
Restores the tile in its original position.
</td>
</tr>
<tr>
<th>unload()</th>
<td>
Removes tilt from the element.
</td>
</tr>
</tbody>
</table>
</section>
<section id="download">
<h2>Download</h2>
<ul>
<li><a href="https://github.com/rikschennink/tilt/archive/master.zip">Download (2kB)</a></li>
<li><a href="https://github.com/rikschennink/tilt/">Fork on GitHub</a></li>
<li><a href="https://github.com/rikschennink/tilt/issues/">Submit issue</a></li>
</ul>
</section>
<section id="issues">
<h2>Tips</h2>
<h3>Problems with Jagged Edges on FireFox</h3>
<p>On Firefox rotating the tiles can result in jagged edges, to fix this add the following selector to your CSS file.
<pre><code><span class="hljs-class">.tilt</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">outline</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid transparent</span></span>; }</span></code></pre>
<p>Note that the above selector overrides the default focus outline. Beware of the resulting <a href="http://www.outlinenone.com/">accessibility issues</a>.</p>
<h3>Changing the Shadow Color</h3>
<p>You can change the shadow color of a pressed tile by setting a linear gradient on the shadow element Tilt generates. Tilt will adjust the gradient based on the interaction position. The shadow should be set in <code>rgba</code> values.</p>
<pre class="hljs"><code><span class="hljs-class">.my-tilted-element</span> <span class="hljs-class">.tilt-shadow-inner</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-function">linear-gradient</span>(<span class="hljs-function">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>), <span class="hljs-function">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,.<span class="hljs-number">25</span>))</span></span>;
}</span></code></pre>
</section>
</main>
<footer>
By <a href="http://rikschennink.nl">Rik Schennink</a> • <a href="http://twitter.com/rikschennink">@rikschennink</a>
</footer>
<script src="dist/tilt.kickstart.js"></script>
</body>
</html>