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/4742544 to your computer and use it in GitHub Desktop.
Save robinhouston/4742544 to your computer and use it in GitHub Desktop.
Download ZIP
Head & Shoulders
Raw
README.md

A little audio-synchronised animation using Kiln’s Talkie library.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head &amp; Shoulders – Talkie demo 02</title>
<link rel="stylesheet" type="text/css" href="http://kiln.it/talkie/ui/1.0/talkie.css">
<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%; }
#stickman { width: 360px; height: 423px; margin: auto; display: block; }
#credits { text-align: right; margin: 8px 6px 0 0; }
#credits a { color: #C3004D; }
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://kiln.it/talkie-1.min.js"></script>
</head>
<body id="example-02-head-shoulders" onunload="">
<div id="wrapper">
<object id="stickman" data="stickman.svg" type="image/svg+xml" onload="init()"></object>
<audio id="controls" controls="controls">
<source src="http://kiln.it/talkie/examples/audio/02.head-shoulders.ogg" type="audio/ogg">
<source src="http://kiln.it/talkie/examples/audio/02.head-shoulders.mp3" type="audio/mpeg">
</audio>
<div id="credits">
Code by <a href="http://kiln.it">Kiln</a>
<span style="margin: 0 0.5em">•</span>
Singing and artwork by Miri Tilden (age 5½)
</div>
</div>
<script>
function init() {
var svg = document.getElementById("stickman").contentDocument,
animate = Talkie.animate(svg);
var arms = animate.select("#arms");
function touch(body_part) {
return arms.morphTo("#arms-"+body_part, 200).and(
animate.select("#"+body_part).style("opacity", "1", 100));
}
var stickman = animate.select("#stickman");
var timeline = Talkie.timeline("#controls", {
0.1: stickman.attr("transform", "translate(500 0)", 2000),
2.6: stickman.attr("transform", "translate(0 0)", 1000),
4.5: function() {
// Make the stickman jump
stickman.element.attr("transform", "translate(0 0)")
.transition().duration(600).ease(function(t) {
return 1 - Math.pow(2*t-1, 2);
}).attr("transform", "translate(0 -100)");
},
6.0: touch("head"),
6.5: touch("shoulders"),
7.2: touch("knees"),
7.7: touch("toes"),
8.2: touch("knees"),
8.7: touch("toes"),
9.0: touch("neutral"),
10.0: touch("eyes"),
11.2: touch("ears"),
12.3: touch("mouth"),
13.5: touch("nose"),
14.0: touch("neutral"),
14.3: touch("head"),
15.1: touch("shoulders"),
15.7: touch("knees"),
16.2: touch("toes"),
16.7: touch("knees"),
17.2: touch("toes"),
// move the arms into the neutral position and zoom in on stickman’s face.
18.0: touch("neutral").and(
stickman.attr("transform", "scale(1.8) translate(-165 -50)", 1000))
});
Talkie.ui.playButton("#wrapper", timeline);
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
stickman.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
style.css
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%; }
#stickman { width: 360px; height: 423px; margin: auto; display: block; }
#credits { text-align: right; margin: 8px 6px 0 0; }
#credits a { color: #C3004D; }
#play { width: 158px; height: 158px; position: absolute; top: 165px; left: 321px; background-image: url(play.png); background-repeat: no-repeat; cursor: pointer; }
#play:hover { background-position: 0 -158px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment