Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

80 lines (79 sloc) 3.315 kb
<!DOCTYPE html>
<html>
<head>
<title>Rekapi - A keyframe animation library for JavaScript</title>
<link href='dist/asset/jquery.dragon-slider.css' rel='stylesheet' type='text/css'>
<link href='dist/asset/rekapi-controls.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="dist/asset/font-awesome.css">
<link href='style.css' rel='stylesheet' type='text/css'>
<script src="dist/rekapi-underscore-shifty.min.js"></script>
<script src="dist/asset/jquery.js"></script>
<script src="dist/asset/dragon-bundle.js"></script>
<script src="dist/asset/rekapi-controls.min.js"></script>
<script src="demo/ease.js"></script>
</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>
<p class="center">
Mix and match different easing methods. The source for the formulae are <a href="https://github.com/jeremyckahn/shifty/blob/master/src/shifty.formulas.js" target="_blank">here</a>. You can drag the crosshairs to change the start and end positions of the tween.
</p>
<div class="float-wrap">
<div id="crosshairs">
<canvas style="background: #eee;"></canvas>
<div class="crosshair from" data-pos="from">
<div class="dashmark horiz"></div>
<div class="dashmark vert"></div>
</div>
<div class="crosshair to" data-pos="to">
<div class="dashmark horiz"></div>
<div class="dashmark vert"></div>
</div>
</div>
<ul id="tween-controls">
<li>
<label for="x-easing">X:</label>
<select id="x-easing" data-axis="x"></select>
</li>
<li>
<label for="y-easing">Y:</label>
<select id="y-easing" data-axis="y"></select>
</li>
<li>
<hr>
<label for="duration">Duration:</label>
<input id="duration" value="2000"></input>
</li>
<li>
<label for="show-path">Show path:</label>
<input id="show-path" type="checkbox" checked></input>
</li>
<li>
<hr>
<label>Custom easing 1:</label>
<input id="custom-1" class="ease full-width" data-easename="customEase1"></input>
</li>
<li>
<label>Custom easing 2:</label>
<input id="custom-2" class="ease full-width" data-easename="customEase2"></input>
</li>
</ul>
</div>
<a id="fork-me-link" href="https://github.com/jeremyckahn/rekapi/"><img src="demo/img/forkme.png" alt="Fork me!" /></a>
<footer>Rekapi is free and open source software, obsessively made by <a href="http://www.jeremyckahn.com" target="_blank">Jeremy Kahn</a>.</footer>
</div>
<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>
Jump to Line
Something went wrong with that request. Please try again.