-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstory1.html
380 lines (338 loc) · 17.6 KB
/
story1.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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>1: What Is An HRA?</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="img/favicon.svg">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E1811WRJJD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-E1811WRJJD');
</script>
</head>
<body id="one">
<!-- section counter -->
<div id="sectionCounterdiv">
<p id="sectionCounter"></p>
</div>
<!-- section top -->
<section class="scrollynav">
<a href="index.html"><img draggable="false" src="img/UI Assets/navlogo.svg" class="navlogo"></a>
<div class="dropdown">
<button class="dropbtn"><img draggable="false" src="img/UI Assets/navhamburger.svg" class="navmenu">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="story1.html"><img src="img/UI Assets/count1.svg" style="vertical-align:middle"> What
Is An HRA?</a>
<a href="story2.html"><img src="img/UI Assets/count2.svg"
style="vertical-align:middle"> Squiggy's Identity Crisis!</a>
<a href="story3.html"> <img src="img/UI Assets/count3.svg"
style="vertical-align:middle"> Something's NOT Registering!</a>
<a href="story4.html"> <img src="img/UI Assets/count4.svg"
style="vertical-align:middle"> Data Detangle</a>
<hr>
<a href="https://humanatlas.io/" target="_blank"><img src="img/UI Assets/nav_logo.svg"
style="vertical-align:middle"> Human Reference Atlas</a>
<a href="https://apps.humanatlas.io/" target="_blank"><img src="img/UI Assets/nav_apps.svg"
style="vertical-align:middle"> App Library</a>
</div>
</div>
</section>
<!-- section header/intro -->
<section class="intro" id="intro">
<header class="containertop introSection"
style="height:50vh;min-height: 250px;padding: 0;margin: 0;width: 100%;overflow: hidden;top:20px; max-height: 400px; margin:auto;">
<video id="vid" width="100%" height="51vh" muted autoplay loop video autobuffer>
<source src="img/bg-3.webm" type="video/webm">
<source src="img/3-bg.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="max-width: 650px;padding-left: 30px;padding-right: 30px; margin: auto;">
<h1 class="headerOne">What is a</h1>
<p class="headerLarge">Human Reference Atlas?</p>
<h1 class="headerOne">... and why do we really, <i>really</i> need one?</h1>
</div>
</header>
</section>
<section class="section1">
<div class="section1-text">
<!-- <span class="storyimagetext">
<img src="img/image1.gif" class="storyimg"> -->
<h3 class="IndexTitle">An Introduction</h3>
<p>There are <b>37 trillion cells</b> in the human body, each with its own set of distinct characteristics
and
functions. But until recently, scientists had no good way of honing in on single cells to analyze their
individual traits.</p>
<p>Over the past ten years, however, a boom of scientific and research technology has led to many advances
in the realm of single-cell analysis. We can now see single cells and their environment with
unprecedented detail, and we are learning more each day about how individual cells behave and function
over time. Such research promises to lead to major advances in health care. </p>
<p>Single-cell analysis can reveal information about: </p>
<!-- </span> -->
</div>
<div class="section2-text img-three" style="padding-left: 30px;padding-right: 30px;">
<div class="img-above-text cell1">
<img src="img/image1.gif">
<div class="scroll-caption ">
<p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-1-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM9.283 4.002H7.971L6.072 5.385v1.271l1.834-1.318h.065V12h1.312V4.002Z" />
</svg> The mechanics of infection and the progress of
disease</p>
</div>
</div>
<div class="img-above-text cell2">
<img src="img/image2.gif">
<div class="scroll-caption">
<p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-2-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM6.646 6.24c0-.691.493-1.306 1.336-1.306.756 0 1.313.492 1.313 1.236 0 .697-.469 1.23-.902 1.705l-2.971 3.293V12h5.344v-1.107H7.268v-.077l1.974-2.22.096-.107c.688-.763 1.287-1.428 1.287-2.43 0-1.266-1.031-2.215-2.613-2.215-1.758 0-2.637 1.19-2.637 2.402v.065h1.271v-.07Z" />
</svg> The regeneration of tissue</p>
</div>
</div>
<div class="img-above-text cell3">
<img src="img/image3.gif">
<div class="scroll-caption">
<p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-3-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.082.414c.92 0 1.535.54 1.541 1.318.012.791-.615 1.36-1.588 1.354-.861-.006-1.482-.469-1.54-1.066H5.104c.047 1.177 1.05 2.144 2.754 2.144 1.653 0 2.954-.937 2.93-2.396-.023-1.278-1.031-1.846-1.734-1.916v-.07c.597-.1 1.505-.739 1.482-1.876-.03-1.177-1.043-2.074-2.637-2.062-1.675.006-2.59.984-2.625 2.12h1.248c.036-.556.557-1.054 1.348-1.054.785 0 1.348.486 1.348 1.195.006.715-.563 1.237-1.342 1.237h-.838v1.072h.879Z" />
</svg> ... And the changes our bodies experience as we age.</p>
</div>
</div>
</div>
</section>
<section class="section2">
<div class="section1-text">
<h3 class="IndexTitle">The Problem We Want to Solve</h3>
<p>Suppose <b>Researcher A</b> and <b>Researcher B</b> come across
the same cell type in their own individual studies.</p>
<div class="togetherdiv">
<video loop="true" class="togetherimg" autoplay="autoplay"
style="margin-left:0;margin-right: 15px; width: 350px; " muted>
<source src="img/image4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div>
<p>Because there exists no agreed-upon system of cell type identification and naming, it's possible
that each researcher could give a different name to the very same thing.</p>
<p>This makes it extremely difficult to perform comparisons across studies since each researcher is
speaking a different language.</p>
</div>
</div>
<p class="notop">Without the ability to compare experimental data, scientists will be unable to establish a
shared knowledge bank upon which future studies can build.</p>
</div>
</section>
<section class="section1">
<div class="section1-text">
<h3 class="IndexTitle">How the HRA Can Help</h3>
<p>Like other atlases, the HRA is a collection of maps that captures the human body's three-dimensional
reality at differing scales: from the whole body on down to the level of organs, tissues, cell types,
and biomarkers.
</p>
<div class="panel one scrollsection" style=" overflow-x:hidden; overflow-y: hidden;">
<img src="img/story1-meso.png" class="horizontalimg" style="height: 320px;">
</div>
<p>Throughout the atlas, a shared terminology and unifying spatial coordinate system is employed to ensure
that anatomical structures and cell types are consistently named and aligned from map to map.</p>
<div class="togetherdiv">
<p class="notop">Importantly, for future research, the HRA provides a <b>community-created, unified
reference framework</b>
that
allows data from different sources to be managed, compared, and efficiently utilized. The HRA's
anatomical structures, cell types, and biomarkers (ASCT+B) tables act as a kind of Rosetta Stone
across
existing anatomical naming systems.
</p>
<video loop="true" class="togetherimg" autoplay="autoplay" muted width="310px" style="width:310px">
<source src="img/story1-vid2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<p>This allows researchers both to harmonize data from existing studies and to register new data using a
shared, expert-approved consensus nomenclature. Likewise, the HRA's 3D anatomical reference objects
allow researchers to spatially register new data and explore the relative locations of different cell
types throughout the body.</p>
</div>
</section>
<section class="section2">
<div class="section1-text">
<h3 class="IndexTitle">Putting It All Together</h3>
<p>The final HRA atlas will encompass the three-dimensional (3D) organization of whole organs and thousands
of anatomical structures, the interdependencies between trillions of cells, and the biomarkers that
characterize and distinguish cell types. </p>
<p>It will make the human body computable, supporting spatial and semantic queries run over 3D structures
linked to their scientific terminology and existing ontologies. It will establish a benchmark reference
that helps us to understand how the healthy human body works and what changes during aging or disease.
</p>
</div>
<!-- <img src="img/training-outreach.gif" >
-->
</section>
<section class="section1">
<div class="section1-text">
<b>Ready to learn more about the Human Reference Atlas?</b> <a href="https://humanatlas.io/" target="_blank"class="linkbutton">Visit the website <img
src="img/UI Assets/arrow.svg" style="vertical-align:middle">
</a>
</div>
</section>
<!-- BotNav -->
<section class="botNav">
<a href="index.html" class="previous storylink"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-arrow-left" viewBox="0 -3 16 16">
<path fill-rule="evenodd"
d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
</svg> Go to Home</a>
<a href="story2.html" class="next">Story 2: <span class="nextTitle">Squiggy's Identity Crisis! </span><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right"
viewBox="0 -3 16 16">
<path fill-rule="evenodd"
d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
</svg></a>
</section>
<div class="hrafooter">
<div class="leftsidefooter">
<img src="img/UI Assets/logo.svg" height="102px" width="246px">
<div class="footercopyright">
<a href="https://humanatlas.io/" target="_blank"><img src="img/UI Assets/copyrightsymbol.svg"></a>
2024 CNS at Indiana University
</div>
</div>
<div class="rightsidefooter">
<div class="centeritems">
<div class="footerlogocenter">
<div class="footerlogos">
<a href="https://twitter.com/cnscenter" target="_blank"><img
src="img/UI Assets/social media.svg"></a>
<a href="https://www.facebook.com/cnscenter/" target="_blank"><img
src="img/UI Assets/social media-1.svg"></a>
<a href="https://www.instagram.com/cns_at_iu/" target="_blank"><img
src="img/UI Assets/social media-2.svg"></a>
<a href="https://www.youtube.com/@CNSCenter/" target="_blank"><img
src="img/UI Assets/social media-3.svg"></a>
<a href="https://www.linkedin.com/company/cns-indiana-university-bloomington"
target="_blank"><img src="img/UI Assets/social media-4.svg"></a>
<a href="https://twitter.com/cnscenter" target="_blank"><img
src="img/UI Assets/social media-5.svg"></a>
</div>
<div class="footerfounders">
<p>Funded By:</p>
<div class="founderlogos">
<a href="https://www.nih.gov/" target="_blank"><img
src="img/UI Assets/icon_ funder.svg"></a>
<a href="https://cifar.ca/" target="_blank"><img src="img/UI Assets/icon_ funder-1.svg"></a>
<a href="https://www.iu.edu/index.html" target="_blank"><img
src="img/UI Assets/icon_ funder-2.svg"></a>
</div>
</div>
</div>
<div class="medicaldisclaimer">Medical Disclaimer: This resource is intended for research purposes only.
It
should not be used for
emergencies or medical or professional advice. </div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
<script src="scripts.js"></script>
<!--It helps to handle how the 3D Object would be displayed -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<script>
// You can use a ScrollTrigger in a tween or timeline
//horizontal
let mm = gsap.matchMedia();
mm.add("(min-width: 700px)", () => {
gsap.timeline({
scrollTrigger: {
duration: 4,
autoAlpha: 1,
duration: 1,
trigger: ".horizontalimg",
start: "center 400px",
end: "center 0",
scrub: true,
pin: false,
invalidateOnRefresh: true
}
})
.to(".horizontalimg", {
x: "-200px",
scrub: 0.20,
})
let mm = gsap.matchMedia();
});
mm.add("(max-width: 699px) and (min-width:400px)", () => {
gsap.timeline({
scrollTrigger: {
duration: 4,
autoAlpha: 1,
duration: 1,
trigger: ".horizontalimg",
start: "center 400px",
end: "center 0px",
scrub: true,
pin: false,
invalidateOnRefresh: true
}
})
.to(".horizontalimg", {
x: "-60%",
scrub: 0.20,
})
let mm = gsap.matchMedia();
});
mm.add("(max-width: 399px)", () => {
gsap.timeline({
scrollTrigger: {
duration: 3,
autoAlpha: 1,
duration: 1,
trigger: ".horizontalimg",
start: "center 500px",
end: "center 0px",
scrub: true,
pin: false,
invalidateOnRefresh: true
}
})
.to(".horizontalimg", {
x: "-60%",
scrub: 0.20,
})
let mm = gsap.matchMedia();
});
gsap.timeline({
scrollTrigger: {
autoAlpha: 1,
duration: 2,
trigger: ".cell1",
start: "center 700px",
end: "top 0px",
scrub: true,
pin: false,
}
})
.from(".cell1", {
opacity: 0,
})
.from(".cell2", {
opacity: 0
})
.from(".cell3", {
opacity: 0
})
</script>
</html>