-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Put the dev pages to the actual story pages
- Loading branch information
1 parent
2aa2971
commit 3d523bd
Showing
7 changed files
with
2,633 additions
and
2,976 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.