diff --git a/DevStory3.html b/DevStory3.html index aa7b420..a622def 100644 --- a/DevStory3.html +++ b/DevStory3.html @@ -141,7 +141,7 @@

Something's NOT Registering!

-
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! +
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!
@@ -152,7 +152,9 @@

Something's NOT Registering!

-
+
+ +
CeCe: Well, Squig, that "big brown blob" contains a great deal of variation. @@ -176,7 +178,7 @@

Something's NOT Registering!

-
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.
@@ -185,42 +187,41 @@

Something's NOT Registering!

-
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's not hard at all, Squiggy. In fact, there's a tool to make it really easy!
-
-
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: 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: 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: 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: 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. +
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.
@@ -233,7 +234,8 @@

Something's NOT Registering!

-
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." +
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."
@@ -245,30 +247,31 @@

Something's NOT Registering!

-
Cece: Nope, Squiggy. You supplied ALL the drama we needed. +
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. +
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. +
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: 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: 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!
@@ -460,7 +463,15 @@

Something's NOT Registering!

trigger: ".scene3-5", anticipatePin: 1, start: "top top", - end: "+=600%", + end: "+=500%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene3-5-1", + anticipatePin: 1, + start: "top top", + end: "+=300%", pin: true, pinSpacing: false }); @@ -497,14 +508,6 @@

Something's NOT Registering!

pinSpacing: false }); - ScrollTrigger.create({ - trigger: ".videozoom", - start: "top top", - end: "+=600%", - pin: true, - scrub: 1, - pinSpacing: false, - }); //fade in txt const scrollbubbles = gsap.utils.toArray(".scrollbubble"); @@ -614,8 +617,8 @@

Something's NOT Registering!

autoAlpha: 1, scrub: 0.2, trigger: ".imageintrosec", - start: "top", - end: "end", + start: "-=50%", + end: "top", scrub: true, pin: false, } @@ -632,6 +635,45 @@

Something's NOT Registering!

opacity: 0, }) + //drop in 2 + gsap.timeline({ + scrollTrigger: { + autoAlpha: 1, + trigger: ".scene3-8", + start: "top", + end: "+=200%", + scrub: true, + duration: 3, + pin: false, + } + }) + .to("#kidneyorgan", { + opacity: 0, + delay: 1 + }) + + //drop in 3 + gsap.timeline({ + scrollTrigger: { + autoAlpha: 1, + trigger: ".scene3-4", + start: "top", + end: "+=100%", + scrub: true, + duration: 3, + pin: false, + } + }) + .to("#kidneypart1", { + opacity: 1, + delay: 1 + }) + .to("#kidneypart2", { + opacity: 1, + delay: 1 + }) + + diff --git a/img/3-10.svg b/img/3-10.svg index 0d8df90..4305ad9 100644 --- a/img/3-10.svg +++ b/img/3-10.svg @@ -102,10 +102,6 @@ - - - - diff --git a/img/3-11.svg b/img/3-11.svg new file mode 100644 index 0000000..aad03b0 --- /dev/null +++ b/img/3-11.svg @@ -0,0 +1,132 @@ + + + + Group 39 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/3-8.svg b/img/3-8.svg index 722e231..9a95b86 100644 --- a/img/3-8.svg +++ b/img/3-8.svg @@ -101,7 +101,7 @@ - + @@ -121,11 +121,11 @@ - + - + diff --git a/img/3-9.svg b/img/3-9.svg index 545bcd4..5f26893 100644 --- a/img/3-9.svg +++ b/img/3-9.svg @@ -81,38 +81,40 @@ - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - + + - \ No newline at end of file diff --git a/img/3-kidney1.svg b/img/3-kidney1.svg new file mode 100644 index 0000000..fbed923 --- /dev/null +++ b/img/3-kidney1.svg @@ -0,0 +1,21 @@ + + + + Oval + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/3-kidney2.svg b/img/3-kidney2.svg new file mode 100644 index 0000000..a85d074 --- /dev/null +++ b/img/3-kidney2.svg @@ -0,0 +1,21 @@ + + + + Oval + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/3tissueorgan.png b/img/3tissueorgan.png new file mode 100644 index 0000000..8a9429b Binary files /dev/null and b/img/3tissueorgan.png differ diff --git a/img/3tissueorgan.svg b/img/3tissueorgan.svg new file mode 100644 index 0000000..5d68abf --- /dev/null +++ b/img/3tissueorgan.svg @@ -0,0 +1,14 @@ + + + + Group 29 + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 3519fb5..da0accb 100644 --- a/style.css +++ b/style.css @@ -1311,7 +1311,8 @@ h1 { position: relative; margin-top: 30px; margin-bottom: 30px; - top: 30%; + left: 10%; + top: 10%; } .cecetalk3:after { @@ -1501,6 +1502,19 @@ h1 { min-width: 100%; } +#two .scene3-5-1 { + background-image: url("img/3-11.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; @@ -1600,6 +1614,17 @@ h1 { #three .section1 { background-color: #FAFAFA; } +#kidneyorgan{ +opacity: 1; +} + +#kidneypart1{ + opacity: 0; +} + +#kidneypart2{ + opacity: 0; +} .threelung1 { margin-right: 20px;