m |
m |
||
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"); | ||
+ | |||
// Set heading text | // Set heading text | ||
window.addEventListener("load", () => { | window.addEventListener("load", () => { | ||
let text = document.getElementById("headingTitleText").value; | let text = document.getElementById("headingTitleText").value; | ||
− | + | cp__heading1.innerText = text; | |
− | + | cp__heading2.innerText = text; | |
+ | |||
}); | }); | ||
Line 10: | Line 16: | ||
let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; | let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; | ||
let scroll = scrollTop / window.innerHeight; | let scroll = scrollTop / window.innerHeight; | ||
− | if (scroll > 1) | + | if (scroll > 1) return; |
let unit = "vw"; | let unit = "vw"; | ||
− | if (window.innerWidth / window.innerHeight > 1) unit = "vh" | + | 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 < 10){ | ||
+ | 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; | // if (document.getElementById("indexbutton") == undefined) return; |
Revision as of 16:55, 19 October 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");
// Set heading text window.addEventListener("load", () => { let text = document.getElementById("headingTitleText").value; cp__heading1.innerText = text; cp__heading2.innerText = text;
});
// 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 < 10){ 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}); document.addEventListener("load", animate, {passive: 1}); animate();