Difference between revisions of "Template:Vilnius-Lithuania/JS/ContentPage"

m
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
−
// Set heading text
+
const cp__heading1 = document.querySelector(".introContainer div.heading");
−
window.addEventListener("load", () => {
+
const cp__heading2 = document.querySelector(".introContainer div.heading.other");
−
let text = document.getElementById("headingTitleText").value;
+
const cp__image = document.querySelector(".introContainer span");
−
document.querySelector(".introContainer div.heading").innerText = text;
+
const cp__container = document.querySelector(".introContainer");
−
document.querySelector(".introContainer div.heading.other").innerText = text;
+
 
−
});
+
function setHeading(heading) {
 +
    cp__heading1.innerText = heading;
 +
    cp__heading2.innerText = heading;
 +
}
  
 
// Title bubble animation
 
// Title bubble animation
Line 10: Line 13:
 
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) 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";
−
$(".introContainer span").css("top", (60 * scroll) + unit);
+
cp__image.style.top = (60 * scroll) + unit;
−
$(".introContainer .heading").css("margin-top", (35 * 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;
+
// if (document.getElementById("indexbutton") == undefined) return;
−
let onTextBool = document.getElementById("navbar").getAttribute("onText");
+
// let onTextBool = document.getElementById("navbar").getAttribute("onText");
−
document.getElementById("indexbutton").setAttribute("onText", onTextBool);
+
// document.getElementById("indexbutton").setAttribute("onText", onTextBool);
 
}
 
}
 
window.addEventListener("scroll", animate, {passive: 1});
 
window.addEventListener("scroll", animate, {passive: 1});
 
window.addEventListener("resize", animate, {passive: 1});
 
window.addEventListener("resize", animate, {passive: 1});
−
document.addEventListener("load", animate, {passive: 1});
+
window.addEventListener("load", animate, {passive: 1});
 
animate();
 
animate();

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();