-
Notifications
You must be signed in to change notification settings - Fork 44
/
Copy pathindex.html
96 lines (82 loc) · 3.24 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>cubic-bezier.com</title>
<link href="style.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="about:blank" />
</head>
<body>
<header>
<h1>
<a href="" class="permalink"><code>cubic-bezier(<span id="values"><span
id="P1x" class="param">0</span>,<span
id="P1y" class="param">0</span>,<span
id="P2x" class="param">.25</span>,<span
id="P2y" class="param">1</span></span>)</code></a>
<div id="copybuttons">
<button id="copy">Copy</button>
<button id="copyoptionstoggle">▾</button>
<div id="copyoptions">
<input type="text" id="copystatement" value="cubic-bezier(1,2,3,4)" />
<input type="text" id="copycss" value="1s cubic-bezier(.88,-8.88,1,1)" />
<input type="text" id="copyvalue" value="1,2,3,4" />
</div>
</div>
</h1>
</header>
<div id="curve-display">
<div class="coordinate-plane">
<span class="control-point" id="P0"></span>
<button class="control-point" id="P1" style="left:50px; top: 250px;"></button>
<button class="control-point" id="P2" style="left:250px; top: 250px;"></button>
<span class="control-point" id="P3"></span>
<canvas height="600" width="300" id="curve"></canvas>
<button id="save">Save to Library</button>
</div>
</div>
<section id="preview">
<h1>
Preview & compare
<button id="go">Go!</button>
</h1>
<p>
<label for="duration">Duration:</label>
<input type="range" id="duration" value="1" min="0.1" max="10" step="0.1" pattern="\d*\.?\d+" size="3" />
<output for="duration">1 second</output>
</p>
<canvas id="current" width="60" height="60"></canvas>
<canvas id="compare" width="60" height="60"></canvas>
</section>
<section id="library">
<h1>
Library
<button id="import">Import</button>
<button id="export">Export</button>
</h1>
<p>Click on a curve to compare it with the current one.</p>
<footer><strong>Tip:</strong> Right click on any library curve and select “Copy Link Address” to get a permalink to it which you can share with others</footer>
<aside>
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=cubicbeziercom" id="_carbonads_js"></script>
</aside>
<form id="importexport">
<label for="json">To import curves, paste the code below and click “Import”</label>
<label for="json">Copy the code and save to a file to export</label>
<textarea id="json"></textarea>
<button>Import</button>
<button>Close</button>
</form>
</section>
<footer>
Made by <a href="https://lea.verou.me">Lea Verou</a> with care ✿ <a href="https://lea.verou.me/2011/09/a-better-tool-for-cubic-bezier-easing/">About</a>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=leaverou%40mit%2eedu&lc=GR&item_name=Lea%20Verou¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" class="button" rel="nofollow">Donate</a>
</footer>
<script src="chainvas.min.js"></script>
<script src="environment.js"></script>
<script src="cubic-bezier.js"></script>
<script src="interaction.js"></script>
<script>_gaq = [['_setAccount', 'UA-25106441-3'], ['_trackPageview']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>
</body>
</html>