m |
|||
Line 1: | Line 1: | ||
// Title bubble animation | // Title bubble animation | ||
function animate() { | function animate() { | ||
− | + | let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; | |
− | + | let scroll = scrollTop / window.innerHeight; | |
− | + | if (scroll > 1) scroll = 1; | |
− | + | let unit = "vw"; | |
− | + | if (window.innerWidth / window.innerHeight > 1) unit = "vh" | |
− | + | $(".introContainer span").css("top", (60 * scroll) + unit); | |
− | + | // $(".introContainer span").css("background-position", "0 calc(" + (scrollTop) + "px - " + (50*scroll + 10) + unit + ")"); | |
− | + | 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("scroll", animate, {passive: 1}); | ||
Line 20: | Line 20: | ||
// Create index of h3s dynamically | // Create index of h3s dynamically | ||
function addIndex() { | function addIndex() { | ||
− | + | let mainContent = document.getElementById("section-text"); | |
− | + | let indexbutton = document.createElement("div"); | |
− | + | indexbutton.id = "indexbutton"; | |
− | + | indexbutton.className = "indexbutton"; | |
− | + | indexbutton.innerText = "Index"; | |
− | + | let index = document.createElement("div"); | |
− | + | index.id = "index"; | |
− | + | index.className = "index"; | |
− | + | let boldIndexTitle = document.createElement("b"); | |
− | + | boldIndexTitle.innerText = document.getElementById("headingTitleText").value; | |
− | + | index.appendChild(boldIndexTitle); | |
− | + | let ul = document.createElement("ul"); | |
− | + | index.appendChild(ul); | |
− | + | ||
− | + | ||
− | + | let headings = document.querySelectorAll(".content div.h3"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | let number = 1; | |
− | + | for (let heading of headings) { | |
− | + | heading.id = "heading" + number; | |
− | + | let li = document.createElement("li"); | |
− | + | if (number == 1) li.className = "active"; | |
− | + | ul.appendChild(li); | |
− | + | let div = document.createElement("div"); | |
− | + | li.appendChild(div); | |
− | + | let a = document.createElement("a"); | |
− | + | a.href = "#heading" + number; | |
− | + | a.innerText = heading.innerText; | |
− | + | li.appendChild(a); | |
+ | li.onclick = () => { | ||
+ | const setActiveFunction = () => { | ||
+ | Array.from(ul.children).forEach((childLi) => { | ||
+ | childLi.className = ""; | ||
+ | }); | ||
+ | li.className = "active"; | ||
+ | }; | ||
+ | setTimeout(setActiveFunction, 100); | ||
+ | setTimeout(setActiveFunction, 260); | ||
+ | setTimeout(setActiveFunction, 420); | ||
+ | } | ||
+ | number++; | ||
+ | } | ||
+ | mainContent.insertBefore(index, mainContent.firstChild); | ||
+ | mainContent.insertBefore(indexbutton, mainContent.firstChild); | ||
+ | |||
+ | indexbutton.onclick = () => { | ||
+ | if (indexbutton.classList.contains("open")) { | ||
+ | indexbutton.innerHTML = "Index"; | ||
+ | indexbutton.classList.remove("open"); | ||
+ | index.classList.remove("open") | ||
+ | } else { | ||
+ | indexbutton.innerHTML = "Close"; | ||
+ | indexbutton.classList.add("open"); | ||
+ | index.classList.add("open") | ||
+ | } | ||
+ | }; | ||
+ | initializeIndexScroll(); | ||
} | } | ||
window.addEventListener("load", addIndex); | window.addEventListener("load", addIndex); | ||
Line 83: | Line 83: | ||
// Change index bubble dynamically on scroll | // Change index bubble dynamically on scroll | ||
let scrollPositions = []; | let scrollPositions = []; | ||
− | function activateBubble(id){ | + | |
− | + | function activateBubble(id) { | |
− | + | let ul = document.querySelector("#index ul"); | |
− | + | Array.from(ul.children).forEach((childLi) => { | |
− | + | // if (childLi.dataset.href == "#" + id){ | |
− | + | if (childLi.lastElementChild.getAttribute("href") == "#" + id) { | |
− | + | childLi.className = "active"; | |
− | + | return; | |
− | + | } | |
− | + | childLi.className = ""; | |
+ | }); | ||
} | } | ||
− | |||
− | |||
− | |||
− | + | function indexScroll() { | |
− | + | let currentScrollPos = document.documentElement.scrollTop; | |
− | + | let clientWindowMid = document.documentElement.clientHeight * 0.1; | |
− | + | ||
− | + | let calculatedScroll = currentScrollPos + clientWindowMid; | |
− | + | let highlightedElement; | |
− | + | for (let i = 0, n = scrollPositions.length; i < n; i++) { | |
− | + | if (scrollPositions[i].position > calculatedScroll) { | |
− | + | highlightedElement = scrollPositions[i].element; | |
− | + | break; | |
+ | } | ||
+ | } | ||
+ | if (highlightedElement == undefined || highlightedElement.id == undefined) return; | ||
+ | activateBubble(highlightedElement.id); | ||
} | } | ||
− | function initializeIndexScroll(){ | + | function initializeIndexScroll() { |
− | + | scrollPositions = []; | |
− | + | let mainContent = document.getElementById("section-text"); | |
− | + | let headings = document.querySelectorAll(".content div.h3"); | |
− | + | headings.forEach((heading) => { | |
− | + | let position = mainContent.offsetTop + heading.offsetTop; | |
− | + | scrollPositions.push({ | |
− | + | element: heading, | |
− | + | position | |
+ | }); | ||
+ | }); | ||
+ | |||
} | } | ||
window.addEventListener("resize", initializeIndexScroll); | window.addEventListener("resize", initializeIndexScroll); | ||
Line 124: | Line 129: | ||
// Set heading text | // Set heading text | ||
− | window.addEventListener("load", ()=>{ | + | window.addEventListener("load", () => { |
− | + | let text = document.getElementById("headingTitleText").value; | |
− | + | document.querySelector(".introContainer div.heading").innerText = text; | |
− | + | document.querySelector(".introContainer div.heading.other").innerText = text; | |
}); | }); |
Revision as of 16:11, 25 August 2020
// 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) scroll = 1; let unit = "vw"; if (window.innerWidth / window.innerHeight > 1) unit = "vh" $(".introContainer span").css("top", (60 * scroll) + unit); // $(".introContainer span").css("background-position", "0 calc(" + (scrollTop) + "px - " + (50*scroll + 10) + unit + ")");
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();
// Create index of h3s dynamically function addIndex() { let mainContent = document.getElementById("section-text");
let indexbutton = document.createElement("div"); indexbutton.id = "indexbutton"; indexbutton.className = "indexbutton"; indexbutton.innerText = "Index";
let index = document.createElement("div"); index.id = "index"; index.className = "index"; let boldIndexTitle = document.createElement("b"); boldIndexTitle.innerText = document.getElementById("headingTitleText").value; index.appendChild(boldIndexTitle); let ul = document.createElement("ul"); index.appendChild(ul);
let headings = document.querySelectorAll(".content div.h3");
let number = 1; for (let heading of headings) { heading.id = "heading" + number; let li = document.createElement("li"); if (number == 1) li.className = "active"; ul.appendChild(li); let div = document.createElement("div"); li.appendChild(div); let a = document.createElement("a"); a.href = "#heading" + number; a.innerText = heading.innerText; li.appendChild(a); li.onclick = () => { const setActiveFunction = () => { Array.from(ul.children).forEach((childLi) => { childLi.className = ""; }); li.className = "active"; }; setTimeout(setActiveFunction, 100); setTimeout(setActiveFunction, 260); setTimeout(setActiveFunction, 420); } number++; } mainContent.insertBefore(index, mainContent.firstChild); mainContent.insertBefore(indexbutton, mainContent.firstChild);
indexbutton.onclick = () => { if (indexbutton.classList.contains("open")) { indexbutton.innerHTML = "Index"; indexbutton.classList.remove("open"); index.classList.remove("open") } else { indexbutton.innerHTML = "Close"; indexbutton.classList.add("open"); index.classList.add("open") } }; initializeIndexScroll(); } window.addEventListener("load", addIndex);
// Change index bubble dynamically on scroll let scrollPositions = [];
function activateBubble(id) { let ul = document.querySelector("#index ul"); Array.from(ul.children).forEach((childLi) => { // if (childLi.dataset.href == "#" + id){ if (childLi.lastElementChild.getAttribute("href") == "#" + id) { childLi.className = "active"; return; } childLi.className = ""; }); }
function indexScroll() { let currentScrollPos = document.documentElement.scrollTop; let clientWindowMid = document.documentElement.clientHeight * 0.1;
let calculatedScroll = currentScrollPos + clientWindowMid; let highlightedElement; for (let i = 0, n = scrollPositions.length; i < n; i++) { if (scrollPositions[i].position > calculatedScroll) { highlightedElement = scrollPositions[i].element; break; } } if (highlightedElement == undefined || highlightedElement.id == undefined) return; activateBubble(highlightedElement.id); }
function initializeIndexScroll() { scrollPositions = []; let mainContent = document.getElementById("section-text"); let headings = document.querySelectorAll(".content div.h3"); headings.forEach((heading) => { let position = mainContent.offsetTop + heading.offsetTop; scrollPositions.push({ element: heading, position }); });
} window.addEventListener("resize", initializeIndexScroll); window.addEventListener("scroll", indexScroll);
// Set heading text window.addEventListener("load", () => { let text = document.getElementById("headingTitleText").value; document.querySelector(".introContainer div.heading").innerText = text; document.querySelector(".introContainer div.heading.other").innerText = text; });