-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
484 lines (338 loc) · 31.1 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Multimedia Project</title>
<!-- Microdata Scema: Fill this out for SEO purposes -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "",
"image": [
"",
""
],
"author": "",
"publisher": "",
"datePublished": "2020-04-28T12:00:00",
"url": "",
"sameAs" : [
"",
"",
""
]
}
</script>
</head>
<body>
<!-- main banner -->
<header role="banner" class="looping-background-video d-flex flex-column align-items-center justify-content-center">
<h1 class="text-white text-center display-1">Hello World</h1>
<p class="text-white">Something something</p>
<video muted playsinline autoplay loop>
<source src="https://temp-j100.s3.amazonaws.com/aidindying-background.mp4" type="video/mp4">
<img src="" alt="fallback">
</video>
</header>
<!-- content section -->
<article role="main">
<div class="container mt-5">
<!-- article header -->
<header class="my-5 row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h2>Governments have widely varying policies and practices towards journalists</h2>
<p class="small pt-5">By Name Here</p>
</div>
</header>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<p>Such a code of conduct can, in the real world, be difficult to uphold consistently. Reporting and editing do not occur in a vacuum but always reflect the political context in which journalists, no less than other citizens, operate.</p>
<p>A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth. When budgets are cut, editors may sacrifice reporters in distant news bureaus, reduce the number of staff assigned to low-income areas, or wipe entire communities from the publication's zone of interest.</p>
<p>Publishers, owners and other corporate executives, especially advertising sales executives, could try to use their powers over journalists to influence how news is reported and published. For this reason, journalists traditionally relied on top management to create and maintain a "firewall" between the news and other departments in a news organization to prevent undue influence on the news department.</p>
<p>There are over 242 codes of ethics in journalism that vary across various regions of the world.</p>
<p>Governments have widely varying policies and practices towards journalists, which control what they can research and write, and what press organizations can publish. Some governments guarantee the freedom of the press; while other nations severely restrict what journalists can research or publish.</p>
<!-- EXAMPLE OF SINGLE IMAGE -->
<figure class="figure">
<img src="assets/example-media/random_1280.jpg" alt="Person reading a newspaper" class="img-fluid d-block">
<figcaption class="figure-caption">Here is a caption for this image</figcaption>
</figure>
<p>Journalists in many nations have some privileges that members of the general public do not, including better access to public events, crime scenes and press conferences, and to extended interviews with public officials, celebrities and others in the public eye.</p>
<p>Journalists who elect to cover conflicts, whether wars between nations or insurgencies within nations, often give up any expectation of protection by government, if not giving up their rights to protection from the government. Journalists who are captured or detained during a conflict are expected to be treated as civilians and to be released to their national government. Many governments around the world target journalists for intimidation, harassment, and violence because of the nature of their work.</p>
</div>
</div>
<!-- EXAMPLE OF TWO SIDE-BY-SIDE IMAGES -->
<div class="row justify-content-center">
<div class="col-11 col-sm-6">
<figure class="figure">
<img src="assets/example-media/random2_1280.jpg" alt="Person reading a newspaper" class="img-fluid d-block">
<figcaption class="figure-caption">Here is a caption for this image</figcaption>
</figure>
</div>
<div class="col-11 col-sm-6">
<figure class="figure">
<img src="assets/example-media/reading_1280.jpg" alt="Person reading a newspaper" class="img-fluid d-block">
<figcaption class="figure-caption">Here is a caption for this image</figcaption>
</figure>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<p>Journalists' interaction with sources sometimes involves confidentiality, an extension of freedom of the press giving journalists a legal protection to keep the identity of a confidential informant private even when demanded by police or prosecutors; withholding their sources can land journalists in contempt of court, or in jail.</p>
<p>Journalism is the production and distribution of reports on events. The word journalism applies to the occupation, as well as citizen journalists who gather and publish information. Journalistic media include print, television, radio, Internet, and, in the past, newsreels.</p>
<p>Concepts of the appropriate role for journalism vary between countries. In some nations, the news media are controlled by government intervention and are not fully independent. In others, the news media are independent of the government but instead operate as private industry motivated by profit. In addition to the varying nature of how media organizations are run and funded, countries may have differing implementations of laws handling the freedom of speech and libel cases.</p>
</div>
</div>
<!-- EXAMPLE OF ONE LARGE IMAGE -->
<figure class="figure">
<img src="assets/example-media/reading_1350.jpg" alt="Person reading a newspaper" class="img-fluid d-block">
<figcaption class="figure-caption">Here is a caption for this image</figcaption>
</figure>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<p>Journalistic conventions vary by country. In the United States, journalism is produced by media organizations or by individuals. Bloggers are often, but not always, journalists. The Federal Trade Commission requires that bloggers who write about products received as promotional gifts to disclose that they received the products for free. This is intended to eliminate conflicts of interest and protect consumers.</p>
<p>According to Robert McChesney, healthy journalism in a democratic country must provide an opinion of people in power and who wish to be in power, must include a range of opinions and must regard the informational needs of all people.</p>
<p>There are several forms of journalism with diverse audiences. Thus, journalism is said to serve the role of a "fourth estate", acting as a watchdog on the workings of the government. A single publication (such as a newspaper) contains many forms of journalism, each of which may be presented in different formats. Each section of a newspaper, magazine, or website may cater to a different audience.</p>
<p>Consequently, this has resulted in arguments to reconsider journalism as a process distributed among many authors, including the socially mediating public, rather than as individual products and articles written by dedicated journalists.</p>
<p>Because of these changes, the credibility ratings of news outlets has reached an all-time low. A 2014 study revealed that only 22% of Americans reported a "great deal" or "quite a lot of confidence" in either television news or newspapers.</p>
</div>
</div>
<h2 class="text-center my-5">Example of a Photo Carousel</h2>
<!-- EXAMPLE OF A PHOTO CAROUSEL -->
<div id="carouselExample1" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample1" data-bs-slide-to="0" aria-label="slide to 1" class="active"></button>
<button type="button" data-bs-target="#carouselExample1" data-bs-slide-to="1" aria-label="slide to 2"></button>
<button type="button" data-bs-target="#carouselExample1" data-bs-slide-to="2" aria-label="slide to 3"></button>
<button type="button" data-bs-target="#carouselExample1" data-bs-slide-to="3" aria-label="slide to 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/example-media/random2_1280.jpg" class="d-block w-100" alt="Typewriter">
<div class="carousel-caption d-none d-md-block"><p>Example caption 1 (A typewriter)</p></div>
</div>
<div class="carousel-item">
<img src="assets/example-media/reading_1350.jpg" class="d-block w-100" alt="Person reading a newspaper">
<div class="carousel-caption d-none d-md-block"><p>Example caption 2 (Person reading a newspaper)</p></div>
</div>
<div class="carousel-item">
<img src="assets/example-media/desk-6.jpg" class="d-block w-100" alt="Another typerwriter">
<div class="carousel-caption d-none d-md-block"><p>Example caption 3 (Another typewriter)</p></div>
</div>
<div class="carousel-item">
<img src="assets/example-media/interviewing_1350.jpg" class="d-block w-100" alt="Reporter at a political rally">
<div class="carousel-caption d-none d-md-block"><p>Example caption 4 (Reporter at a divisive political rally)</p></div>
</div>
<!-- To add more images, copy the code below and paste above thie line
<div class="carousel-item">
<img src="assets/example-media/reading_1350.jpg" class="d-block w-100" alt="Person reading a newspaper">
<div class="carousel-caption d-none d-md-block"><p>Example caption 3</p></div>
</div>
-->
</div>
<button class="carousel-control-prev" data-bs-target="#carouselExample1" type="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" data-bs-target="#carouselExample1" type="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- END PHOTO CAROUSEL -->
<div class="row justify-content-center mt-4">
<div class="col-12 col-md-8 col-lg-6">
<p>It's clear now that we didn't do enough to prevent these tools from being used for harm as well. That goes for fake news, foreign interference in elections, and hate speech, as well as developers and data privacy.</p>
<p>While publications reporting the news to the general public in a standardized fashion only began to appear in the 17th century and later, governments as early as Han dynasty China made use of regularly published news bulletins. These bulletins, however, were intended only for government officials, and thus were not journalistic news publications in the modern sense of the term.</p>
<p>A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth. When budgets are cut, editors may sacrifice reporters in distant news bureaus, reduce the number of staff assigned to low-income areas, or wipe entire communities from the publication's zone of interest.</p>
<p>Publishers, owners and other corporate executives, especially advertising sales executives, could try to use their powers over journalists to influence how news is reported and published. For this reason, journalists traditionally relied on top management to create and maintain a "firewall" between the news and other departments in a news organization to prevent undue influence on the news department.</p>
<p>Starting in the 1940s, United States broadcast television channels would air 10-to-15-minute segments of news programming one or two times per evening. The era of live-TV news coverage would begin in the 1960s with the assassination of John F. Kennedy, broadcast and reported to live on a variety of nationally syndicated television channels. During the 60s and 70s, television channels would begin adding regular morning or midday news shows. Starting in 1980 with the establishment of CNN, news channels began providing 24-hour news coverage, a format which persists through today.</p>
</div>
</div>
<!-- EXAMPLE OF A MODAL -->
<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary mx-auto d-block" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo pop-up (also called a modal)
</button>
<!-- Modal content, which is hidden until activated. -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="ms-auto mb-3 d-block btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<!-- POPUP CONTENT GOES HERE -->
<img src="assets/example-media/interviewing_1280.jpg" class="d-block w-100" alt="Person interviewing">
<p>Here is some text. The above can also be a video, an interactive embed, or other similar media type. The button to trigger this pop-up can be in the form of a link, an image, or any other clickable element on the page.</p>
<!-- END POPU UP CONTENT -->
</div>
</div>
</div>
</div>
<!-- END POPUP MODAL -->
<div class="row justify-content-center mt-4">
<div class="col-12 col-md-8 col-lg-6">
<p>It's clear now that we didn't do enough to prevent these tools from being used for harm as well. That goes for fake news, foreign interference in elections, and hate speech, as well as developers and data privacy.</p>
<p>A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth. When budgets are cut, editors may sacrifice reporters in distant news bureaus, reduce the number of staff assigned to low-income areas, or wipe entire communities from the publication's zone of interest.</p>
<p>Publishers, owners and other corporate executives, especially advertising sales executives, could try to use their powers over journalists to influence how news is reported and published. For this reason, journalists traditionally relied on top management to create and maintain a "firewall" between the news and other departments in a news organization to prevent undue influence on the news department.</p>
<p>While publications reporting the news to the general public in a standardized fashion only began to appear in the 17th century and later, governments as early as Han dynasty China made use of regularly published news bulletins. These bulletins, however, were intended only for government officials, and thus were not journalistic news publications in the modern sense of the term.</p>
<p>Starting in the 1940s, United States broadcast television channels would air 10-to-15-minute segments of news programming one or two times per evening. The era of live-TV news coverage would begin in the 1960s with the assassination of John F. Kennedy, broadcast and reported to live on a variety of nationally syndicated television channels. During the 60s and 70s, television channels would begin adding regular morning or midday news shows. Starting in 1980 with the establishment of CNN, news channels began providing 24-hour news coverage, a format which persists through today.</p>
</div>
</div>
</div>
<!-- CLOSE .CONTAINER -->
<!-- EXAMPLE OF A BACKGROUND SCROLLER -->
<!-- instructions: Change background image in .background-image-changer first. Then, copy and paste any additional blocks of text. Then change images on the data-step="" attributes of each block. -->
<div class="scrolly position-relative w-100">
<!--this holds background image-->
<div style="background-image:url(assets/example-media/desk-1.jpg)" class="background-image-changer sticky-top w-100 left-0 z-n1"></div>
<div class="step container-fluid d-flex">
<div class="row align-items-center">
<div data-step="assets/example-media/desk-2.jpg" class="text-box col-10 offset-1 col-sm-5 offset-sm-1 bg-body-secondary p-4">
<p class="p-0 m-0">A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth.</p>
</div>
</div>
</div>
<div class="step container-fluid d-flex">
<div class="row align-items-center">
<div data-step="assets/example-media/desk-3.jpg" class="text-box col-10 offset-1 col-sm-6 offset-sm-3 bg-body-secondary p-4">
<p class="p-0 m-0">A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth.</p>
</div>
</div>
</div>
<div class="step container-fluid d-flex">
<div class="row align-items-center">
<div data-step="assets/example-media/desk-4.jpg" class="text-box col-10 offset-1 col-sm-5 offset-sm-6 bg-body-secondary p-4">
<p class="p-0 m-0">A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth.</p>
</div>
</div>
</div>
<!-- optional empty step to see last image
<div class="step container-fluid d-flex"></div>
-->
</div>
<!-- END BACKGROUND SCROLLER -->
<div class="container mt-5">
<div class="row justify-content-center mt-4">
<div class="col-12 col-md-8 col-lg-6">
<p>It's clear now that we didn't do enough to prevent these tools from being used for harm as well. That goes for fake news, foreign interference in elections, and hate speech, as well as developers and data privacy.</p>
<p>A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth. When budgets are cut, editors may sacrifice reporters in distant news bureaus, reduce the number of staff assigned to low-income areas, or wipe entire communities from the publication's zone of interest.</p>
<p>Publishers, owners and other corporate executives, especially advertising sales executives, could try to use their powers over journalists to influence how news is reported and published. For this reason, journalists traditionally relied on top management to create and maintain a "firewall" between the news and other departments in a news organization to prevent undue influence on the news department.</p>
<p>While publications reporting the news to the general public in a standardized fashion only began to appear in the 17th century and later, governments as early as Han dynasty China made use of regularly published news bulletins. These bulletins, however, were intended only for government officials, and thus were not journalistic news publications in the modern sense of the term.</p>
<p>Starting in the 1940s, United States broadcast television channels would air 10-to-15-minute segments of news programming one or two times per evening. The era of live-TV news coverage would begin in the 1960s with the assassination of John F. Kennedy, broadcast and reported to live on a variety of nationally syndicated television channels. During the 60s and 70s, television channels would begin adding regular morning or midday news shows. Starting in 1980 with the establishment of CNN, news channels began providing 24-hour news coverage, a format which persists through today.</p>
<p>Publishers, owners and other corporate executives, especially advertising sales executives, could try to use their powers over journalists to influence how news is reported and published. For this reason, journalists traditionally relied on top management to create and maintain a "firewall" between the news and other departments in a news organization to prevent undue influence on the news department.</p>
<p>While publications reporting the news to the general public in a standardized fashion only began to appear in the 17th century and later, governments as early as Han dynasty China made use of regularly published news bulletins. These bulletins, however, were intended only for government officials, and thus were not journalistic news publications in the modern sense of the term.</p>
<p>Starting in the 1940s, United States broadcast television channels would air 10-to-15-minute segments of news programming one or two times per evening. The era of live-TV news coverage would begin in the 1960s with the assassination of John F. Kennedy, broadcast and reported to live on a variety of nationally syndicated television channels. During the 60s and 70s, television channels would begin adding regular morning or midday news shows. Starting in 1980 with the establishment of CNN, news channels began providing 24-hour news coverage, a format which persists through today.</p>
</div>
</div>
</div><!-- Close container -->
<div class="scrolly-video position-relative w-100">
<div class="sticky-top w-100 left-0 z-n1 background-video-stepper vh-100">
<video preload width="100%" height="auto" class="position-absolute top-50 start-50 align-content-center translate-middle">
<source src="assets/example-media/animation.mp4" type="video/mp4">
</video>
</div>
<div class="step container-fluid d-flex">
<div class="row align-items-center">
<div class="col-10 offset-1 col-sm-5 offset-sm-1 bg-body-secondary p-4">
<p class="p-0 m-0">A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth.</p>
</div>
</div>
</div>
<div class="step container-fluid d-flex">
<div class="row align-items-center">
<div class="col-10 offset-1 col-sm-6 offset-sm-3 bg-body-secondary p-4">
<p class="p-0 m-0">A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth.</p>
</div>
</div>
</div>
<div class="step container-fluid d-flex">
<div class="row align-items-center">
<div class="col-10 offset-1 col-sm-5 offset-sm-6 bg-body-secondary p-4">
<p class="p-0 m-0">A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth.</p>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row justify-content-center mt-4">
<div class="col-12 col-md-8 col-lg-6">
<p>It's clear now that we didn't do enough to prevent these tools from being used for harm as well. That goes for fake news, foreign interference in elections, and hate speech, as well as developers and data privacy.</p>
<p>A news organization's budget inevitably reflects decision-making about what news to cover, for what audience, and in what depth. When budgets are cut, editors may sacrifice reporters in distant news bureaus, reduce the number of staff assigned to low-income areas, or wipe entire communities from the publication's zone of interest.</p>
<p>Publishers, owners and other corporate executives, especially advertising sales executives, could try to use their powers over journalists to influence how news is reported and published. For this reason, journalists traditionally relied on top management to create and maintain a "firewall" between the news and other departments in a news organization to prevent undue influence on the news department.</p>
<p>While publications reporting the news to the general public in a standardized fashion only began to appear in the 17th century and later, governments as early as Han dynasty China made use of regularly published news bulletins. These bulletins, however, were intended only for government officials, and thus were not journalistic news publications in the modern sense of the term.</p>
<p>Starting in the 1940s, United States broadcast television channels would air 10-to-15-minute segments of news programming one or two times per evening. The era of live-TV news coverage would begin in the 1960s with the assassination of John F. Kennedy, broadcast and reported to live on a variety of nationally syndicated television channels. During the 60s and 70s, television channels would begin adding regular morning or midday news shows. Starting in 1980 with the establishment of CNN, news channels began providing 24-hour news coverage, a format which persists through today.</p>
<p>Publishers, owners and other corporate executives, especially advertising sales executives, could try to use their powers over journalists to influence how news is reported and published. For this reason, journalists traditionally relied on top management to create and maintain a "firewall" between the news and other departments in a news organization to prevent undue influence on the news department.</p>
<p>While publications reporting the news to the general public in a standardized fashion only began to appear in the 17th century and later, governments as early as Han dynasty China made use of regularly published news bulletins. These bulletins, however, were intended only for government officials, and thus were not journalistic news publications in the modern sense of the term.</p>
<p>Starting in the 1940s, United States broadcast television channels would air 10-to-15-minute segments of news programming one or two times per evening. The era of live-TV news coverage would begin in the 1960s with the assassination of John F. Kennedy, broadcast and reported to live on a variety of nationally syndicated television channels. During the 60s and 70s, television channels would begin adding regular morning or midday news shows. Starting in 1980 with the establishment of CNN, news channels began providing 24-hour news coverage, a format which persists through today.</p>
</div>
</div>
</div><!-- Close container -->
</article>
<div class="container-fluid">
<footer role="contentinfo" class="row justify-content-center mt-5 bg-dark text-light text-center">
<header class="col-8 py-5">
<p>This is a project by a student at the UC Berkeley Graduate School of Journalism</p>
</header>
</footer>
</div>
<!-- Scripts. Remove those not needed -->
<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/d3.v7.min.js"></script>
<script type="text/javascript" src="js/intersection-observer.js"></script>
<script type="text/javascript" src="js/scrollama.js"></script>
<script>
jQuery(document).ready(function($){
const scroller = scrollama();
const firstImage = $(".background-image-changer").css("background-image").replace(/url\(\"(.*?)\"\)/gi, "$1");
var myInterval;
var scroller1 = scroller
.setup({
step: ".step .text-box",
debug: false
})
.onStepEnter((response) => {// { element, index, direction }
if(response.direction == "down"){
$(".background-image-changer").css({"background-image":"url(" + $(response.element).attr("data-step") + ")"});
}
})
.onStepExit((response) => {
if(response.direction == "up"){
if(response.index == 0){
var changeTo = firstImage;
} else {
var changeTo = $(".step .text-box").eq(response.index - 1).attr("data-step")
}
$(".background-image-changer").css({"background-image":"url(" + changeTo + ")"});
}
});
//Scrolly Video https://github.com/russellsamora/scrollama
$(window).on("scroll", function(){
var videoHolderTop = $(".scrolly-video").offset().top;
var videoHolderBot = $(".scrolly-video").offset().top + $(".scrolly-video").height();
if($(window).scrollTop() > videoHolderTop && $(window).scrollTop() < videoHolderBot){
var totalDistance = videoHolderBot - $(window).height() - videoHolderTop;
var percentage = ($(window).scrollTop() - videoHolderTop) / totalDistance;
var videoDuration = $(".background-video-stepper video").get(0).duration;
$(".background-video-stepper video").get(0).currentTime = videoDuration * percentage;
}
})
//preload images from stepper so they don't blink
$(".step .text-box").each(function(i,e){
(new Image).src=$(e).attr("data-step");
})
//Reset heights when user resizes window. Kindly wait 300ms
function handleResize(){
$(".step, .background-image-changer").height($(window).height());
console.log("resized")
clearInterval(myInterval);
}
$(window).on("resize", function(){clearInterval(myInterval); myInterval = setInterval(handleResize, 300);});
handleResize();
});
</script>
</body>
</html>