gfx
Version:
3D CSS3 animation library for jQuery
67 lines (59 loc) • 1.99 kB
HTML
<html>
<head>
<meta charset=utf-8>
<title>Windows 8</title>
<link rel="stylesheet/less" type="text/css" href="css/application.less">
<script src="lib/less.js" type="text/javascript"></script>
<script src="lib/coffee-script.js" type="text/javascript"></script>
<script src="../../site/jquery.js" type="text/javascript"></script>
<script src="../../lib/gfx.js" type="text/javascript"></script>
<script type="text/coffeescript" charset="utf-8">
$ = jQuery
$ ->
$(".col div").click ->
$("#panelsView").hide();
view = $("<div />").addClass("panelView").appendTo("body")
view.css(background: $(@).css('backgroundColor'))
view.queueNext ->
view.transform(rotateY: "-40deg", translateZ: "-1000px", scale: ".2", opacity: "0.6")
view.gfx(rotateY: "0deg", translateZ: "0px", scale: "1", opacity: "1")
$ ->
header = $("#panelsView header")
header.queueNext ->
header.transform(opacity: "0.1", translate3d: "150px,0,0")
header.gfx({opacity: "1", translate3d: "0,0,0"}, duration: "600")
$ ->
$(".sections .col").transform(translate3d: "150px,0,0")
$(".sections .col").each ->
element = $(this)
$(".sections").delay(100).queueNext ->
element.gfx(translate3d: "0,0,0", opacity: "1")
</script>
</head>
<body>
<div id="panelsView" class="container">
<header>
<h1>Windows 8</h1>
</header>
<div class="panels">
<div class="sections">
<div class="col">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="col">
<div class="four"></div>
<div class="three"></div>
<div class="one"></div>
</div>
<div class="col">
<div class="two"></div>
<div class="one"></div>
<div class="five"></div>
</div>
</div>
</div>
</body>
</html>