-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
439 lines (407 loc) · 28.7 KB
/
index.html
File metadata and controls
439 lines (407 loc) · 28.7 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Objective Subject — Why</title>
<link href="./build/css/app.min.css" rel="stylesheet" />
<!-- Essential META Tags -->
<meta property="og:title" content="Objective Subject — Why" />
<meta property="og:description" content="In the 2016 U.S. election only 55% of people voted. Why?" />
<meta property="og:image" content="http://www.objectivesubject.com/wp-content/themes/obsub/images/why/os-why-thumbnail.png" />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="480" />
<meta property="og:url" content="http://www.objectivesubject.com/why/" />
<meta name="twitter:card" content="summary_large_image" />
<!-- Non-Essential, But Recommended -->
<meta property="og:site_name" content="Objective Subject — Why" />
<meta name="twitter:image:alt" content="Objective Subject explores the disconnection between citizens and government." />
</head>
<body class="loading static-app">
<main id="app">
<header class="site-header grid-container">
<div class="site-title h1">Objective Subject</div>
</header>
<!-- Scene 1 -->
<section id="intro" class="scene-1 scene">
<div class="scene-1__content scene-content">
<div class="grid-container">
<div class="scene-1__copy scene-copy">
<h1>in the 2016 u.s. election only 55% of people voted.</h1>
</div>
<a href="#overview" data-href="#overview" class="scene-1__button button js-smooth-scroll">why?</a>
</div>
</div>
<div class="scene-1__rule scene-rule" data-options='{"duration":"40%"}'></div>
</section>
<!-- Scene 2 -->
<section id="overview" class="scene-2 scene">
<div class="scene-2__background scene-background">
<div class="scene-2__content scene-content">
<div class="grid-container">
<div class="scene-2__copy scene-copy">
<h2 class="h1">
we want to explore the disconnection people feel in our society through a series of collaborative projects over the next year.
<br/><br/>
these projects will tackle the relationship people have with their government.
</h2>
</div>
<ul class="scene-directory">
<li><a href="#the-voting-system" data-href="#the-voting-system" class="highlight-red js-smooth-scroll">The Voting System</a></li>
<li><a href="#the-electoral-system" data-href="#the-electoral-system" class="highlight-red js-smooth-scroll">The Electoral System</a></li>
<li><a href="#politics" data-href="#politics" class="highlight-red js-smooth-scroll">Politics</a></li>
<li><a href="#information" data-href="#information" class="highlight-red js-smooth-scroll">Information</a></li>
<li><a href="#understanding" data-href="#understanding" class="highlight-red js-smooth-scroll">Understanding</a></li>
<li><a href="#participatory-deficit" data-href="#participatory-deficit" class="highlight-red js-smooth-scroll">Participatory Deficit</a></li>
</ul>
</div>
</div>
</div>
<div class="scene-2__foreground scene-foreground">
<div class="scene-2__images scene-images">
<div class="overflow-container">
<img src="build/img/1-Exploration-Curtain.png"
width="600" height="180"
srcSet="build/img/1-Exploration-Curtain.png 1x, build/img/1-Exploration-Curtain@2x.png 2x"
alt="Exploration Curtain"
class="scene-2__image curtain scene-image"/>
</div>
<img src="build/img/1-Exploration-Light.png"
width="600" height="180"
srcSet="build/img/1-Exploration-Light.png 1x, build/img/1-Exploration-Light@2x.png 2x"
alt="Exploration Light"
class="scene-2__image light scene-image"/>
<img src="build/img/1-Exploration-Man.png"
width="600" height="180"
srcSet="build/img/1-Exploration-Man.png 1x, build/img/1-Exploration-Man@2x.png 2x"
alt="Exploration Man"
class="scene-2__image man scene-image"/>
</div>
<div class="scene-2__rule scene-rule no-draw"></div>
</div>
</section>
<!-- Scene 3 -->
<section id="the-voting-system" class="scene-3 scene">
<div class="scene-3__content scene-content">
<div class="grid-container">
<ul class="scene-3__list scene-list">
<li><span class="highlight-red">the voting system</span></li>
<li class="reveal">registration</li>
<li class="reveal">disenfranchisement</li>
<li class="reveal">ballot design</li>
</ul>
<div class="scene-3__images scene-images">
<img src="build/img/2-Voting-System-Man.png"
width="600" height="900"
srcSet="build/img/2-Voting-System-Man.png 1x, build/img/2-Voting-System-Man@2x.png 2x"
alt="Voting System Man"
class="scene-3__image man scene-image"/>
<img src="build/img/2-Voting-System-Lines.png"
width="600" height="900"
srcSet="build/img/2-Voting-System-Lines.png 1x, build/img/2-Voting-System-Lines@2x.png 2x"
alt="Voting System Lines"
class="scene-3__image lines lines scene-image"/>
</div>
<div class="scene-3__copy scene-copy">
<h2 class="h1">
voters in the u.s. need to get through a complicated, confusing and passive registration system, abide by voting rules that vary county by county and can be prone to political interference, face ballot papers which overwhelm and obfuscate, deal with machines that have a dubious history of reliability and all too often must wait in line for hours simply to exercise the right to vote.
</h2>
</div>
</div>
</div>
<div class="scene-3__rule scene-rule"></div>
</section>
<!-- Scene 4 -->
<section id="the-electoral-system" class="scene-4 scene">
<div class="scene-4__content scene-content">
<div class="grid-container is-flex">
<ul class="scene-4__list scene-list" data-duration="660">
<li><span class="highlight-red">the electoral system</span></li>
<li class="reveal">gerrymandering</li>
<li class="reveal">the electoral college system</li>
<li class="reveal">marginal vs non-marginal states</li>
</ul>
<div class="scene-4__images scene-images">
<img src="build/img/3-Electoral-System-Small-Man.png"
width="600" height="900"
srcSet="build/img/3-Electoral-System-Small-Man.png 1x, build/img/3-Electoral-System-Small-Man@2x.png 2x"
alt="Voting System Small Man"
class="scene-4__image small-man scene-image"/>
<img src="build/img/3-Electoral-System-Box.png"
width="600" height="900"
srcSet="build/img/3-Electoral-System-Box.png 1x, build/img/3-Electoral-System-Box@2x.png 2x"
alt="Voting System Box"
class="scene-4__image box scene-image"/>
<img src="build/img/3-Electoral-System-Big-Man.png"
width="600" height="900"
srcSet="build/img/3-Electoral-System-Big-Man.png 1x, build/img/3-Electoral-System-Big-Man@2x.png 2x"
alt="Voting System Big Man"
class="scene-4__image big-man scene-image"/>
</div>
<div class="scene-4__copy scene-copy is-bottom">
<h2 class="h1">
from ‘politicians choosing their voters’ by dictating where electoral boundaries lie, to a representative system dating from an agrarian era which favors rural over urban areas (where 80.7% of the country lives*), our electoral system provides some people with outsized political power and others with very little.
<br/><br/>
consequently, ‘one person, one vote’ doesn’t mean an equal consequence per vote. our important institutions are facing a growing democratic deficit.
</h2>
<p>*source: u.s. census bureau</p>
</div>
</div>
</div>
<div class="scene-4__rule scene-rule draws-rtl"></div>
</section>
<!-- Scene 5 -->
<section id="politics" class="scene-5 scene">
<div class="scene-5__content scene-content">
<div class="grid-container is-flex">
<ul class="scene-5__list scene-list">
<li><span class="highlight-red">politics</span></li>
<li class="reveal">campaign finance</li>
<li class="reveal">personality & campaign style</li>
<li class="reveal">accountability</li>
<li class="reveal">the election season</li>
</ul>
<div class="scene-5__images scene-images">
<img src="build/img/4-Politics-Light.png"
width="600" height="900"
srcSet="build/img/4-Politics-Light.png 1x, build/img/4-Politics-Light@2x.png 2x"
alt="Politics Light"
class="scene-5__image light scene-image"/>
<img src="build/img/4-Politics-Man.png"
width="600" height="900"
srcSet="build/img/4-Politics-Man.png 1x, build/img/4-Politics-Man@2x.png 2x"
alt="Politics Man"
class="scene-5__image man scene-image"/>
</div>
<div class="scene-5__copy scene-copy is-bottom">
<h2 class="h1">
an expensive, protracted election season inflames the passions of a few but turns off many in the electorate. the soundbite-driven, policy-light, ‘horse-race’ media coverage and agenda-setting reduces the debate to personality, style and very little substance.
<br/><br/>
meanwhile, big money often dictates the political agenda, which, coupled with the lack of accountability over many years for what candidates say during campaigns, has eroded the public’s trust.
</h2>
</div>
</div>
</div>
<div class="scene-5__rule scene-rule"></div>
</section>
<!-- Scene 6 -->
<section id="information" class="scene-6 scene">
<div class="scene-6__content scene-content">
<div class="grid-container">
<ul class="scene-6__list scene-list" data-duration="670">
<li><span class="highlight-red">information</span></li>
<li class="reveal">partisan media</li>
<li class="reveal">media cycles</li>
<li class="reveal">facts</li>
<li class="reveal">over-information</li>
<li class="reveal">government communication</li>
</ul>
<div class="scene-6__images scene-images">
<img src="build/img/5-Information-Woman.png"
width="600" height="900"
srcSet="build/img/5-Information-Woman.png 1x, build/img/5-Information-Woman@2x.png 2x"
alt="Information Woman"
class="scene-6__image woman scene-image"/>
<img src="build/img/5-Information-Man.png"
width="600" height="900"
srcSet="build/img/5-Information-Man.png 1x, build/img/5-Information-Man@2x.png 2x"
alt="Information Man"
class="scene-6__image man scene-image"/>
</div>
<div class="scene-6__copy scene-copy">
<h2 class="h1">
the u.s. electorate is physically isolated in economically and racially segregated neighborhoods, as well as immersed in their own media bubbles, subject to inaccurate or biased ‘click-bait’ which plays on basic instincts and reinforces existing bias. this makes it difficult to engage in a common reality to tackle real problems.
<br/><br/>
24-hour news and twitter-length over-simplification of issues fills the vacuum left by governments failing to provide neutral facts and explain their role in people’s lives.
</h2>
</div>
</div>
</div>
<div class="scene-6__rule scene-rule draws-rtl"></div>
</section>
<!-- Scene 7 -->
<section id="understanding" class="scene-7 scene">
<div class="scene-7__content scene-content">
<div class="grid-container">
<ul class="scene-7__list scene-list" data-duration="760">
<li><span class="highlight-red">understanding</span></li>
<li class="reveal">how government works</li>
<li class="reveal">what government is doing for you</li>
<li class="reveal">how to affect decisions</li>
</ul>
<div class="scene-7__images scene-images">
<img src="build/img/6-Understanding-Building.png"
width="600" height="900"
srcSet="build/img/6-Understanding-Building.png 1x, build/img/6-Understanding-Building@2x.png 2x"
alt="Understanding Building"
class="scene-7__image building scene-image"/>
<img src="build/img/6-Understanding-Mark.png"
width="600" height="900"
srcSet="build/img/6-Understanding-Mark.png 1x, build/img/6-Understanding-Mark@2x.png 2x"
alt="Understanding Mark"
class="scene-7__image mark scene-image"/>
</div>
<div class="scene-7__copy scene-copy">
<h2 class="h1">
with comprehensible information lacking, the complex web of government institutions at both federal, state and local levels is misunderstood by citizens. on a daily basis, interacting with government services is hard, as they are designed for system performance and not public/user needs. furthermore, governments do a poor job of explaining their actions, as well as the positive value of the services they continue to provide.
</h2>
</div>
</div>
</div>
<div class="scene-7__rule scene-rule"></div>
</section>
<!-- Scene 8 -->
<section id="participatory-deficit" class="scene-8 scene">
<div class="scene-8__content scene-content">
<div class="grid-container">
<ul class="scene-8__list scene-list">
<li><span class="highlight-red">participatory deficit</span></li>
<li class="reveal">connection with representation</li>
<li class="reveal">ongoing engagement with offcials</li>
<li class="reveal">grassroots organizing</li>
</ul>
<div class="scene-8__images scene-images">
<img src="build/img/7-Participation-Clipper.png"
width="600" height="900"
srcSet="build/img/7-Participation-Clipper.png 1x, build/img/7-Participation-Clipper@2x.png 2x"
alt="Participation Clipper"
class="scene-8__image clipper scene-image"/>
<img src="build/img/7-Participation-Tree.png"
width="600" height="900"
srcSet="build/img/7-Participation-Tree.png 1x, build/img/7-Participation-Tree@2x.png 2x"
alt="Participation Tree"
class="scene-8__image tree scene-image"/>
<img src="build/img/7-Participation-Hose.png"
width="600" height="900"
srcSet="build/img/7-Participation-Hose.png 1x, build/img/7-Participation-Hose@2x.png 2x"
alt="Participation Hose"
class="scene-8__image hose scene-image"/>
<img src="build/img/7-Participation-Ladder.png"
width="600" height="900"
srcSet="build/img/7-Participation-Ladder.png 1x, build/img/7-Participation-Ladder@2x.png 2x"
alt="Participation Ladder"
class="scene-8__image ladder scene-image"/>
<img src="build/img/7-Participation-Trimmer.png"
width="600" height="900"
srcSet="build/img/7-Participation-Trimmer.png 1x, build/img/7-Participation-Trimmer@2x.png 2x"
alt="Participation Trimmer"
class="scene-8__image trimmer scene-image"/>
<img src="build/img/7-Participation-Waterer.png"
width="600" height="900"
srcSet="build/img/7-Participation-Waterer.png 1x, build/img/7-Participation-Waterer@2x.png 2x"
alt="Participation Waterer"
class="scene-8__image waterer scene-image"/>
</div>
<div class="scene-8__copy scene-copy">
<h2 class="h1">
Understanding one’s ability to impact on government decisions beyond the act of voting is often understood only by those with time or training, and yet the gap between decision-making and the public explains so much disaffection in society.
<br/><br/>
People should be more engaged with their community, and their country, beyond the ballot box. citizens need to hold their elected offcials accountable through e ective direct communication, or through grassroots organizations aiming to effect change.
</h2>
</div>
</div>
</div>
<div class="scene-8__rule scene-rule draws-rtl"></div>
</section>
<!-- Scene 9 -->
<section id="outro" class="scene-9 scene">
<div class="scene-9__content scene-content">
<div class="grid-container">
<div class="scene-9__copy scene-copy">
<h2 class="h1">
Whatever it takes to bring these issues to life, support community voices and create the impact we need.
<br/><br/>
We want to partner with you and your friends on these important issues.
<br/><br/>
These coming years can be full of promise if we are engaged.
</h2>
</div>
<div class="os-logo"><a href="//www.objectivesubject.com/" target="_blank" class="site-title">Objective Subject</a></div>
</div>
<div class="grid-container">
<footer class="site-footer clearfix mt-2">
<div class="subscribe">
<p class="big-type">Partner with us</p>
<!--<form action="http://objectivesubject.createsend.com/t/r/s/djdjtk/" method="post" id="subForm" class="subscribe-form">
<div class="input-row">
<label for="fieldEmail" class="display-none">Email</label>
<input id="fieldEmail" name="cm-djdjtk-djdjtk" type="email" placeholder="email address" required />
<button type="submit" class="button">Press enter</button>
</div>
</form>-->
<form action="https://objectivesubject.createsend.com/t/r/s/urttdtr/" method="post" id="subForm" class="subscribe-form">
<div class="clearfix">
<div class="w-50 input-row mt-1">
<p class="display-none"><label for="fieldName" class="display-none">Name</label></p>
<input id="fieldName" name="cm-name" placeholder="your name" type="text" />
</div>
<div class="w-50 input-row mt-1">
<p class="display-none"><label for="fieldEmail">Email</label></p>
<input id="fieldEmail" class="js-trigger-field" name="cm-urttdtr-urttdtr" placeholder="email address *" type="email" required />
</div>
</div>
<div class="issues input-row js-delayed-field">
<p><label>What issues interest you?</label></p>
<div class="clearfix">
<div class="w-50">
<div class="mt-nudge">
<input id="fielddruhhjjk-0" name="cm-fo-druhhjjk" value="9408148" type="checkbox" />
<label for="fielddruhhjjk-0">the voting system</label>
</div>
<div class="mt-nudge">
<input id="fielddruhhjjk-1" name="cm-fo-druhhjjk" value="9408149" type="checkbox" />
<label for="fielddruhhjjk-1">the electoral system</label>
</div>
<div class="mt-nudge">
<input id="fielddruhhjjk-2" name="cm-fo-druhhjjk" value="9408150" type="checkbox" />
<label for="fielddruhhjjk-2">politics</label>
</div>
</div>
<div class="w-50">
<div class="mt-nudge">
<input id="fielddruhhjjk-3" name="cm-fo-druhhjjk" value="9408151" type="checkbox" />
<label for="fielddruhhjjk-3">information</label>
</div>
<div class="mt-nudge">
<input id="fielddruhhjjk-4" name="cm-fo-druhhjjk" value="9408152" type="checkbox" />
<label for="fielddruhhjjk-4">understanding</label>
</div>
<div class="mt-nudge">
<input id="fielddruhhjjk-5" name="cm-fo-druhhjjk" value="9408153" type="checkbox" />
<label for="fielddruhhjjk-5">participatory deficit</label>
</div>
</div>
</div>
<br/>
</div>
<div class="input-row js-delayed-field">
<p class="display-none"><label for="fielddruhhjju"></label></p>
<textarea id="fielddruhhjju" name="cm-f-druhhjju" placeholder="Send us a personal message (optional)"></textarea>
</div>
<p class="mt-0">
<button type="submit" class="button h1">submit</button>
</p>
</form>
</div>
</footer>
<p class="illo-credit mt-2">Illustrated by Martín Elfman</p>
</div>
</div>
<div class="scene-9__rule scene-rule"></div>
</section>
</main>
<script src="./bower_components/gsap/src/minified/TweenMax.min.js" type="text/javascript"></script>
<script src="./bower_components/scrollmagic/scrollmagic/minified/ScrollMagic.min.js" type="text/javascript"></script>
<script src="./bower_components/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js" type="text/javascript"></script>
<script src="./build/js/app.min.js" type="text/javascript"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2792624-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>