Skip to content

Instantly share code, notes, and snippets.

@panfu

panfu/colorful.html

Created June 24, 2011 10:44
Show Gist options
  • Save panfu/1044565 to your computer and use it in GitHub Desktop.
Save panfu/1044565 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
colorful.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>COLORFUL</title>
<script src="/jquery-1.js" type="text/javascript" charset="utf-8"></script>
<script src="/modernizr.js" type="text/javascript" charset="utf-8"></script>
<script src="/mustache.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$.getJSON("/data.json", function(data) {
var tmpl = '<div id="{{hex_id}}" class="hex {{type}}" style="border: solid 1px {{colour}}; top: {{top}}px; left: {{left}}px; background-color: {{colour}};"></div>';
var line1 = '', line2 = '', cols_count = 5;
$.each(data.splice(0, 25), function(x) {
var xc = x % cols_count, yc = Math.floor(x / cols_count);
var dd = this;
dd.top = yc * 92;
dd.left = xc * 92;
dd.hex_id = 'hex_' + x;
dd.type = 'x1';
line1 += Mustache.to_html(tmpl, dd);
});
$.each(data.splice(26, 4), function(x) {
var xc = x % 2, yc = Math.floor(x / 2);
var dd = this;
dd.top = yc * 92;
dd.left = (xc + 5) * 92;
dd.hex_id = 'hex_' + (26 + x);
dd.type = 'x2';
line2 += Mustache.to_html(tmpl, dd);
});
$("#colours").append(line2).find(".hex.x2").one("mousedown", function() {
$(this).parent().find(".hex.x2")
.animate({left: (5 * 92) + 'px', top: (0) + 'px'}, "fast")
.animate({height: 92 * 2 - 12 + 'px', width: (92 * 2) - 12 + 'px'}, 'fast', function() {
$("#hex_29").html('<div class="points" style="display:none;"><h2 style="font-size: 110px;">10</h2></div>').find(".points").delay(100).fadeIn();
$("#hex_26").unbind("mousedown").animate({top: (92 * 2) + 'px', height: '80px'}, "fast", "swing");
$("#hex_27").unbind("mousedown").animate({top: (92 * 3) + 'px', height: '80px'}, "fast", "swing");
$("#hex_28").unbind("mousedown").animate({top: (92 * 4) + 'px', height: '80px'}, "fast", "swing", function() {
$("#colours").find(".hex.x1:visible").each(function(x) {
$(this).delay(1000 * x).animate({left: '+500px', top: '+0px'}, 100).fadeOut("slow");
});
});
});
});
$("#colours").append(line1).find(".hex.x1").mousedown(function() {
$(this).animate({left: '+500px', top: '+0px'}, "fast").fadeOut("slow");
});
});
});
</script>
<link href="screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
.hex { width: 80px; height: 80px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.hex > div {
background: none repeat scroll 0 0 white;
height: 140px;
margin: 16px 0 0 16px;
width: 140px;
}
</style>
</head>
<body>
<div id="container">
<img src="http://i1.ihaveu.com/image/auction/image/000/011/276/large/8f5687d1ac0b40882eb95ea659b86eb0.jpg.medium.jpg" style="position: absolute;">
<div id="colours"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment