forked from jeremyckahn/rekapi
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
60 lines (59 loc) · 4.52 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
<!DOCTYPE html>
<html>
<head>
<title>Rekapi - A keyframe animation library for JavaScript</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="main-container">
<header>
<a href="."><img src="demo/img/rekapi-logo-600.png" alt="Rekapi logo"></a>
<h2>A keyframe animation library for JavaScript</h2>
</header>
<ul>
<li><a href="dist/doc">API documentation</a></li>
</ul>
<p>Rekapi is a library for making <code><canvas></code> and DOM
animations with JavaScript, as well as CSS <code>@keyframe</code> animations for modern browsers. Here are some examples of animations that were made with Rekapi:</p>
<ul>
<li><a href="demo/bargraph.html">An animated graph</a></li>
<li><a href="demo/bubbles.html">Confetti!</a></li>
<li><a href="demo/catimate.html">Tweening Octocat</a> (CSS <code>@keyframes</code>)</li>
<li><a href="demo/ios.html">iOS7 riff</a> (JavaScript DOM animation)</li>
<li><a href="demo/pie.html">You can even make pie charts</a></li>
<li><a href="https://www.jtechcommunications.com/" target="_blank">JTech Communications home page</a> (you can read a write-up of how Rekapi was used <a href="https://www.jtechcommunications.com/blog/blog-detail-10" target="_blank">here</a>)</li>
<li><a href="http://www.icodesocial.com.br/" target="_blank">IcodeSocial</a></li>
</ul>
<p>Rekapi is also useful for building applications that use keyframe animation:</p>
<ul>
<li><a href="http://jeremyckahn.github.io/stylie/" target="_blank">Stylie</a></li>
<li><a href="http://www.dengenchronicles.com/" target="_blank">Dengen Chronicles: A web-based trading card game</a></li>
<li><a href="sandbox.html">API sandbox</a></li>
<li><a href="ease.html">Easing formula tester</a></li>
</ul>
<p>Rekapi can optionally <a href="dist/doc/renderers/dom/rekapi.renderer.dom.js.html#DOMRenderer" target="_blank">render DOM animations as CSS3 <code>@keyframes</code></a> for enhanced performance. If you working with complex animation timelines, Rekapi is the library for you! Rekapi depends on <a href="http://underscorejs.org/" target="_blank">Underscore.js</a> (or a similar library such as <a href="http://lodash.com/" target="_blank">Lo-Dash</a>) and <a href="http://jeremyckahn.github.io/shifty/" target="_blank">Shifty.js</a>. Here's everything you need:</p>
<ul>
<li><a href="https://raw.github.com/documentcloud/underscore/master/underscore-min.js">Underscore</a></li>
<li><a href="https://raw.github.com/jeremyckahn/shifty/master/dist/shifty.min.js">Shifty</a></li>
<li><a href="https://raw.github.com/jeremyckahn/rekapi/master/dist/rekapi.min.js">Rekapi</a></li>
</ul>
<p>Alternatively, you can just load a single, minified file with all of the dependencies baked in:</p>
<ul>
<li><a href="https://raw.github.com/jeremyckahn/rekapi/master/dist/rekapi-underscore-shifty.min.js">rekapi-underscore-shifty.min.js</a> (alternatively, <a href="https://raw.github.com/jeremyckahn/rekapi/master/dist/rekapi-lodash-shifty.min.js">rekapi-lodash-shifty.min.js</a>)</li>
</ul>
<p>The <a href="https://github.com/jeremyckahn/rekapi/blob/master/docs/getting_started.md">getting started guide</a> will get you up to speed on how to use Rekapi, and you can use the <a href="dist/doc/src/rekapi.core.js.html">API documentation</a> as a reference for everything you can do with it. <a href="http://www.youtube.com/watch?v=DVY1YMOhWn8" target="_blank">This video</a> explains the concepts that the library is built upon and how to get started with it. If you want some help with Rekapi, post a question to the <a href="https://groups.google.com/forum/?fromgroups#!forum/rekapi" target="_blank">Google Group</a>. Happy animating!</p>
<footer>Rekapi is free and open source software, obsessively made by <a href="http://www.jeremyckahn.com" target="_blank">Jeremy Kahn</a>.</footer>
</div>
<a id="fork-me-link" href="https://github.com/jeremyckahn/rekapi/"><img src="demo/img/forkme.png" alt="Fork me!" /></a>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28621278-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>