-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (109 loc) · 5.97 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Poem about People Dancing</title>
<script src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="poem-style.css">
</head>
<body>
<div id="wrapper">
<div data-level="one" class="active"><span class="element" data-text="were we ever there?">were we ever there? <span class="typed-cursor">▌ </span></span></div>
<div data-level="one" class="hub "><p></p><span class="element" data-text="we danced like songs"></span></div>
<div data-level="one"><p></p><span class="element" data-text="love rushing in our veins"></span></div>
<div data-level="two"><p></p><span class="element" data-text="the night felt so warm, so right"></span></div>
<div data-level="two" class="hub "><p></p><span class="element" data-text="like it was just for us"></span></div>
<div data-level="two"><p></p><span class="element" data-text="we danced like animals"></span></div>
<div data-level="three"><p></p><span class="element" data-text="that we are"></span></div>
<div data-level="three" class="last"><p></p><span class="element" data-text="but could we ever match the grace of herons?"></span></div>
<div data-level="two"><p></p><span class="element" data-text="and we danced like dreams"></span></div>
<div data-level="three"><p></p><span class="element" data-text="charged particles in a millisecond waltz"></span></div>
<div data-level="three" class="last"><p></p><span class="element" data-text="were we detected by the sensitive instruments?"></span></div>
<div data-level="one"><p></p><span class="element" data-text="maybe it was vodka"></span></div>
<div data-level="two"><p></p><span class="element" data-text="the songs were heavy"></span></div>
<div data-level="two" class="hub"><p></p><span class="element" data-text="rhythms like punches"></span></div>
<div data-level="two"><p></p><span class="element" data-text="making waves in the sea of bodies"></span></div>
<div data-level="three"><p></p><span class="element" data-text="could you tell anymore"></span></div>
<div data-level="three" class="last"><p></p><span class="element" data-text="where your body ended and mine began?"></span></div>
<div data-level="two"><p></p><span class="element" data-text="in a drunken haze everyone is beautiful"></span></div>
<div data-level="three"><p></p><span class="element" data-text="was it love we sensed"></span></div>
<div data-level="three" class="last"><p></p><span class="element" data-text="from the limbs and torsos that ground against us?"></span></div>
<div id="end"><p></p><span class="element" data-text="were we ever there?"></span></div>
<div id="info">
<span>text and code by <a target="_blank" href="https://martakule.github.io/">marta kule</a><br>
photo by <a target="_blank" href="https://unsplash.com/photos/TiNzfp8-vA4">edward paterson</a>
</span>
</div>
</div> <!-- wrapper end-->
<script src="typed.js"></script>
<script>
$(document).ready(function(){
//Click on the current active tile
//to reveal the next and deactivate current
//If current is a branching tile,
//reveal two next tiles of the same level
//If current is the second-last tile,
//reveal the #end tile
$("#wrapper").on("click", ".active", function() {
if ($(this).hasClass("last")) {
$(this).removeClass("active").addClass("static");
$("#end").addClass("static");
$(window).scrollTop($('#end').offset().top);
var text = $("#end").children("span").data("text");
$("#end .element").typed({
strings: [text],
typeSpeed: 30
});
}
else if ($(this).hasClass("hub")) {
var currentLevel = $(this).data("level");
console.log("Current level is: " + currentLevel);
$(this).removeClass("active").addClass("static");
$(this).nextAll("[data-level='"+currentLevel+"']").eq(0).addClass("active").addClass("branch").addClass("left");
$(window).scrollTop($('.active').offset().top);
var text0 = $(this).nextAll("[data-level='"+currentLevel+"']").eq(0).children("span").data("text");
$(".active .element").eq(0).typed({
strings: [text0],
typeSpeed: 30
});
$(this).nextAll("[data-level='"+currentLevel+"']").eq(1).addClass("active").addClass("branch").addClass("right");
var text1 = $(this).nextAll("[data-level='"+currentLevel+"']").eq(1).children("span").data("text");
$(".active .element").eq(1).typed({
strings: [text1],
typeSpeed: 30
});
}
else {
$(this).removeClass("active").addClass("static");
$(this).next().addClass("active");
$(window).scrollTop($('.active').offset().top);
var text = $(this).next().children("span").data("text");
$(".active .element").typed({
strings: [text],
typeSpeed: 30
});
}
});
//Click on any static tile to fold up
//all siblings underneath
$("#wrapper").on("click", ".static", function() {
if ($(this).attr("id") != "end"){
$(this).nextAll(".static").removeClass("static");
$(this).nextAll(".active").removeClass("active");
$(this).removeClass("static").addClass("active");
}
});
//Click on one option and hide the other option
$("#wrapper").on("click", ".active.branch", function() {
$(".branch").removeClass("active").removeClass("right").removeClass("left");
$(this).addClass("static");
});
$("#end").on("click", function(){
$("#info").addClass("static");
$(window).scrollTop($('#info').offset().top);
});
});
</script>
</body>
</html>