Skip to content

Instantly share code, notes, and snippets.

@pukhalski

pukhalski/dabblet.css

Created February 20, 2014 01:03
Show Gist options
  • Save pukhalski/9104919 to your computer and use it in GitHub Desktop.
Save pukhalski/9104919 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.scene {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0.5s;
}
.device {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.tick {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.device.button {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.house {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.house:nth-child(1) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.house:nth-child(2) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.house:nth-child(3) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.house:nth-child(4) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.house:nth-child(5) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.house:nth-child(6) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.house:nth-child(7) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.cloud {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.cloud:nth-child(8) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.cloud:nth-child(9) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.cloud:nth-child(10) {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.sun {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.signup {
-webkit-animation-delay: 1s;
-webkit-animation-duration: 5s;
}
.signup .inner {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
.signup .form {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0s;
}
Raw
dabblet.html
<html>
<head>
<link rel="stylesheet" href="http://pukhalski.com/inc/animate.css">
<link rel="stylesheet" href="http://pukhalski.com/inc/main.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pocket City</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<!-- REPLACE yourAnimationType WITH THE ANIMATION YOU WANT FROM http://daneden.me/animate/ -->
<!-- THEN ADD THE NECESSARY ANIMATION DELAY AND DURATION IN animations.css -->
<div class="scene animated bounceInDown">
<div class="device outside animated yourAnimationType">
<div class="device inside">
<div class="house animated yourAnimationType"></div>
<div class="house animated yourAnimationType"></div>
<div class="house animated yourAnimationType"></div>
<div class="house animated yourAnimationType"></div>
<div class="house animated yourAnimationType"></div>
<div class="house animated yourAnimationType"></div>
<div class="house animated yourAnimationType"></div>
<div class="cloud animated yourAnimationType"></div>
<div class="cloud animated yourAnimationType"></div>
<div class="cloud animated yourAnimationType"></div>
<div class="sun animated yourAnimationType"></div>
</div>
<div class="device button animated yourAnimationType"></div>
</div>
<div class="tick animated yourAnimationType"></div>
</div>
<div class="signup animated inUp">
<div class="inner animated yourAnimationType">
<h1>Pocket City</h1>
<span>Your own city right in the pocket</span>
</div>
<div class="form animated yourAnimationType">
<input type="email" required="required" id="email" placeholder="Keep me notified..." /><button>Submit</button>
</div>
</div>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment