UNPKG

gfx

Version:

3D CSS3 animation library for jQuery

67 lines (59 loc) 1.99 kB
<!DOCTYPE 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>