diff --git a/DevStory2.html b/DevStory2.html index 5a33cb7..1e711ce 100644 --- a/DevStory2.html +++ b/DevStory2.html @@ -1145,7 +1145,7 @@

What Is Squiggy's Cell Type?

bubble, { autoAlpha: 0 }, - 0.5 + 1.8 ); }); diff --git a/DevStory3.html b/DevStory3.html index b571254..8bec864 100644 --- a/DevStory3.html +++ b/DevStory3.html @@ -121,21 +121,176 @@

Something's NOT Registering!

-
CeCe: Oh, I really hate seeing this! +
CeCe: Oh, I really hate seeing this!
-
Squiggy: What is it, Ce Ce? +
Squiggy: What is it, Ce Ce?
-
CeCe: It's a kidney tissue sample, Squig, separated from its home organ and all alone. +
CeCe: It's a kidney tissue sample, Squig, separated from its home organ and all alone.
-
+
+
+
Squiggy: Ah, that's no big deal. We can just pick this little guy up, and the next kidney we come across, we can just stick him in somewhere! +
+
+
+
CeCe: No way, Squig!! Don't you know that when you're trying to identify a tissue sample, it's all about location, location, location! +
+
+
+
Squiggy: What do you mean? Just look at that kidney! It looks the same all over. Just a big brown blob. +
+
+ +
+
+ +
+ +
+
CeCe: Well, Squig, that "big brown blob" contains a great deal of variation. +
+
+
+
CeCe: Right kidneys are different from left kidneys, men's kidneys are different from women's kidneys, and don't get me started on how kidneys can vary in shape, size, and location from person to person. +
+
+
+
CeCe: And while two anatomical structures may be only millimeters apart, they may be very different in their functions, structures, and cellular makeup. +
+
+ +
+
+ +
+
+
Squiggy: In other words, location matters! +
+
+
+
Cece: That's what I've been trying to tell you. And that's why it's important that all tissue samples get registered-not only by name, but also by location. +
+
+
+
Squiggy: Well, that sounds impossible. I'm going back to bed. +
+
+
+
Cece: It's not hard at all, Squiggy. Researchers can register their tissue sample data with the Registration User Interface tool in the Human Reference Atlas. +
+
+
+
Cece: It takes only about 5 minutes to learn how to do it and an average of 2 minutes to register a tissue block. +
+
+ +
+
+ +
+
+
Cece: All researchers need to do is select the correct organ. +
+
+
+
Cece: Then they just adjust the 3D size, location, and rotation of the tissue block. +
+
+
+
Cece: Now this is the fun part. I'm going to need your help, Squiggy! +
+
+
+
Cece: We just need to move this tissue block so that it's in the same place on this model as it was on the actual organ. +
+
+ +
+
+ +
+
+
Squiggy: Look at us, Ce Ce, we're registering tissue! +
+
+
+
Cece: Now this is kind of cool. Watch as we move into the space of the 3D model, we'll see an example of what's known as "collision detection." +
+
+
+
Squiggy: Collision!! Ahhh!!! Ce Ce, I knew your crazy adventures would be the end of me! Oh, goodbye cruel world! +
+
+
+
Squiggy: Oh. Well, that was not very dramatic. +
+
+
+
Cece: Nope, Squiggy. You supplied ALL the drama we needed. +
+
+
+
Cece: You see, what our block is "colliding" with are anatomical structures. The RUI is just letting us know what our tissue sample is bumping up against as we move it through the organ. This helps for both placement and identification. +
+
+ +
+
+ +
+
+
Squiggy: Well, I see what's been registered already, but it looks like more information is needed. +
+
+
+
Cece: That's right, Squig. The Human Reference Atlas is always looking for more data. +
+
+
+
Cece: The more tissue that's registered, and the more other researchers can benefit from your correctly identified data, the more complete our picture of the human body becomes. And that's a very good thing for understanding our body in health and disease! +
+
+ +
+
+ +
+
+
Cece: So click on this link to the Registration User Interface and register your tissue data today! +
+
+
+
Squiggy: And don't forget to spay and neuter your pets! +
+
+
+
Cece: Wrong public service announcement, Squiggy. +
+
+
+
Squiggy: But it's still a good idea. +
+
+
+
Cece: Yeah, I suppose. +
+
+ +
+
@@ -264,7 +419,7 @@

