m |
|||
(11 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | const cp__heading1 = document.querySelector(".introContainer div.heading"); | |
− | + | const cp__heading2 = document.querySelector(".introContainer div.heading.other"); | |
− | + | const cp__image = document.querySelector(".introContainer span"); | |
− | + | const cp__container = document.querySelector(".introContainer"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | function setHeading(heading) { | |
− | + | cp__heading1.innerText = heading; | |
− | + | cp__heading2.innerText = heading; | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | // | + | // Title bubble animation |
− | function | + | function animate() { |
− | + | let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; | |
+ | let scroll = scrollTop / window.innerHeight; | ||
+ | if (scroll > 1) return; | ||
+ | let unit = "vw"; | ||
+ | if (window.innerWidth / window.innerHeight > 1) unit = "vh"; | ||
+ | cp__image.style.top = (60 * scroll) + unit; | ||
− | + | cp__heading1.style.marginTop = (70 * scroll) + unit; | |
− | + | cp__heading2.style.marginTop = (70 * scroll) + unit; | |
− | + | cp__container.style.backgroundPositionY = (35 * scroll) + unit; | |
− | + | ||
− | + | // let remainRight = window.innerWidth - cp__heading1.getBoundingClientRect().right - 2; | |
− | + | // if (remainRight < 20){ | |
− | + | // cp__heading1.style.transform = "translateX(0px)"; | |
− | + | // cp__heading2.style.transform = "translateX(0px)"; | |
− | + | // return; | |
− | + | // } | |
− | + | // let skewAmount = remainRight * scroll; | |
− | + | ||
− | + | ||
− | + | ||
− | + | // cp__heading1.style.transform = `translateX(${skewAmount}px)`; | |
− | + | // cp__heading2.style.transform = `translateX(${-skewAmount}px)`; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // if (document.getElementById("indexbutton") == undefined) return; | |
− | + | // let onTextBool = document.getElementById("navbar").getAttribute("onText"); | |
− | + | // document.getElementById("indexbutton").setAttribute("onText", onTextBool); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | window.addEventListener(" | + | window.addEventListener("scroll", animate, {passive: 1}); |
− | + | window.addEventListener("resize", animate, {passive: 1}); | |
− | + | window.addEventListener("load", animate, {passive: 1}); | |
− | + | animate(); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | window.addEventListener("resize", | + | |
− | + | ||
− | + | ||
− | + | ||
− | window.addEventListener("load", | + | |
− | + | ||
− | + | ||
− | + | ||
− | + |
Latest revision as of 23:48, 3 December 2020
const cp__heading1 = document.querySelector(".introContainer div.heading"); const cp__heading2 = document.querySelector(".introContainer div.heading.other"); const cp__image = document.querySelector(".introContainer span"); const cp__container = document.querySelector(".introContainer");
function setHeading(heading) {
cp__heading1.innerText = heading; cp__heading2.innerText = heading;
}
// Title bubble animation function animate() { let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; let scroll = scrollTop / window.innerHeight; if (scroll > 1) return; let unit = "vw"; if (window.innerWidth / window.innerHeight > 1) unit = "vh"; cp__image.style.top = (60 * scroll) + unit;
cp__heading1.style.marginTop = (70 * scroll) + unit; cp__heading2.style.marginTop = (70 * scroll) + unit; cp__container.style.backgroundPositionY = (35 * scroll) + unit;
// let remainRight = window.innerWidth - cp__heading1.getBoundingClientRect().right - 2; // if (remainRight < 20){ // cp__heading1.style.transform = "translateX(0px)"; // cp__heading2.style.transform = "translateX(0px)"; // return; // } // let skewAmount = remainRight * scroll;
// cp__heading1.style.transform = `translateX(${skewAmount}px)`; // cp__heading2.style.transform = `translateX(${-skewAmount}px)`;
// if (document.getElementById("indexbutton") == undefined) return; // let onTextBool = document.getElementById("navbar").getAttribute("onText"); // document.getElementById("indexbutton").setAttribute("onText", onTextBool); } window.addEventListener("scroll", animate, {passive: 1}); window.addEventListener("resize", animate, {passive: 1}); window.addEventListener("load", animate, {passive: 1}); animate();