-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
575 lines (494 loc) · 25 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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Sculpture 1659</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Fira+Sans" rel="stylesheet">
<style>
header {
background-color: black;
color: white;
text-align: center;
}
body {
background-color: black;
}
header .frame1 {
background: url("images/05_1659_WEB.jpg") no-repeat center;
background-size: 100%;
height: 300px;
width: 100%;
}
header .frame2 {
background: url("images/16_1659_WEB.jpg") no-repeat center;
background-size: 100%;
height: 100px;
}
header .frame3 {
background: url("images/21_1659_WEB.jpg") no-repeat center;
background-size: 100%;
height: 100px;
}
h1 {
padding-top: 40px;
padding-bottom: 20px;
}
p {
padding-bottom: 20px;
margin-bottom: 10px;
padding-top: 10px;
font-size: 20px;
color: #f3f3f3;
}
li {
font-size: 20px;
color: #f3f3f3;
}
img {
padding-top: 10px;
padding-bottom: 10px;
}
h2 {
padding-top: 20px;
color: #5a8b5f;
}
/* page intro */
#pageintro {
padding:200px 0;}
#pageintro {
display:block; max-width:60%; margin:0 auto; text-align:center;}
#pageintro p:first-of-type{
margin:0 0 30px 0; padding:0; font-size:18px;}
#pageintro .topheading{
font-size:20px;}
#pageintro .frames{
font-size:20px;}
/* page intro2 */
#pageintro2 {
padding:200px 0;}
#pageintro2 {
display:block; max-width:60%; margin:0 auto; text-align:center;}
#pageintro2 p:first-of-type{
margin:0 0 30px 0; padding:0; font-size:18px;}
#pageintro2 .topheading{
font-size:20px;}
#pageintro2 {
font-size:20px;}
/* scrolly */
#scrolly {
position: relative;
background-color: #000000;
height: 300vh;
}
article {
position: relative;
padding: 0;
max-width: 20rem;
margin: 0 auto;
}
.sticky-thing {
object-fit: cover;
top: 0;
left: 0;
position: -webkit-sticky;
position: sticky;
left: 0;
width: 100%;
height: 100vh;
margin: 0;
background-color: #000000;
z-index: 0;
top: 12.5vh;
height: 75vh;
/* Center everything inside */
align-items: center;
justify-content: center;
background-image: url('images/15_1659_WEB.jpg');
background-size: cover;
background-position: center center;
}
.sticky-thing p {
font-size: 8rem;
font-weight: 900;
color: #fff;
}
.step {
margin: 0 -5rem 2rem -5rem;
margin-bottom: 25rem;
color: #fff;
background-color: #8a8a8aa1;
}
.step:last-child {
margin-bottom: 0;
}
.step.is-active p {
background-color: rgb(90 139 95 / 80%);
color: #050505;
}
.step p {
text-align: center;
padding: 1rem;
font-size: 1.5rem;
background-color: #292929a1;
}
body {
font-family: "Source Sans Pro";
overflow-x: hidden;
}
/* scrolly-2 */
.sticky-thing-2 {
object-fit: cover;
top: 0;
left: 0;
position: -webkit-sticky;
position: sticky;
left: 0;
width: 100%;
height: 100vh;
margin: 0;
background-color: #000000;
z-index: 0;
top: 12.5vh;
height: 75vh;
/* Center everything inside */
align-items: center;
justify-content: center;
background-image: url('images/05_1659_WEB.jpg');
background-size: cover;
background-position: center center;
}
.sticky-thing-2 p {
font-size: 8rem;
font-weight: 900;
color: #fff;
}
.header h1 {
font:"Source Sans Pro - Black";
color: #ffffff;
font-size: 130px;
}
.header h2 {
color: #ffffff;
font-size: 40px;
}
.opening {
height: 100vh;
background: url(images/21_1659_WEB.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Table Info Section */
.tableinfo {
background: url(images/21_1659_WEB.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 5em;
}
.backgroundtext {
background-color: rgba(34, 34, 34, 0.9);
}
/* Get Involved */
.overlay-desc {
background: rgba(0,0,0,0);
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.involvedvideo {
height: 80%;
}
/* Nav Bar */
.navbar-custom {
background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
/* A link color */
a:link {
color: rgb(90 139 95);
background-color: transparent;
text-decoration: none;
}
a:visited {
color: rgb(90 139 95);
background-color: transparent;
text-decoration: none;
}
a:hover {
color: rgb(180, 211, 202);
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
<title>Food Security</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#see-it">See the Sculpture <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mass-hunger">Mass Hunger</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#find-food">Find Food</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#get-involved">Get Involved</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#in-the-news">In the News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
</div>
</nav>
<section class="opening">
<div class="header text-center pt-5">
<h1>1,659</h1>
<h2>Food Security Data Sculpture</h2>
</div>
</section>
<header>
<section id="scrolly">
<div class="sticky-thing">
</div>
<article>
<div class="step" data-step="1" data-color="red">
<p>The pandemic has affected so many aspects of our lives, amplifying disparities and challenges that already existed.</p>
</div>
<div class="step" data-step="2" data-color="green">
<p>For far too many households simply having access to enough food to eat is a daily challenge.</p>
</div>
<div class="step" data-step="3" data-color="blue">
<p>During the early months of the COVID pandemic, an average of 1,659 new households applied for SNAP benefits every DAY in Massachusetts. </p>
</div>
<div class="step" data-step="4" data-color="red">
<p>The pandemic has affected so many aspects of our lives, amplifying disparities and challenges that already existed.</p>
</div>
</article>
</section>
</header>
<header>
<section id="scrolly">
<div class="sticky-thing-2">
</div>
<article>
<div class="step" data-step="1" data-color="red">
<p>For far too many households simply having access to enough food to eat is a daily challenge.</p>
</div>
<div class="step" data-step="2" data-color="green">
<p>This data sculpture was inspired by that number</p>
</div>
<div class="step" data-step="3" data-color="blue">
<p> Each of the 1,659 households is represented by one knife, spoon, or fork.</p>
</div>
</article>
</section>
</header>
<a name="see-it" />
<div class="tableinfo">
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
<div class="row">
<div class="col-md-6 backgroundtext">
<h2 class="text-center">See it</h2>
<p>
The pandemic is slowing here, but these families and others facing food insecurity still struggle to put food on their tables.
On this site you can learn about <a href="#calendar">where you can see the sculpture</a>, discover <a href="#find-food">local resources</a> if you are in need, and learn <a href="#ways-to-help">ways you can help</a>.
</p>
<p><b>Current and Upcoming Exhibitions:</b></p>
<ul>
<li>Nov 12, 2022 - Apr 23, 2023: <a href="https://fullercraft.org/event/food-justice-growing-a-healthy-community-through-art/">Fuller Craft Museum</a>, on display as part of the traveling Food Justice exhibition</li>
</ul>
<p><b>Past Exhibitions:</b></p>
<ul>
<li>Mar - Apr, 2022: <a href="https://www.gannacademy.org">Gann Academy</a>, on display to coincide with the Jewish holidays of Purim and Passover</li>
<li>Oct 30 - Dec 13, 2021: <a href="https://roux.northeastern.edu">The Roux Insitute</a> (Portland, ME), on display in the main lobby</li>
<li>Oct 17 - 28, 2021: <a href="https://www.thegrowingcenter.org">Somerville Community Growing Center</a> (Somerville, MA), for their annual Harvest Festival</li>
<li>Sept 10 - Oct 2, 2021: <a href="https://artswayland.com">The @W Gallery</a> (Wayland, MA)</li>
<li>Aug 27 - Sept 9, 2021: Northeastern University (Boston, MA), at the Curry Student Center Sculpture Garden (<a href="https://goo.gl/maps/FcVjdh5eerQj7SJ76">map location</a>)
<ul>
<li>Food drive and art event 9/8 3-5pm (<a href="files/NU-Food-Justice-Event.pdf">flyer</a>)</li>
</ul>
</li>
<li>Aug 6-26, 2021: <a href="https://www.revere.org/departments/healthy-community-initiatives/farmers-market">Revere Farmer's Market</a> (Revere, MA), for National Farmer's Week</li>
<li>July 24 - Aug 5, 2021: <a href="https://artsatthearmory.org">Center for Arts at the Armory (Somerville, MA)</a></li>
<li>July 19-23, 2021: <a href="https://groundworksomerville.org/programs/south-street-farm/">South Street Farm (Somerville, MA)</a>, hosted by Groundwork Somerville)</li>
</ul>
</div>
</div>
<div class="col-md-6">
<img src="images/32_1659_WEB.jpg" width="80%" position=absolute; />
</div>
</div>
</div>
<a name="mass-hunger" />
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<h2>Hunger in Massachusetts</h2>
<p>Feeding America defines food insecurity as “a lack of consistent access to enough food for every person in a household to live an active, healthy life”. Food insecurity is caused by a number of social and economic factors, but can be triggered by a sudden event (such as job loss, car maintenance, etc.) and seriously impacts both adult and child health. People and families living in poverty are more likely to experience food insecurity, and other factors that put people at higher risk of insecurity are race, immigration status, and geographic location. These factors alone are not causal with food insecurity, rather it is systemic injustices and oppressions that have caused this link.</p>
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/653736176?h=4ca7d7316a&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Maria Clip 1 - A4.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>
Many food insecure people live in areas without proper access to grocery stores and fresh produce, meaning they have to rely on local convenience stores and predominantly non-perishable grocery items for the bulk of their diet.
</p>
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/653736187?h=ef3f1deeab&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Maria Clip 2 - A2.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>
Before the beginning of the COVID-19 pandemic in early 2020, Project Bread reported the household food insecurity rate to be 8.2% in Massachusetts. From 2019 to 2020, the state of Massachusetts saw a 55% increase in the number of residents facing food insecurity, according to a survey led by the Greater Boston Food Bank. According to Project Bread, food insecurity peaked in May 2020 and has trended downward since, but remains above pre-pandemic levels.
</p>
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/653736207?h=5e1d94e17c&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="PB Clip 1.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<img src="images/Screen Shot 2021-10-31 at 10.40.26 PM.png" width="100%" position=relative;/>
<p>
Non-white residents have historically been overrepresented in those experiencing food insecurity. Particularly, Black, Latinx, and multiracial households are nearly twice as likely to experience food insecurity as white households. The Food Bank published that “among Massachusetts residents, 58 percent of Latinx adults, 45 percent of Black adults, 26 percent of Asian adults, 24 percent of White adults and 42 percent of adults with children reported experiencing food insecurity” (GBFB). Non-white households are more likely to live in locations that lack access to fresh food, public transportation, and have children who receive breakfast and lunch through the National School Lunch Program (NSLP). These households have been hit the hardest by the pandemic in all aspects, including job loss and infection rate, due to centuries of systemic racism within healthcare, infrastructure, and the workforce.
</p>
<p>Among the programs designed to alleviate hunger and food insecurity are the Supplemental Nutrition Assistance Program (SNAP), EBT, and HIP. In Massachusetts, the number of residents enrolling in SNAP has increased significantly. The program increased benefits amounts so that households could receive the maximum amount through June 2021. However, since Massachusetts ended the state of emergency of June 15, these expanded benefits ended at the end of the month.
</p>
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/653736221?h=90d9a249d7&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="PB Clip 2.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>From May 2019 to June 2021, SNAP enrollment went up by 27.5%. It is estimated that 1,659 new households applied for SNAP benefits in Massachusetts each day during the pandemic, giving the inspiration for our data sculpture. It is estimated that only half of people eligible for SNAP benefits enroll in them. There are several reasons for this under enrollment, including stigma and a desire for self-sufficiency. In Massachusetts, MassHealth data shows that 659,340 people fall in this gap, and a quarter of them are children.
</p>
<img src="images/Project_Bread.svg" width="100%" position=relative;/>
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/653736239?h=706abbf58d&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="PB Clip 3.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>The solution to food insecurity is not simply getting people more food. Rather, it is both a systems and interpersonal level shift towards food sovereignty that is the goal. Food sovereignty is a concept developed by Via Campesina, the International Peasants’ Movement and leader in the food justice movement. They define food sovereignty as “the peoples’, Countries’ or State Unions’ RIGHT to define their agricultural and food policy, without any dumping vis-à-vis third countries”. You can read more about the principles of food sovereignty and the work that Via Campesina does here.
</p>
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/653736134?h=90c994a87e&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Haley House Clip 1.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</div>
</div>
</div>
<a name="find-food" />
<div>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<h2>Find Food</h2>
<p>
The Greater Boston Food Bank hosts <a href="https://www.gbfb.org/need-food/">an online map of food assistance</a> across Massachusetts, and can <a href="https://www.gbfb.org/what-we-do/our-programs/snap/">help you enroll for SNAP</a>. Reach them at <a href="tel:617-598-5022">617-598-5022</a>, <a href="mailto:SNAP@gbfb.org">SNAP@gbfb.org</a> or <a href="https://GBFB.org/SNAP">GBFB.org/SNAP</a>.
</p>
<a href="https://www.gbfb.org/need-food/">
<img src="images/logo-gbfb-fa.png" alt="Logos for greater boston food bank and feeding america, both with drawings of wheat growing" />
<p>
The City of Boston website hosts <a href="https://www.boston.gov/departments/food-access/food-resources-map">a map of food resources</a>. Reach them at <a herf="tel:617-635-3717">617-635-3717</a> or <a href="mailto:food@boston.gov">food@boston.gov</a>.
</p>
<a href="https://www.boston.gov/departments/food-access/food-resources-map">
<img src="images/logo-city-of-boston.svg" alt="Logos of the city of boston, just the name typeset nicely" />
</a>
</div>
</div>
</div>
<a name="get-involved"/>
<div class="container">
<div class="row">
<h2>Get Involved</h2>
<p>There are many ways to get involved. You can <a href="https://haleyhouse.org/">visit the Greater Boston Food Bank</a> to see multiple ways for both institutions and individuals to get involved in the fight against food insecurity. The <a href="https://haleyhouse.org/">Haley House</a> food pantry located in the South End welcomes volunteers to help run their soup kitchen. Reach out to them to learn more. </p>
</div>
</div>
<section>
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/653736156?h=eb0ef42431&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="INTRO_FOOD_SECURITY.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</section>
<a name="in-the-news"/>
<div class="container">
<div class="row">
<h2>In the News</h2>
<p>
<ul>
<li>Hunger Reimagined: the story of food insecurity as told through sculpture (Northeastern News, Sep 7 2021)</li>
<li>Local artists' sculpture shows scale of food insecurity in Mass, as problem rages on (Somerville Journal, Aug 5 2021)</li>
</ul>
</p>
</div>
</div>
<a name="team"/>
<div class="container">
<div class="row">
<h2>Team</h2>
<p>Emily Bhargava (Principal, Connection Lab) - Conceptualization, Design, Fabrication, Outreach</p>
<p>Rahul Bhargava (Assistant Professor, Northeastern University) - Conceptualization, Design, Research, Outreach, Website</p>
<p>Sofia Perez (Gradute Student, Northeastern University) - Research, Web Design, Media Production</p>
<p>Becca Berkey, Ph. D. (Education Innovation, Northeastern University) - Facilitation, Student Direction</p>
<p>Student Research Support: Kelly Marchese, Sarina Wasserman, Jason McMorris, Mary Moskowitz, Minzhong Wang (Students, Northeastern University)</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- <div class='debug'></div> -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<script src="https://unpkg.com/scrollama"></script>
<script>
// DOM - document object model
var main = document.querySelector("header");
var scrolly = main.querySelector("#scrolly");
var sticky = scrolly.querySelector(".sticky-thing");
var article = scrolly.querySelector("article");
var steps = article.querySelectorAll(".step");
// initialize the scrollama
var scroller = scrollama();
// scrollama event handlers
function handleStepEnter(response) {
// response = { element, direction, index }
var el = response.element;
//console.log(el);
// remove is-active from all steps
// then add is-active to this step
steps.forEach(step => step.classList.remove('is-active'));
el.classList.add('is-active');
// update graphic based on step
// use "template literals" with backticks
// sticky.querySelector("p").innerText = `Step number ${el.dataset.step}`;
// sticky.style.backgroundImage = url('images/21_1659_WEB.jpg');
// sticky.querySelector("p").style.fontSize = `${el.dataset.step}rem`;
}
function init() {
// 2. setup the scroller passing options
// this will also initialize trigger observations
// 3. bind scrollama event handlers (this can be chained like below)
scroller
.setup({
step: "#scrolly article .step",
offset: 0.33,
debug: false
})
.onStepEnter(handleStepEnter);
// setup resize event
window.addEventListener("resize", scroller.resize);
}
// kick things off
init();
</script>
</body>
</html>