-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
458 lines (415 loc) · 23.9 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
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Stem Cell Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/component.css">
<script src="http://cdn.jsdelivr.net/vivus/0.1.2/vivus.min.js"></script>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="page-content">
<div id="slides-container">
<div id="slides"
data-0="transform:translate(0%,0%);"
data-500p=""
data-600p="transform:translate(0%,-50%);"
data-650p=""
data-800p="transform:translate(-50%,-50%);"
data-900p=""
data-1050p="transform:translate(-100%,-50%);"
data-1150p=""
data-1350p="transform:translate(-150%,-50%);"
data-1450p=""
data-1550p="transform:translate(-150%,-100%);"
data-1750p=""
data-1850p="transform:translate(-100%,-100%);"
data-2050p=""
data-2250p="transform:translate(-50%,-100%);"
data-2350p=""
data-2550p="transform:translate(0%,-100%);"
data-2650p=""
data-2850p="transform:translate(0%,-150%);"
data-2950p=""
data-3150p="transform:translate(-50%,-150%);"
data-3250p=""
data-3450p="transform:translate(-100%,-150%);"
data-3550p=""
data-3750p="transform:translate(-150%,-150%);"
data-3850p=""
data-4050p="transform:translate(-150%,-200%);"
data-4150p=""
data-4350p="transform:translate(-100%,-200%);"
data-4450p=""
data-4650p="transform:translate(-50%,-200%);"
data-4750p=""
data-4950p="transform:translate(-50%,-250%);"
data-5050p=""
data-5250p="transform:translate(-50%,-300%);"
data-5350p=""
data-5550p="transform:translate(-50%,-350%);"
data-5650p=""
data-5850p="transform:translate(-50%,-400%);"
data-5950p=""
data-6150p="transform:translate(-50%,-450%);">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Year</h3>
<div>
<p>Info about this event</p>
<button class="md-close">Close</button>
</div>
</div>
</div>
<div class="md-overlay"></div>
<div data-0="background-color:rgb(0,0,0)"data-40="background-color:rgb(156,236,233)" id="timeline" class="slide">
<div data-20="opacity:1" data-40="opacity:0" class="pre-title">
<h1>Start Scrolling</h1>
</div>
<div data-0p="opacity:0" data-30p="opacity:1" class="timeline-title">
<h1>Stem Cell Timeline</h1>
</div>
<div data-0p="opacity:0; padding-top:100%" data-20p="opacity: 0" data-50p="padding-top: 0px; opacity:1" id="vert-line-contain">
<div id="vert-line"></div>
</div>
<div data-10p="right:-100%" data-50p="right:1%" data-modal="modal-1" class="timeline-event md-trigger"
data-year="1868" data-text='The term "stem cell" first appears in scientific literature. German biologist Ernst Haeckel used the phrase to describe the fertilized egg that becomes an organism, and the single-celled organism that acted as the ancestor cell to all living things in history.'>
<strong>1868:</strong> The term "stem cell" first appears in scientific literature.
</div>
<div data-40p="left:-100%" data-80p="left: 1%" data-modal="modal-1" style="top: 90px" class="timeline-event md-trigger"
data-year="1909" data-text='Russian academic Alexander Maximow lectures at the Berlin Hematological Society on a theory that all blood cells come from the same ancestor cell. This introduces the idea of blood stem cells that are multi-potent, or have the ability to differentiate into several types of cells.'>
<strong>1909:</strong> Alexander Maximow theorizes that all blood cells come from the same ancestor cell.
</div>
<div data-70p="right:-100%" data-110p="right: 1%" style="top: 140px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="1953" data-text='Leroy Stevens, a Maine scientist performing cancer research in mice, finds large tumors in their scrotums. These tumors, known as teratomas, contained mixtures of differentiated and undifferentiated cells, including hair, bone, intestinal and blood tissue. Researchers eventually concluded that the cells were pluripotent, meaning they can differentiate into any cell found in a fully grown animal.'>
<strong>1953:</strong> Leroy Stevens finds large tumors in their scrotums.
</div>
<div data-100p="left:-100%" data-140p="left: 1%" style="top: 180px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="1963" data-text='Canadian scientists Ernest McCulloch and James Till perform experiments on the bone marrow of mice and observe that different blood cells come from a special class of cells. This is one of the first pieces of evidence of blood stem cells.'>
<strong>1963:</strong> Ernest McCulloch and James Till perform experiments on the bone marrow of mice
</div>
<div data-130p="right:-100%" data-170p="right: 1%" style="top: 220px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="1968" data-text='Robert A. Good of the University of Minnesota performs the first successful bone marrow transplant on a young patient suffering from an immune deficiency disorder that killed others in his family. The boy received bone marrow from his sister, and he grew into a healthy adult.'>
<strong>1968:</strong> Robert A. Good performs the first successful bone marrow transplant
</div>
<div data-160p="left:-100%" data-200p="left: 1%" style="top: 300px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="1986" data-text='Scientists take connective tissue cells and turn them into muscle cells.'>
<strong>1986:</strong> Scientists take connective tissue cells and turn them into muscle cells
</div>
<div data-190p="right:-100%" data-230p="right: 1%" style="top: 360px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="1997" data-text='Dominique Bonnet and John Dick discover that leukemia comes from the same stem cells that make our blood cells. This is one of the first major studies to say that cancer grows out of stem cells gone off course, supporting the concept of "cancer stem cells."'>
<strong>1997:</strong> Dominique Bonnet and John Dick discover that leukemia comes from the same stem cells that make our blood cells
</div>
<div data-220p="left:-100%" data-260p="left: 1%" style="top: 400px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="1998" data-text='A team at the University of Wisconsin, Madison, led by James Thomson and Jeffrey Jones, reports the creation of the first batch of human embryonic stem cells, which they derived from early embryos. After finding the cells were pluripotent, the team sees the potential the cells have for drug discovery and transplantation medicine.'>
<strong>1998:</strong> A team at the University of Wisconsin reports the creation of the first batch of human embryonic stem cells
</div>
<div data-250p="right:-100%" data-290p="right: 1%" style="top: 440px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="2001" data-text='President George W. Bush signs an order authorizing the use of federal funds for research on a limited number of existing human embryonic stem cell lines.'>
<strong>2001:</strong> President George W. Bush signs an order authorizing the use of federal funds for research on a limited number of existing human embryonic stem cell lines
</div>
<div data-280p="left:-100%" data-320p="left: 1%" style="top: 480px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="2006" data-text='Japanese scientists Shinya Yamanaka and Kazutoshi Takahashi announce the creation of rodent induced pluripotent cells (iPS cells), adult cells reprogrammed to look and function like embryonic stem cells. iPS cells become another valuable resource for stem cell research.'>
<strong>2006:</strong> Shinya Yamanaka and Kazutoshi Takahashi announce the creation of rodent induced pluripotent cells
</div>
<div data-310p="right:-100%" data-350p="right: 1%" style="top: 550px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="2009" data-text='President Barack Obama signs Executive Order 13505 to repeal some of the restrictions on human embryonic stem cell research funds placed by the previous administration. The order requires the National Institutes of Health to draft new guidelines for federal funding policies within 120 days.'>
<strong>2009:</strong> President Barack Obama signs Executive Order 13505 to repeal some of the restrictions on human embryonic stem cell research funds
</div>
<div data-340p="left:-100%" data-380p="left: 1%" style="top: 560px" data-modal="modal-1" class="timeline-event md-trigger"
data-year="2009" data-text='The NIH issues the revised guidelines on federal funding for stem cell research. Included are strict provisions for informed donor consent and the ethical procurement of leftover embryos from in vitro fertilization.'>
<strong>2009:</strong> The NIH issues the revised guidelines on federal funding for stem cell research
</div>
</div>
<div id="slide-2" class="slide">
<div class="caption"
data-600p="opacity: 1; transform:translate(0px,0px);"
data-850p=""
data-950p="opacity: 0; transform:translate(-100px,0px);"
data-anchor-target="#helper">
<h1>Totipotent</h1>
</div>
</div>
<div id="slide-2-detail1" class="slide detail-slide">
<div class="caption"
data-150p="opacity: 0; transform:translate(300px,0px);"
data-200p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>The 1st totipotent cell forms when the sperm and egg unite.</h2>
<div class="detail-body" id="toti-1" class="detail-img">
<img src="img/Totipotent1.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-2-detail2" class="slide detail-slide">
<div class="caption"
data-400p="opacity: 0; transform:translate(300px,0px);"
data-450p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>They continue being formed until the 4th day.</h2>
<div class="detail-body" id="toti-2" class="detail-img">
<img src="img/Totipotent2.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-2-detail3" class="slide detail-slide">
<div class="caption"
data-700p="opacity: 0; transform:translate(300px,0px);"
data-750p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>Then no more totipotent cells are made, but there are three other potencies!</h2>
<div class="detail-body" id="toti-3" class="detail-img">
<img src="img/Totipotent3.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-3" class="slide">
<div class="caption">
<h1>Pluripotent</h1>
</div>
</div>
<div id="slide-3-detail1" class="slide detail-slide">
<div class="caption"
data-1300p="opacity: 0; transform:translate(-300px,0px);"
data-1350p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>Embryonic cells are an example of pluripotent cells.</h2>
<div class="detail-body" id="pluri-1" class="detail-img">
<img src="img/Pluripotent2.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-3-detail2" class="slide detail-slide">
<div class="caption"
data-1600p="opacity: 0; transform:translate(-300px,0px);"
data-1650p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>They can become any type of cell, other than totipotent cells.</h2>
<div class="detail-body" id="pluri-2" class="detail-img">
<img src="img/Pluripotent2.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-3-detail3" class="slide detail-slide">
<div class="caption"
data-1900p="opacity: 0; transform:translate(-300px,0px);"
data-1950p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>For example, they can become hair cells, or blood cells, or skin cells, or brain cells!</h2>
<div class="detail-body" id="pluri-3" class="detail-img">
<img src="img/Pluripotent3.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-4" class="slide">
<div class="caption">
<h1>Multipotent</h1>
</div>
</div>
<div id="slide-4-detail1" class="slide detail-slide">
<div class="caption"
data-2500p="opacity: 0; transform:translate(300px,0px);"
data-2550p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>Multipotent cells are similar to pluripotent stem cells.</h2>
<div class="detail-body" id="multi-1" class="detail-img">
<img src="img/Multipotent1.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-4-detail2" class="slide detail-slide">
<div class="caption"
data-2800p="opacity: 0; transform:translate(300px,0px);"
data-2850p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>However, each multipotent cell cannot turn into all other cells.</h2>
<div class="detail-body" id="multi-2" class="detail-img">
<img src="img/Multipotent2.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-4-detail3" class="slide detail-slide">
<div class="caption"
data-3100p="opacity: 0; transform:translate(300px,0px);"
data-3150p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>They can only turn into a select number of other cell types.</h2>
<div class="detail-body" id="multi-3" class="detail-img">
<img src="img/Multipotent2.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-5" class="slide">
<div class="caption">
<h1>Unipotent</h1>
</div>
</div>
<div id="slide-5-detail1" class="slide detail-slide">
<div class="caption"
data-3400p="opacity: 0; transform:translate(300px,0px);"
data-3450p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>Unipotent stem cells can only turn into one type of cell.</h2>
<div class="detail-body" id="uni-1" class="detail-img">
<img src="img/Unipotent1.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-5-detail2" class="slide detail-slide">
<div class="caption"
data-3700p="opacity: 0; transform:translate(300px,0px);"
data-3750p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>Examples of unipotent cells are skin cells!</h2>
<div class="detail-body" id="uni-2" class="detail-img">
<img src="img/Unipotent1.png" />
</div>
</div>
<div class="border-bot">
</div>
</div>
<div id="slide-6-detail1" class="slide detail-slide">
<div class="caption"
data-4000p="opacity: 0; transform:translate(300px,0px);"
data-4050p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<h2>Types of Stem Cells</h2>
<div class="detail-body" id="multi-3" class="detail-img">
<div class="type-img">
<img src="img/types_pink.png" />
Embryonic
</div>
<div class="type-img">
<img src="img/types_blue.png" />
Adult
</div>
<div class="type-img">
<img src="img/types_green.png" />
Induced Pluripotent
</div>
</div>
</div>
</div>
<div id="slide-6-detail2" class="slide detail-slide type-slide">
<div class="caption"
data-4000p="opacity: 0; transform:translate(300px,0px);"
data-4050p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<div class="detail-body" id="multi-3" class="detail-img">
<div class="type-img">
<img src="img/types_pink.png" />
</div>
<div class="type-details">
<h2>Embryonic</h2>
<p>Embryonic stem cells are taken from the blastocyst, which occurs in an early developmental stage in embryonic development.</p>
<p>Embryonic stem cells are not currently in use in any way.</p>
<p>Their potential uses include:
<ol>
<li>Organ generation</li>
<li>Safe testing of drugs</li>
</ol></p>
</div>
</div>
</div>
</div>
<div id="slide-6-detail3" class="slide detail-slide type-slide">
<div class="caption"
data-4000p="opacity: 0; transform:translate(300px,0px);"
data-4050p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<div class="detail-body" id="multi-3" class="detail-img">
<div class="type-details">
<h2>Adult</h2>
<p>Adult stem cells can be found in many places including bone marrow, the brain, blood, and the intestine.</p>
<p>An example of their use:
<ol>
<li>Bone marrow transplantations!</li>
<li>Growing skin for burn victims to help them recover and heal.</li>
<li>A potential use is organ generation.</li>
</ol>
</p>
<p>Adult stem cells are naturally unipotent, but can be induced to become pluripotent.</p>
</div>
<div class="type-img">
<img src="img/types_blue.png" />
</div>
</div>
</div>
</div>
<div id="slide-6-detail4" class="slide detail-slide type-slide">
<div class="caption"
data-4000p="opacity: 0; transform:translate(300px,0px);"
data-4050p="opacity: 1; transform:translate(0px,0px);"
data-anchor-target="#helper">
<div class="detail-body" id="multi-3" class="detail-img">
<div class="type-img">
<img src="img/types_green.png" />
</div>
<div class="type-details">
<h2>Induced Pluripotent</h2>
<p>These are unipotent cells that are manipulated to become pluripotent. </p>
<p>Their potential uses are the same as that of embryonic stem cells. </p>
<p>(Maybe enter same graphic as was used in embryonic stem cells?)</p>
</div>
</div>
</div>
</div>
<div id="slide-7" class="slide">
<div class="caption">
<h1>Made by</h1>
<div class="signatures">
<svg id="brian-signature" width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<path d="m103,151c2,-1 10.81389,-5.49487 29,-7c17.93867,-1.48465 35.84151,-1.10901 43,7c7.39919,8.38165 7.40637,25.5564 -2,32c-17.22638,11.80051 -32.03809,7.67319 -42,9c-6.02952,0.80305 -7.91831,0.19574 -4,1c14.92049,3.06255 31.28465,14.47386 38,27c6.42656,11.98746 6.39836,28.1964 -2,32c-12.88251,5.83447 -29,2 -36,2l-5,-3l-5,-3l-2,-2" id="svg_1" stroke-width="5" stroke="#000000" fill="none"/>
<path d="m149,123c0,1 2.54594,16.78992 6,48c3.63664,32.85992 2,62 2,79c0,13 0.56453,17.95914 -4,20c-4.65492,2.08127 -12,3 -21,8l-5,3" id="svg_2" stroke-width="5" stroke="#000000" fill="none"/>
<path d="m163,252c1,-1 6.54147,-4.57002 12,-12c5.58548,-7.60278 7.97252,-12.64749 9,-17c0.4595,-1.9465 0,-1 0,3c0,7 -2.2961,14.45673 0,20c1.62358,3.91969 10.18143,7.33467 15,6c5.61937,-1.55647 7.297,-8.61383 10,-11c1.67633,-1.47984 2.79486,-0.88351 4,1c3.45099,5.39359 9.95782,11.88052 16,14c5.66177,1.98602 10.02432,0.49271 15,0c5.07422,-0.50244 11.44925,-9.83601 16,-23c4.44394,-12.85501 7.49963,-30.97121 8,-44c0.26865,-6.99484 -0.87857,-11.49345 -4,-12c-1.97418,-0.32036 -5.49902,2.95332 -6,11c-0.6835,10.97874 0.48157,22.35463 13,26c17.28217,5.03258 38.44293,-18.34143 47,-39c8.47107,-20.45094 17.60767,-38.61699 11,-51c-3.79553,-7.11295 -32.89642,6.26843 -51,28c-22.54785,27.06648 -33.11328,59.31516 -29,86c3.03543,19.69229 16.3793,31.50653 35,30c14.27118,-1.15463 19.38055,-16.76305 23,-23c3.36703,-5.80199 4,-8 5,-8c1,0 5.77933,2.94527 21,6c21.7695,4.36906 51,5 72,7l22,2l10,1l6,1" id="svg_3" stroke-width="5" stroke="#000000" fill="none"/>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="helper">
<div class="marker red"></div>
<div class="marker green"></div>
<div class="marker blue"></div>
<div class="marker yellow"></div>
</div>
</div>
<script src="js/skrollr.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>
<script type="text/javascript">
var s = skrollr.init({smoothScroll:true});
new Vivus('brian-signature', {type: 'oneByOne', duration: 75});
</script>
</body>
</html>