86 lines
No EOL
2.3 KiB
JavaScript
86 lines
No EOL
2.3 KiB
JavaScript
const highlightSectionFromHash = () =>
|
|
{
|
|
const { hash } = window.location;
|
|
|
|
if (hash === '#section-contact')
|
|
{
|
|
const section = document.getElementById(hash.substring(1))?.parentElement;// .closest('section');
|
|
|
|
if (section)
|
|
{
|
|
setTimeout(() =>
|
|
{
|
|
section.classList.add('scrollto-highlight');
|
|
setTimeout(() => section.classList.remove('scrollto-highlight'), 1000);
|
|
}, 500);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener('hashchange', highlightSectionFromHash);
|
|
|
|
window.addEventListener('pageshow', () =>
|
|
{
|
|
/**
|
|
* @type {NodeListOf<HTMLVideoElement>}
|
|
*/
|
|
const parallaxElems = document.querySelectorAll('.parallax');
|
|
|
|
const refreshScrollLinkedPositioningEffect = () =>
|
|
{
|
|
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
|
|
|
|
parallaxElems.forEach(parallaxElem =>
|
|
{
|
|
const parentElem = parallaxElem.parentElement;
|
|
|
|
const parentRect = parentElem.getBoundingClientRect();
|
|
const parentScroll = parentRect.top + (parentRect.height / 2);
|
|
|
|
const windowScroll = window.scrollY + (window.innerHeight / 2);
|
|
|
|
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
|
|
});
|
|
};
|
|
|
|
refreshScrollLinkedPositioningEffect();
|
|
window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);
|
|
|
|
highlightSectionFromHash();
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () =>
|
|
{
|
|
/**
|
|
* @type {NodeListOf<HTMLElement>}
|
|
*/
|
|
const sections = document.querySelectorAll('section');
|
|
|
|
sections.forEach(section =>
|
|
{
|
|
const anchorTarget = section.querySelector('[id^="section-"]');
|
|
const anchorHeader = section.querySelector('h1,h2');
|
|
|
|
if (anchorTarget && anchorHeader)
|
|
{
|
|
const anchorLink = document.createElement('a');
|
|
anchorLink.className = 'anchor-link';
|
|
anchorLink.href = `#${anchorTarget.id}`;
|
|
anchorLink.innerHTML = ' # ';
|
|
anchorHeader.appendChild(anchorLink);
|
|
}
|
|
});
|
|
|
|
// Collapse the navbar in mobile view after clicking a link.
|
|
document.querySelectorAll('#navbarNav li.nav-item>a').forEach(navLink =>
|
|
{
|
|
navLink.addEventListener('click', () =>
|
|
{
|
|
/**
|
|
* @type {HTMLButtonElement}
|
|
*/
|
|
const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
|
|
navbarNav?.click();
|
|
});
|
|
});
|
|
}); |