Something's NOT Registering!

trigger: ".scene3-1", anticipatePin: 1, start: "top top", - end: "+=500%", + end: "+=400%", pin: true, pinSpacing: false }); @@ -277,6 +432,62 @@

Something's NOT Registering!

pin: true, pinSpacing: false }); + ScrollTrigger.create({ + trigger: ".scene3-3", + anticipatePin: 1, + start: "top top", + end: "+=400%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene3-4", + anticipatePin: 1, + start: "top top", + end: "+=400%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene3-5", + anticipatePin: 1, + start: "top top", + end: "+=600%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene3-6", + anticipatePin: 1, + start: "top top", + end: "+=500%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene3-7", + anticipatePin: 1, + start: "top top", + end: "+=700%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene3-8", + anticipatePin: 1, + start: "top top", + end: "+=400%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene3-9", + anticipatePin: 1, + start: "top top", + end: "+=600%", + pin: true, + pinSpacing: false + }); //fade in txt const scrollbubbles = gsap.utils.toArray(".scrollbubble"); @@ -369,7 +580,7 @@

Something's NOT Registering!

bubble, { autoAlpha: 0 }, - 0.5 + 1.8 ); }); @@ -404,6 +615,7 @@

Something's NOT Registering!

opacity: 0, }) + diff --git a/img/3-10.svg b/img/3-10.svg new file mode 100644 index 0000000..f434f57 --- /dev/null +++ b/img/3-10.svg @@ -0,0 +1,139 @@ + + + + Group 36 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/3-6.svg b/img/3-6.svg new file mode 100644 index 0000000..393439c --- /dev/null +++ b/img/3-6.svg @@ -0,0 +1,85 @@ + + + + Group 28 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/3-7.svg b/img/3-7.svg new file mode 100644 index 0000000..4dfdcc4 --- /dev/null +++ b/img/3-7.svg @@ -0,0 +1,41 @@ + + + + Group 28 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/3-8.svg b/img/3-8.svg new file mode 100644 index 0000000..bdb41a6 --- /dev/null +++ b/img/3-8.svg @@ -0,0 +1,145 @@ + + + + Group 35 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/3-9.svg b/img/3-9.svg new file mode 100644 index 0000000..56c8eae --- /dev/null +++ b/img/3-9.svg @@ -0,0 +1,119 @@ + + + + Group 34 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 66bbb33..93f6d7b 100644 --- a/style.css +++ b/style.css @@ -1299,6 +1299,32 @@ h1 { border-color: rgb(243, 167, 167) transparent transparent transparent; } +.cecetalk3 { + padding: 12px; + color: black !important; + max-width: 400px; + width: 80%; + background-color: rgb(243, 167, 167); + box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px; + border-radius: 22px; + margin: auto; + position: relative; + margin-top: 30px; + margin-bottom: 30px; + top: 30%; +} + +.cecetalk3:after { + content: ""; + position: absolute; + top: 50%; + right: 100%; + margin-top: -5px; + border-width: 15px; + border-style: solid; + border-color: transparent rgb(243, 167, 167) transparent transparent; +} + .spritecontainer { overflow: hidden; @@ -1437,6 +1463,95 @@ h1 { min-width: 100%; } +#two .scene3-3 { + background-image: url("img/3-6.svg"); + background-color: black; + height: 100vh; + overflow: hidden; + margin: 0; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + +#two .scene3-4 { + background-image: url("img/3-7.svg"); + background-color: black; + height: 100vh; + overflow: hidden; + margin: 0; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} +#two .scene3-5 { + background-image: url("img/3-4.svg"); + background-color: black; + height: 100vh; + overflow: hidden; + margin: 0; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + +#two .scene3-6 { + background-image: url("img/3-8.svg"); + background-color: black; + height: 100vh; + overflow: hidden; + margin: 0; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + +#two .scene3-7 { + background-image: url("img/3-9.svg"); + background-color: black; + height: 100vh; + overflow: hidden; + margin: 0; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} +#two .scene3-8 { + background-image: url("img/3-10.svg"); + background-color: black; + height: 100vh; + overflow: hidden; + margin: 0; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + +#two .scene3-9 { + background-color: black; + height: 100vh; + overflow: hidden; + margin: 0; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + + .imageintrosec { position: relative; height: 100vh;