Skip to content

Instantly share code, notes, and snippets.

@robinhouston

robinhouston/README.md

Last active December 14, 2015 02:59
Show Gist options
  • Save robinhouston/5017753 to your computer and use it in GitHub Desktop.
Save robinhouston/5017753 to your computer and use it in GitHub Desktop.
Download ZIP
Multiple sliders – Talkie demo
Raw
README.md

Several sliders at once.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slider – Talkie demo 03</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: 750px; margin: auto; position: relative; background: #DADADA; }
#header { width: 100%; background: #252535; color: yellow; line-height: 3em; text-align: center; }
#header h1 { margin: 0; }
#controls { width: 740px; padding: 16px 5px 3px; }
#controls audio { width: 100%; }
#wrapper .talkie-slider { width: 210px; display: inline-block; }
.talkie-slider-panel { font-size: 260px; text-align: center; line-height: 260px; }
.talkie-slider-panel span { vertical-align: middle; }
</style>
</head>
<body id="example-02-slider">
<div id="wrapper">
<div id="header">
<h1>Three sliders at once!</h1>
</div>
<div id="slider-left" class="talkie-slider">
<div id="left-5"><span>5</span></div>
<div id="left-4"><span>4</span></div>
<div id="left-3"><span>3</span></div>
<div id="left-2"><span>2</span></div>
<div id="left-1"><span>1</span></div>
<div class="panel-0" id="left-0"><span>✺</span></div>
</div>
<div id="slider-middle" class="talkie-slider">
<div id="middle-5"><span>5</span></div>
<div id="middle-4"><span>4</span></div>
<div id="middle-3"><span>3</span></div>
<div id="middle-2"><span>2</span></div>
<div id="middle-1"><span>1</span></div>
<div class="panel-0" id="middle-0"><span>✺</span></div>
</div>
<div id="slider-right" class="talkie-slider">
<div id="right-5"><span>5</span></div>
<div id="right-4"><span>4</span></div>
<div id="right-3"><span>3</span></div>
<div id="right-2"><span>2</span></div>
<div id="right-1"><span>1</span></div>
<div class="panel-0" id="right-0"><span>✺</span></div>
</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>
d3.selectAll(".talkie-slider > div").classed("talkie-slider-panel", true);
var left = Talkie.slider("#slider-left"),
middle = Talkie.slider("#slider-middle"),
right = Talkie.slider("#slider-right");
var timeline = Talkie.timeline("#soundtrack", {
"0:01.000": left.panel("#left-4"),
"0:01.333": middle.panel("#middle-4"),
"0:01.667": right.panel("#right-4"),
"0:02.000": left.panel("#left-3"),
"0:02.333": middle.panel("#middle-3"),
"0:02.667": right.panel("#right-3"),
"0:03.000": left.panel("#left-2"),
"0:03.333": middle.panel("#middle-2"),
"0:03.667": right.panel("#right-2"),
"0:04.000": left.panel("#left-1"),
"0:04.333": middle.panel("#middle-1"),
"0:04.667": right.panel("#right-1"),
"0:05.000": left.panel("#left-0")
.and( middle.panel("#middle-0") )
.and( right.panel("#right-0") )
});
// When panel 0 loads, animate the asterisks
Talkie.addEventListener("#middle-0", "Talkie.slider.load", function() {
d3.selectAll(".panel-0 span").style("font-size", "12px").style("color", "#000000")
.transition().duration(1500).style("font-size", "260px").style("color", "#F83195");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment