-
Notifications
You must be signed in to change notification settings - Fork 0
/
VisualizingCells.html
257 lines (225 loc) · 9.95 KB
/
VisualizingCells.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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3: Learn about Visualizing Cells in the Human Body</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="img/logo.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="three">
<!-- section counter -->
<div id="sectionCounterdiv">
<p id="sectionCounter"></p>
</div>
<!-- section top -->
<section class="top">
<a href=" https://humanatlas.io" class="topLogo">
<img class="logo" src="img/logo.svg"> Human Atlas Stories
</a>
<div class="dropdown">
<button class="dropbtn"><svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="#C2CAE5"
class="bi bi-list" viewBox="-1 -4 20 20">
<path fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
</svg>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href=" https://hubmapconsortium.github.io/hra-previews/pilots/pilot4.html">Scrollytelling Series</a>
<a href="story1.html">What is a Human Reference Atlas?</a>
<!-- <a href="story2.html">2. Get to Know Your Anatomical Structures!</a>
<a href="story3.html">3. Learn about Visualizing Cells in the Human Body</a> -->
</div>
</div>
</section>
<!-- section header/intro -->
<section class="intro" id="intro">
<header class="containertop introSection" style="height:40vh;min-height: 250px;max-height: 400px;">
<video id="vid" width="100%" height="40vh" muted autoplay loop video autobuffer style="height:40vh;max-height: 400px; top:50% !important; left: 50%;">
<source src="img/3-bg2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="max-width: 500px; margin:auto;">
<h1 class="headerOne">Learn about ...</h1>
<p class="headerLarge">Visualizing Cells in the Human Body</p>
</div>
</header>
</section>
<section class="section1">
<div class="section2-text">
<p><b>HuBMAP</b> lets us visualize healthy cells in the human body in ways the naked eye can't do on its
own. With a
mountain of data available to us, we can better understand the different roles these cells play in
keeping
everything running smoothly.</p>
<p>Using data expertise we can break down each organ into anatomical structures, functional tissue units
(FTU),
and cell types. The purpose of the three classes is to locate where in the body the cells are by
identifying
the organ, its smallest tissue unit that performs a unique physiologic function multiple times, and the
cell
types within that unit. From these perspectives, we can freely view the healthy human at multiple
scales.
</p>
</div>
</section>
<div class="kidneybody" style="overflow: hidden;">
<img src="img/3-l-1.png" class="three1 bodypart">
<img src="img/3-l-2.png" class="three2 bodypart">
<img src="img/3-l-3.png" class="three3 bodypart">
<img src="img/3-l-4.png" class="three4 bodypart">
</div>
<section class="section2">
<div class="section2-text">
<p>While some parts of the human body can be easily recognized, like the kidneys in the graphic above, many
of us have no idea what the tissues and cells that make up a kidney look like.</p>
<p>The human reference atlas currently
allows us to examine in some detail some of these cells. For instance: the renal corpuscle in the
kidney.</p>
</div>
</section>
<section class="section3">
<h3>The Renal Corpuscle</h3>
<p>In simple terms, the renal corpuscle is located in the kidney and works to filter out toxins through
urine
and reabsorb necessary nutrients back into your body. <p>
<img src="img/3-renal.png">
<!-- point to the renal corpuscle on kidney -->
<p>Within this FTU, there are several cell types
that
depend on each other for it to function. The renal corpuscle is made up of even smaller parts like
podocytes. Which, in turn, contain NPHS1 genes.</p>
</section>
<div class="renal" style="padding-top: 0;overflow: hidden;">
<img src="img/3-r-1.png" class="r1 bodypart">
<img src="img/3-r-2.png" class="r2 bodypart">
<img src="img/3-r-3.png" class="r3 bodypart">
</div>
<section class="section4">
<h3>The Large Intestine</h3>
<p>As it did for the renal corpuscle, HuBMAP also gives us the ability to map the crypt Lieberkuhn Glad in the
large intestine in detail. There are several cell types that work together to allow this FTU to renew the
lining of the intestine and produce mucus.</p>
</section>
<section class="section5">
<div class="threeintestine">
<img src="img/3-intestine.png" class="intestineimg">
<p>What you've just seen is a glimpse into the possibilities HuBMAP can create. Imagine how our
understanding of human cells would accelerate if we did this for the entire body. From the crazy scales
it can go to, to the in-depth analysis of each cell, the human reference atlas can heavily influence the
advancement of human health and prospective research while serving as a convenient reference tool.</p>
<p>On that note, we invite you to check out Andreas Bueckle's VR Organ Gallery that will soon be available
on the app store. The program is designed to be user-friendly in order to observe cells in 3D. </p>
</div>
</section>
<!-- BotNav -->
<!-- <section class="botNav">
<a href="story2.html" class="previous"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="#c2cae5" 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> Story 2: <span class="prevTitle">What Is An HRA?</span></a>
<a href="story2.html" class="next">Story 3: <span class="nextTitle">Get to Know Your Anatomical
Structures!</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>
-->
<footer>
@ 2023 Human Atlas Design System at Indiana University
</footer>
</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
gsap.to(".r1", {
autoAlpha: 1,
duration: .2,
ease: Linear.easeNone,
scrollTrigger: {
trigger: ".r1",
start: "top 650px",
end: "top 200px",
scrub: true,
id: "scrub"
}
});
gsap.to(".r2", {
autoAlpha: 1,
duration: .2,
ease: Linear.easeNone,
scrollTrigger: {
trigger: ".r2",
start: "top 400px",
end: "top 200px",
scrub: true,
id: "scrub"
}
});
gsap.to(".r3", {
autoAlpha: 1,
duration: .2,
ease: Linear.ease,
scrollTrigger: {
trigger: ".r3",
start: "top 290px",
end: "top 200px",
scrub: true,
id: "scrub"
}
});
gsap.to(".r4", {
autoAlpha: 1,
duration: .2,
ease: Linear.ease,
scrollTrigger: {
trigger: ".r4",
start: "top 90px",
end: "top 00px",
scrub: true,
id: "scrub"
}
});
//drop in 1
gsap.timeline({
scrollTrigger: {
autoAlpha: 1,
duration: .6,
trigger: ".kidneybody",
start: "top 300px",
end: "top 0px",
scrub: true,
pin: false,
}
})
.from(".three1", {
opacity: 100,
})
.from(".three2", {
opacity: 0
})
.from(".three3", {
opacity: 0
})
.from(".three4", {
opacity: 0
})
</script>
</html>