diff --git a/devstory5.html b/devstory5.html index 77e0915..418023a 100644 --- a/devstory5.html +++ b/devstory5.html @@ -224,7 +224,7 @@

Know Your Body Buddies

-
+
And so down they went...
@@ -235,6 +235,8 @@

Know Your Body Buddies

+ @@ -263,7 +265,8 @@

Know Your Body Buddies

-
CeCe: And if I'm not mistaken, your tissue block is right here. +
CeCe: And if I'm not mistaken, your tissue block is right + here.
@@ -272,6 +275,8 @@

Know Your Body Buddies

+ @@ -305,7 +310,8 @@

Know Your Body Buddies

-
CeCe: That's exactly what I'm saying. So it's a good idea to learn a bit more +
CeCe: That's exactly what I'm saying. So it's a good idea to + learn a bit more about them.
@@ -315,6 +321,9 @@

Know Your Body Buddies

+ + @@ -339,7 +348,8 @@

Know Your Body Buddies

-
CeCe: These datasets are typically found in scholarly papers or in online +
CeCe: These datasets are typically found in scholarly papers + or in online collections of data, which are called portals.
@@ -349,6 +359,9 @@

Know Your Body Buddies

+ + @@ -359,8 +372,110 @@

Know Your Body Buddies

+
+
+
CeCe: Now, if you add all that data to the spatial data collected when + researchers register tissue samples using the RUI, then we get a pretty good sense of which cell types + appear in a given organ. +
+
+
+
+
+
CeCe: We can even get an estimation of where in the organ they appear. And + that estimation gets more accurate the more data is collected from studies and tissue registration. +
+
+ +
+
+ +
+
+ + + +
+ + +
+
+
+ +
+
+
CeCe: For instance, Mac, we see that in your area of the kidney—which + researchers call the “renal pyramid”—these cell types make up the general population. +
+
+
+
+
+
Mac: Wow, that's so many cell types to learn about! I'm overwhelmed! +
+
+
+
Squiggy: I can't believe I'm the one saying this, Mac, but you really need + to relax. +
+
+
+
Squiggy: Just pick a cell type with a high population and start from there. + It looks like there are quite a few inner medullary collecting duct cells. +
+
+
+
CeCe: Squiggy's right, Mac. Why don't you start with those and work your way + through all the large populations. +
+
+
+
CeCe: You can learn about a cell type's structure, its function, its relation + to other cells…all that cool stuff. +
+
+
+
Mac: Yes, that does sound interesting. But for the purposes of my block party, I + just want to know which cell types play pickleball and which prefer badminton! +
+
+
+
Squiggy: Don't worry Mac, we'll help you learn all about cell types AND + help you set up for your party. Let's get started! +
+
+
+
CeCe: OK, but let's say "goodbye" to our readers. +
+
+
+
Squiggy: Bye, everyone! See you next time! +
+
+ +
+
+ +
+
+ + + +
+ + +
+
+
+ -
+
External links @@ -601,6 +716,36 @@

Know Your Body Buddies

end: "+=100%", //onBackEnter: replayvideo4, }); + ScrollTrigger.create({ + trigger: ".scene5-14", + anticipatePin: 1, + start: "top top", + end: "+=320%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene5-15", + onEnter: replayvideo5, + start: "top top", + end: "+=100%", + //onBackEnter: replayvideo4, + }); + ScrollTrigger.create({ + trigger: ".scene5-16", + anticipatePin: 1, + start: "top top", + end: "+=1120%", + pin: true, + pinSpacing: false + }); + ScrollTrigger.create({ + trigger: ".scene5-17", + onEnter: replayvideo6, + start: "top top", + end: "+=100%", + //onBackEnter: replayvideo4, + }); //fade in txt const containers = gsap.utils.toArray(".container"); @@ -738,6 +883,15 @@

Know Your Body Buddies

document.getElementById("sample4").currentTime = 0; scrolls4(); } + function replayvideo5() { + document.getElementById("sample5").currentTime = 0; + scrolls5(); + } + function replayvideo6() { + document.getElementById("sample6").currentTime = 0; + scrolls6(); + } + //BUtton stuff @@ -756,6 +910,12 @@

Know Your Body Buddies

}; //scroll + function scrollup1() { + const scrollupitem1 = document.getElementById("scrollupto1"); + scrollupitem1.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); + enableScrolling(); + } + function scroll1() { const scrollitem1 = document.getElementById("scrollto1"); scrollitem1.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); @@ -774,6 +934,7 @@

Know Your Body Buddies

//Show repeat and down arrow buttons function onend1() { document.getElementById("buttons1").style.opacity = "0.8"; + document.getElementById("toparrow1").style.opacity = "0.8"; }; //BUtton stuff @@ -792,6 +953,12 @@

Know Your Body Buddies

}; //scroll + function scrollup2() { + const scrollupitem2 = document.getElementById("scrollupto2"); + scrollupitem2.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); + enableScrolling(); + } + function scroll2() { const scrollitem2 = document.getElementById("scrollto3"); scrollitem2.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); @@ -810,6 +977,7 @@

Know Your Body Buddies

//Show repeat and down arrow buttons function onend2() { document.getElementById("buttons2").style.opacity = "0.8"; + document.getElementById("toparrow2").style.opacity = "0.8"; }; //BUtton stuff @@ -828,6 +996,12 @@

Know Your Body Buddies

}; //scroll + function scrollup3() { + const scrollupitem3 = document.getElementById("scrollupto3"); + scrollupitem3.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); + enableScrolling(); + } + function scroll3() { const scrollitem3 = document.getElementById("scrollto5"); scrollitem3.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); @@ -846,12 +1020,13 @@

Know Your Body Buddies

//Show repeat and down arrow buttons function onend3() { document.getElementById("buttons3").style.opacity = "0.8"; + document.getElementById("toparrow3").style.opacity = "0.8"; }; //Button stuff //4 //repeat - function repeatmovie4() { + function repeatmovie4() { scrolls4(); let myVid4 = document.getElementById("sample4"); @@ -864,6 +1039,12 @@

Know Your Body Buddies

}; //scroll + function scrollup4() { + const scrollupitem4 = document.getElementById("scrollupto4"); + scrollupitem4.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); + enableScrolling(); + } + function scroll4() { const scrollitem4 = document.getElementById("scrollto7"); scrollitem4.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); @@ -871,7 +1052,6 @@

Know Your Body Buddies

} function scrolls4() { - const element4 = document.getElementById("scrollto6"); const y = element4.getBoundingClientRect().top + window.scrollY + 5; window.scrollTo({ top: y, block: "center", behavior: 'instant' }); @@ -882,7 +1062,101 @@

Know Your Body Buddies

//Show repeat and down arrow buttons function onend4() { document.getElementById("buttons4").style.opacity = "0.8"; - }; + document.getElementById("toparrow4").style.opacity = "0.8"; + }; + + + //Enable and disable scrolling + function disableScrolling() { + var x = window.scrollX; + var y = window.scrollY; + window.onscroll = function () { window.scrollTo(x, y); }; + } + + function enableScrolling() { + window.onscroll = function () { }; + } + + //Button stuff + //5 + //repeat + function repeatmovie5() { + scrolls5(); + + let myVid5 = document.getElementById("sample5"); + myVid5.pause(); + + if (myVid5.seekable.length > 0) { + myVid5.currentTime = 0; + } + myVid5.play(); + }; + + //scroll + function scrollup5() { + const scrollupitem5 = document.getElementById("scrollupto5"); + scrollupitem5.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); + enableScrolling(); + } + + function scroll5() { + const scrollitem5 = document.getElementById("scrollto9"); + scrollitem5.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); + enableScrolling(); + } + + function scrolls5() { + const element5 = document.getElementById("scrollto8"); + const y = element5.getBoundingClientRect().top + window.scrollY + 5; + window.scrollTo({ top: y, block: "center", behavior: 'instant' }); + disableScrolling(); + } + + //Show repeat and down arrow buttons + function onend5() { + document.getElementById("buttons5").style.opacity = "0.8"; + document.getElementById("toparrow5").style.opacity = "0.8"; + }; + + //Button stuff + //6 + //repeat + function repeatmovie6() { + scrolls6(); + + let myVid6 = document.getElementById("sample6"); + myVid6.pause(); + + if (myVid6.seekable.length > 0) { + myVid6.currentTime = 0; + } + myVid6.play(); + }; + + //scroll + function scrollup6() { + const scrollupitem6 = document.getElementById("scrollupto6"); + scrollupitem6.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); + enableScrolling(); + } + function scroll6() { + const scrollitem6 = document.getElementById("scrollto11"); + scrollitem6.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); + enableScrolling(); + } + + function scrolls6() { + const element6 = document.getElementById("scrollto10"); + const y = element6.getBoundingClientRect().top + window.scrollY + 5; + window.scrollTo({ top: y, block: "center", behavior: 'instant' }); + disableScrolling(); + } + + //Show repeat and down arrow buttons + function onend6() { + document.getElementById("buttons6").style.opacity = "0.8"; + document.getElementById("toparrow6").style.opacity = "0.8"; + }; //Enable and disable scrolling diff --git a/img/5-14.png b/img/5-14.png new file mode 100644 index 0000000..fa357cc Binary files /dev/null and b/img/5-14.png differ diff --git a/img/5-16.png b/img/5-16.png new file mode 100644 index 0000000..a09b0ee Binary files /dev/null and b/img/5-16.png differ diff --git a/img/uparrowbutton.svg b/img/uparrowbutton.svg new file mode 100644 index 0000000..40dfffd --- /dev/null +++ b/img/uparrowbutton.svg @@ -0,0 +1,14 @@ + + + + uparrowbutton + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/img/video5-5.mov b/img/video5-5.mov new file mode 100644 index 0000000..5bf5d9b Binary files /dev/null and b/img/video5-5.mov differ diff --git a/img/video5-6.mov b/img/video5-6.mov new file mode 100644 index 0000000..c78405b Binary files /dev/null and b/img/video5-6.mov differ diff --git a/style.css b/style.css index b6bd1cd..588efb3 100644 --- a/style.css +++ b/style.css @@ -49,7 +49,6 @@ body { width: auto; height: 50vh; min-height: 250px; - max-width:100vh; z-index: -1000; opacity: 0.5; overflow: hidden; @@ -2426,6 +2425,71 @@ h1 { align-items: center; } +#two .scene5-14 { + background-color: black; + background-image: url("img/5-14.png"); + height: 100vh; + overflow: hidden; + margin: auto; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; + display: inline-block; + vertical-align: middle; +} + +#two .scene5-15 { + background-color: black; + height: 100vh; + overflow: hidden; + margin: auto; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; + display: inline-block; + vertical-align: middle; + display: flex; + align-items: center; +} + +#two .scene5-16 { + background-color: black; + background-image: url("img/5-16.png"); + height: 100vh; + overflow: hidden; + margin: auto; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; + display: inline-block; + vertical-align: middle; +} + +#two .scene5-17 { + background-color: black; + height: 100vh; + overflow: hidden; + margin: auto; + top: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; + display: inline-block; + vertical-align: middle; + display: flex; + align-items: center; +} + + + + #two #sign { width:15%; right: 20%; @@ -2471,6 +2535,22 @@ h1 { .video5{ width: 100%; + max-height: 100vh; + } + + .vid{ + display: flex; + flex-direction: column; + margin-left: auto; + margin-right: auto; + } + + .toparrowbutton{ + display: flex; + margin: auto;bottom:5px; top: 8vh; + position: relative; + z-index: 1000; + opacity:0; } .vidcontrols{ @@ -2481,6 +2561,7 @@ h1 { margin-left: auto; margin-right: 15px; width: 50%; + top: -8vh; } #buttons1{