Skip to content

Instantly share code, notes, and snippets.

@juarezpaf
Forked from nickpettit/app.js
Created February 10, 2011 03:56
Show Gist options
  • Save juarezpaf/819915 to your computer and use it in GitHub Desktop.
Save juarezpaf/819915 to your computer and use it in GitHub Desktop.
$(function() {
$("a.reset").toggle();
$("a.play").click(function () {
$(".color").toggleClass("on");
window.setTimeout(function() {
$("div").toggleClass("rounded");
}, 1000);
$(this).toggle();
$("a.reset").toggle();
});
$("a.reset").click(function () {
$("div").toggleClass("rounded");
window.setTimeout(function() {
$(".color").toggleClass("on");
}, 1000);
$(this).toggle();
$("a.play").toggle();
});
});
Nick Pettit - Feb 09, 2011
index.html
- removed p tag
- cleaned up indentation
- separated css and js into separate files
- added "color" class to all colors
style.css
- added this file
- removed all reset code, not needed in this case
- removed tons of redundant properties
- fade-in effect is now handled using opacity transition, instead of background color transition
- border-radii have been condensed to single properties
- added the "on" class instead of separate on classes for each color
timer.js
- removed this file, not necessary
app.js
- added this file
- removed all references to timer.js and replaced them with window.timeout
- replaced addClass and removeClass methods with toggleClass
- condensed individual color classes using "on" class
- added a toggle effect for the controls
<!DOCTYPE html>
<html lang="en">
<head>
<title>Alpis Design Logo in CSS 3 :D</title>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="author" content="Nick Pettit">
</head>
<body>
<div class="controls">
<a href="#" class="play">PLAY!</a>
<a href="#" class="reset">RESET!</a>
</div>
<div class="black color">
<div class="blue color">
<div class="pink color">
<div class="yellow color"></div>
</div>
</div>
</div>
</body>
</html>
body {
padding: 20px;
margin: 0;
text-align: center;
}
.color {
-webkit-transition: all 0.5s ease;
opacity: 0;
}
.rounded {
-moz-border-radius: 200px 200px 200px 0;
border-radius: 200px 200px 200px 0;
}
.black { background: #111111; }
.blue { background: #00AEEF; }
.pink { background: #EB008B; }
.yellow { background: #FFF100; }
.on {
padding: 50px 0 0 50px;
opacity: 1;
}
.black.on {
width: 350px;
height: 350px;
}
.blue.on {
width: 250px;
height: 250px;
}
.pink.on {
width: 150px;
height: 150px;
}
.yellow.on {
width: 100px;
height: 100px;
padding: 0;
}
.play, .reset {
color: #C00;
font: 14px Arial;
margin: 25px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment