This repository has been archived by the owner on Dec 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
/
05.multi-slider.html
111 lines (100 loc) · 4.75 KB
/
05.multi-slider.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slider – Talkie demo 03</title>
<!-- stylesheet -->
<link rel="stylesheet" type="text/css" href="../talkie.css">
<!-- /stylesheet -->
<!-- scripts -->
<script src="../lib/d3.v3.js"></script>
<script src="../talkie-1.0.js"></script>
<!-- /scripts -->
<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 class="talkie-slider-panel" id="panel-left-5"><span>5</span></div>
<div class="talkie-slider-panel" id="panel-left-4"><span>4</span></div>
<div class="talkie-slider-panel" id="panel-left-3"><span>3</span></div>
<div class="talkie-slider-panel" id="panel-left-2"><span>2</span></div>
<div class="talkie-slider-panel" id="panel-left-1"><span>1</span></div>
<div class="talkie-slider-panel panel-0" id="panel-left-0"><span>✺</span></div>
</div>
<div id="slider-middle" class="talkie-slider">
<div class="talkie-slider-panel" id="panel-middle-5"><span>5</span></div>
<div class="talkie-slider-panel" id="panel-middle-4"><span>4</span></div>
<div class="talkie-slider-panel" id="panel-middle-3"><span>3</span></div>
<div class="talkie-slider-panel" id="panel-middle-2"><span>2</span></div>
<div class="talkie-slider-panel" id="panel-middle-1"><span>1</span></div>
<div class="talkie-slider-panel panel-0" id="panel-middle-0"><span>✺</span></div>
</div>
<div id="slider-right" class="talkie-slider">
<div class="talkie-slider-panel" id="panel-right-5"><span>5</span></div>
<div class="talkie-slider-panel" id="panel-right-4"><span>4</span></div>
<div class="talkie-slider-panel" id="panel-right-3"><span>3</span></div>
<div class="talkie-slider-panel" id="panel-right-2"><span>2</span></div>
<div class="talkie-slider-panel" id="panel-right-1"><span>1</span></div>
<div class="talkie-slider-panel panel-0" id="panel-right-0"><span>✺</span></div>
</div>
<div id="controls">
<audio id="soundtrack" controls="controls">
<!-- audio -->
<source src="audio/01.countdown.ogg" type="audio/ogg">
<source src="audio/01.countdown.mp3" type="audio/mpeg">
<!-- /audio -->
</audio>
</div>
</div>
<script>
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("#panel-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");
});
// If a panel is loaded explicitly by the user,
// a) pause the soundtrack, if it’s playing,
// b) ask the panel to be slid back when the soundtrack resumes.
Talkie.addEventListener(".talkie-slider", "Talkie.slider.load", function(e) {
if (e.explicitly) {
timeline.pause();
timeline.undoInteraction(function() { e.slider.slideTo(e.fromPanel); });
}
});
</script>
</body>
</html>