-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
238 lines (218 loc) · 13.3 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!-- tell the browser this is an HTML5 file -->
<!DOCTYPE html>
<!-- all the HTML must be inside this root html tag -->
<html lang="en">
<!-- give the web browser a bunch of other information about this webpage, most of it not displayed to the user -->
<head>
<!-- tell the browser how to display text -->
<meta charset="utf-8">
<!-- give search engines some background info on this page -->
<meta name="description" content="Behind The Scenes: How We Get Funky - an introduction to A Trike Called Funk and their activation process">
<meta name="keywords" content="digital storytelling, scrollytelling">
<meta name="author" content="Annetta Stogniew and Kevin Lu, Northeastern University">
<!-- tell the browser to render differently on mobile devices than in browsers on desktop machines -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- text that shows up in the browser tab -->
<title>Behind The Scenes: How We Get Funky</title>
<!-- INCLUDE CSS FILES -->
<!-- pull in the bootstrap CSS files from the 3rd party CDN they are hosted on -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- pull in our own CSS rules -->
<link rel="stylesheet" href="project.css" type="text/css" charset="utf-8" />
<!-- INCLUDE JS FILES -->
<!-- pull in the Scrollama javscript package from the CDN hosting them -->
<script src="https://unpkg.com/scrollama"></script>
<!-- pull in scripts we wrote for this example -->
<script src="project.js"></script>
</head>
<!-- the body for the content the user is shown within a browser window -->
<body>
<!-- the header has a title and indication to the user that they should scroll -->
<header>
<div class="container"> <!-- tell bootstrap we're going to use a grid -->
<div class="row"> <!-- a horizontal set of content -->
<div class="col-lg-6 offset-lg-3"> <!-- half-width & centered on desktop/tablet, full width on mobile -->
<div class="header-background">
<h1>Behind The Scenes: How We Get Funky</h1>
<!-- glitch hosts "assets" like images on a CDN so they can be served up more efficiently... that means we get wacky URLs for them -->
<p>
We are A Trike Called Funk, a creative collaboration of artistic expression, movement and a trike-based sound system. We came together
toward the end of the Covid-19 pandemic to bring joy and love to communities around Boston through movement and artistic expression.
<br/>
<br/>
In the past year, we have partnered with businesses, community groups and local artists around the city to
host what we call "activations." A typical activation involves our main funkers, A.a.ron Myers and Ed Word Galan,
community members, good music and of course, our trike.
<br/>
<br/>
Scroll down to see how we get funky!
</p>
</div>
<img src="https://cdn.glitch.global/60a947a3-a0d4-473b-a51a-ef7120e2f598/scroll-down.gif?v=1673894657673" alt="scroll down" height="100">
</div>
</div>
</div>
</header>
<!-- the main section has the body of the story -->
<main>
<section id="scrolly"> <!-- there is only one of these, so give it an `id` instead of a `class` attribute -->
<figure> <!-- a `figure` is a useful wrapper around images and captions -->
<div class="wrapper">
<img id="backdrop-img" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/background?v=1675041719894"/>
</div>
</figure>
<article> <!-- a helpful tag to note content that is not related to the background site styling -->
<div class= "step" data-step="0">
<video muted autoplay loop class="horizontal-vid" id="trike-video" src= "https://cdn.glitch.global/03d45714-8951-4893-94ce-ac5c3f351a4c/TrikeFinal.mp4?v=1675053524482"/>
</div>
<div class="step" data-step="1">
<p>
An activation begins when A.a.ron Myers and Ed Word Galan, the dynamic duo behind our organization, arrive on the scene, ready to jam!
<br/>
<br/>
Other DJs and music venues may depend on electricity or a permit, but our battery-powered sound system and
portable dance floor help us bring the funk almost anywhere.
</p>
<img class="bakcground-imgs" id="eddie-aaron" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/aaron_eddie.png?v=1675051400397" alt="Our founder with our trike" />
</div>
<div class="step" data-step="2">
<p>
We have seen movement and creative expression bring people together in our work.
<br/>
<br/>
As A.a.ron puts it, “Movement says more than you could say in words, it builds a sense of community,
bridges people who might see themselves in different groups or communities.”
</p>
</div>
<div class="step" data-step="3">
<p>
But if dancing isn’t for you, our activations
offer the opportunity to try out sidewalk chalk...
</p>
<img class="inline-img" id="chalk" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/chalk.jpeg?v=1675128647205" alt="A person drawing on pavement with sidewalk chalk"/>
<img class="bakcground-imgs" id="drummers" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/drummers.png?v=1675054392316" alt="Three seated people playing tall drums" />
<img class="bakcground-imgs" id="michelle-wu" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/michelle_wu.png?v=1675104873552" alt="Boston mayor Michelle Wu speaking into a microphone" />
<img class="bakcground-imgs" id="graffiti-wkshp" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/graffiti_workshop.png?v=1675051611226" alt="Kids pose with hand-painted graffiti on canvases" />
</div>
<div class="step" data-step="4">
<p>
or instruments.
</p>
<video loop class="vertical-vid" id="single-drummer" muted src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/single_drummer.MOV?v=1675128493095" autoplay/>
</div>
<div class="step" data-step="5">
<p>
To promote all forms of expression, we host local artists’ workshops,
dance lessons and guest speakers.
</p>
<video class="vertical-vid" id="dance-wkshp" muted src="https://cdn.glitch.me/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/Workshop%20Given.mp4?v=1675102500804" autoplay/>
</div>
<div class="step" data-step="6">
<p>
When everything is set up, our emcee A.a.ron introduces A Trike Called Funk
and the event’s partner.
<br/>
<br/>
A.a.ron likes to start off the dancing, pulling in onlookers while Ed Word
mans the trike and cranks out the tunes.
</p>
<video class="vertical-vid" id="aaron-dancing" muted src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/aaron_dancing.MOV?v=1675126159782" autoplay/>
</div>
<div class="step" data-step="7">
<p>
Participants can be a hesitant to dance with a group of strangers,
but our enthusiasm never fails to draw in the crowd.
<br/>
<br/>
Kids are usually the first to get out on the floor…
</p>
<video class="vertical-vid" id="kids-video" muted autoplay loop src= "https://cdn.glitch.me/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/Parent%20and%20their%20kid.MP4?v=1675103607116"> </video>
</div>
<div class="step" data-step="8">
<p>
Soon enough, everyone can’t help but join in.
Our activations are full of laughter, dancing and creativity from all ages.
</p>
<img class="bakcground-imgs" id="dancers-2" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/dancers_2.png?v=1675115720962" alt="Six people dancing" />
<img class="bakcground-imgs" id="dancers" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/dancers.png?v=1675115077845" alt="A group of children and adults dancing" />
<img class="inline-img" id="everyone" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/everyone.png?v=1675115963932" alt="Children and adults dance on a dancefloor outside" />
</div>
<div class="step" data-step="9">
<p>
Anyone can get down with us, because our activations take advantage of
public spaces available to everyone. They have taken place day and night,
at parks...
</p>
<img class="inline-img" id="park" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/park.png?v=1675122796239" alt="A group of people gathered in a park" />
</div>
<div class="step" data-step="10"><p>
beaches...
</p>
<img class="inline-img" id="beach" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/beach.png?v=1675122818550" alt="A group of people dancing on a dancefloor at a beach" />
</div>
<div class="step" data-step="11">
<p>
weddings...
</p>
<img class="inline-img" id="wedding" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/wedding.png?v=1675122802033" alt="A group of people dancing at a wedding" />
</div>
<div class="step" data-step="12">
<p>
and more!
</p>
<img class="inline-img" id="court" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/court.png?v=1675122791992" alt="A group of people dancing on a basketball court" />
</div>
<div class="step" data-step="13">
<img class="inline-img" id="roller-rink" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/roller_rink.JPG?v=1675122870034" alt="A group of people roller-skating on an outdoor dancefloor" />
</div>
<div class="step" data-step="14">
<p>
In the coming year, we hope to further expand the variety of our activations.
We’re especially excited to explore educational experiences and build on our past
workshops in cultural appreciation and hip-hop at Suffolk University.
</p>
</div>
<div class="step" data-step="15">
<p>
At the end of the day, our activations are about unleashing creativity,
connecting people and building community.
<br/>
<br/>
If this sounds like your jam, join our community of creative
collaborators! Contact us at <a href="mailto:[email protected]">[email protected]</a>
</p>
<div class="social-container">
<a href="https://www.instagram.com/atrikecalledfunk/"><image class="social-icon" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/Instagram_logo_2022.svg.png?v=1675101319808"/></a>
<a href="https://www.tiktok.com/@atrikecalledfunk?"><image class="social-icon" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/tiktok.png?v=1675124264261"/></a>
<a href="https://www.facebook.com/ATrikeCalledFunk/"><image class="social-icon" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/facebook.png?v=1675124465069"/></a>
<a href="https://twitter.com/trikecalledfunk"><image class="social-icon" src="https://cdn.glitch.global/dd709b70-f2e7-4af6-9e0f-38c888cd8b68/twitter.png?v=1675124639035"/></a>
</div>
</div>
</article>
</section>
</main>
<!-- the footer is used to show credits -->
<footer>
<div class="container"> <!-- tell bootstrap we're going to use a grid -->
<div class="row"> <!-- a horizontal set of content -->
<div class="col-12"> <!-- content layout full width on all devices -->
<p>
A project created by Annetta Stogniew and Kevin Lu at Northeastern University for Coding for Digital Storytelling,
in partnership with <a href="https://www.atrikecalledfunk.com/">A Trike Called Funk</a>.
</p>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
// initialize the interaction here, because the body content has been loaded
// and we can access it
Project.scrolling.initialize();
</script>
<script type="text/javascript">
// This is a placeholder where you would want to add in any JS code you get
// from an analytics tracker. It is _not_ included in the head tag because you
// don't want it to slow down page content loading.
</script>
</body>
</html>