Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
147 lines (120 sloc) 4.39 KB
<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="description" content="GFX - a 3D CSS3 animation library for jQuery">
<meta name="keywords" content="gfx,3d,css3,animation,jquery,transitions">
<link rel="stylesheet" href="site/site.css" type="text/css" charset="utf-8">
<script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.effects.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.overlay.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.flip.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.cube.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
scale: ".8"
if ( !$.browser.webkit )
$("#crazy").click(function() {
return $(this).gfx({
scale: "1.5",
rotate: "180deg"
scale: "1"
rotate: "0deg",
translateX: "-100px"
translateX: "100px"
translateX: 0
background: "#FFFFD1"
background: "#E3E3E3"
$(".about").click(function() {
return $.gfxOverlay("#aboutText", {
css: {
width: 300,
height: 130
$("#flip").gfxFlip().click(function() {
return $(this).trigger("flip");
$("#shake").click(function() {
return $(this).gfxShake();
$("#explode").click(function() {
return $(this).gfxExplodeOut({
reset: false
width: 500,
height: 290
$("#main .download").click(function() {
return $("#cube").trigger("cube", "right");
return $("#main .back").click(function() {
return $("#cube").trigger("cube", "front");
<script type="text/plain" id="aboutText">
<p>GFX was created by <a href="">Alex MacCaw</a>.</p>
<p><a href="">Friend him</a> on Twitter.</p>
<div id="container">
<div id="inner">
<div id="unsupported"><h2>Sorry, your browser isn't fully supported yet. <br /> Things on this site may not work!</h2></div>
<div id="main">
<div id="cube">
<div class="box front face">
<h1>GFX - a 3D CSS3 animation library for jQuery</h1>
<p>GFX integrates CSS3 transforms and transitions into <a href="">jQuery</a>, making it stupidly simple to create sophisticated and gorgeous animations.</p>
<pre><code>$(this).gfx({scale: "1.5"})
.gfx({scale: "1"})
.gfx({rotate: "180deg"})
.gfx({rotate: "0deg"})
.gfx({translateX: "100px", opacity: 0.2})
.gfx({translateX: 0, opacity: 1})
<footer><a class="about">About</a> <a class="download">Download &amp; docs &raquo; </a></footer>
<div class="box right face">
<h2>Download GFX</h2>
<p>Download the <a href="">latest version (0.0.1)</a>, or checkout the <a href="">source</a>.</p>
<p>You can find the libraries documentation in the <a href="">README</a></p>
<footer><a class="back">&laquo; Back</a></footer>
<div id="examples">
<div id="flip" class="item">
<div class="box front"><h2>Flip</h2></div>
<div class="box back"><h2>Flipped!</h2></div>
<div id="explode" class="box item"><h2>Explode</h2></div>
<div id="shake" class="box item"><h2>Shake</h2></div>
<div id="crazy" class="box item"><h2>Crazy</h2></div>