forked from zhouzi/TheaterJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (107 loc) · 5.37 KB
/
index.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TheaterJS, a typing effect mimicking human behavior.</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cutive">
<link rel="stylesheet" href="build/styles.css">
</head>
<body>
<div class="outer">
<div class="inner">
<div class="wrapper">
<div class="scene">
<div>- <span id="vader"></span></div>
<div>- <span id="luke"></span></div>
</div>
<pre id="nodebug"><code>
theater.write(
<span id="log"></span>
);
</code></pre>
<p>
<a id="hidelink" href="#nodebug">hide code</a>
<a id="showlink" href="#">show code</a>
</p>
<p>
<a href="https://github.com/Zhouzi/TheaterJS">Github repository</a>,
demo on the <a href="http://gabinaureche.com/TheaterJS/">TheaterJS page</a>
and commented on <a href="http://codepen.io/Zhouzi/pen/JoRazP?editors=001">Codepen</a>.
</p>
<p>
Share the ♥ on <a href="https://twitter.com/home?status=TheaterJS,%20a%20typing%20effect%20mimicking%20human%20behavior.%20https://github.com/Zhouzi/TheaterJS%20%23TheaterJS%20%23typing%20%23javascript">Twitter</a> or <a href="https://www.facebook.com/sharer/sharer.php?u=https://github.com/Zhouzi/TheaterJS">Facebook</a>.
</p>
</div>
</div>
</div>
<script src="build/theater.js"></script>
<script>
(function () {
"use strict";
var $log = document.querySelector("#log");
var theater = new TheaterJS();
theater
.describe("Vader", .8, "#vader")
.describe("Luke", .6, "#luke");
theater
.on("*", function (eventName, originalEvent, sceneName, arg) {
var args = Array.prototype.splice.apply(arguments, [3]),
log = '{\n name: "' + sceneName + '"';
if (args.length > 0) log += ",\n args: " + JSON.stringify(args).split(",").join(", ");
log += "\n }";
$log.innerHTML = log;
})
.on("say:start, erase:start", function (eventName) {
var self = this,
current = self.current.voice;
self.utils.addClass(current, "saying");
})
.on("say:end, erase:end", function (eventName) {
var self = this,
current = self.current.voice;
self.utils.removeClass(current, "saying");
});
theater
.write("Vader:Luke.", 400, toggleClass)
.write("Luke:What?", toggleClass)
.write("Vader:I am your father.", toggleClass)
.write({ name: "call", args: [kill, true] })
.write("Luke:Nooo...", -3, "!!! ", 400, "No! ", 400)
.write("Luke:That's not true!", 400)
.write("Luke:That's impossible!", toggleClass)
.write("Vader:Search your feelings.", 1600)
.write("Vader:You know it to be true.", 1000, toggleClass)
.write("Luke:Noooooooo! ", 400, "No!", toggleClass)
.write("Vader:Luke.", 800)
.write("Vader:You can destroy the Emperor.", 1600)
.write("Vader:He has foreseen this. ", 800)
.write("Vader:It is your destiny.", 1600)
.write("Vader:Join me.", 800)
.write("Vader:Together we can rule the galaxy.", 800)
.write("Vader:As father and son.", 1600)
.write("Vader:Come with me. ", 800)
.write("Vader:It is the only way.", 2000)
.write(function () { theater.play(true); });
var body = document.getElementsByTagName("BODY")[0];
function toggleClass (className) {
if (typeof className !== "string") className = "light";
if (theater.utils.hasClass(body, className)) theater.utils.removeClass(body, className);
else theater.utils.addClass(body, className);
}
function kill () {
var self = this,
delay = 300,
i = 0,
timeout = setTimeout(function blink () {
toggleClass("blood");
if (++i < 6) timeout = setTimeout(blink, delay);
else self.next();
}, delay);
return self;
}
})();
</script>
</body>
</html>