Skip to content

Instantly share code, notes, and snippets.

@robinhouston

robinhouston/README.md

Last active December 12, 2015 08:18
Show Gist options
  • Save robinhouston/4742904 to your computer and use it in GitHub Desktop.
Save robinhouston/4742904 to your computer and use it in GitHub Desktop.
Download ZIP
Countdown – Talkie demo
Raw
README.md

A simple demonstration of how to use Kiln’s Talkie animation library.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Countdown – Talkie demo 01</title>
<link rel="stylesheet" type="text/css" href="http://kiln.it/talkie/ui/1.0/talkie.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://kiln.it/talkie-1.min.js"></script>
<style>
body { background: white; font-family: Helvetica, Arial, sans-serif; }
#wrapper { width: 800px; margin: auto; position: relative; }
#controls { width: 790px; padding: 0 5px; }
#controls audio { width: 100%; }
#display { width: 100%; height: 450px; text-align: center; font-size: 526px; line-height: 450px; }
#display #big-number { vertical-align: middle; position: relative; top: -50px; font-weight: bold; }
</style>
</head>
<body id="example-01-countdown">
<div id="wrapper">
<div id="display">
<span id="big-number">5</span>
</div>
<div id="controls">
<audio id="soundtrack" controls="controls">
<source src="http://kiln.it/talkie/examples/audio/01.countdown.ogg" type="audio/ogg">
<source src="http://kiln.it/talkie/examples/audio/01.countdown.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<script>
var number = Talkie.animate().select("#big-number");
var timeline = Talkie.timeline("#soundtrack", {
"0:01": number.text("4"),
"0:02": number.text("3"),
"0:03": number.text("2"),
"0:04": number.text("1"),
"0:05": number.style("font-size", "12px").text("✺")
.style({"font-size": "576px", "color": "#F83195"}, 500)
});
Talkie.ui.playButton("#wrapper", timeline);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment