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{