81 lines
No EOL
1.9 KiB
JavaScript
81 lines
No EOL
1.9 KiB
JavaScript
/**
|
|
* @type {NodeListOf<HTMLVideoElement>}
|
|
*/
|
|
const parallaxElems = document.querySelectorAll('.parallax');
|
|
|
|
/**
|
|
* @type {NodeListOf<HTMLAnchorElement>}
|
|
*/
|
|
const navlinks = document.querySelectorAll('a.nav-link');
|
|
|
|
/**
|
|
* @type {NodeListOf<HTMLElement>}
|
|
*/
|
|
const sections = document.querySelectorAll('.section');
|
|
|
|
// Handle scroll events.
|
|
window.addEventListener('scroll', () =>
|
|
{
|
|
// Add class to body when scrolled.
|
|
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
|
|
|
|
// Parallax effect.
|
|
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`;
|
|
});
|
|
|
|
// Highlight menu item when scrolled to section.
|
|
let current = '';
|
|
sections.forEach(section =>
|
|
{
|
|
const rect = section.getBoundingClientRect();
|
|
const sectionTop = rect.top + window.scrollY;
|
|
|
|
if (window.scrollY >= sectionTop - 70)
|
|
{
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navlinks.forEach(link =>
|
|
{
|
|
link.classList.remove('active');
|
|
|
|
if (link.getAttribute('href') === `#${current}`)
|
|
{
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
sections.forEach(section =>
|
|
{
|
|
if (section.id)
|
|
{
|
|
const anchor = document.createElement('a');
|
|
anchor.className = 'anchor-link';
|
|
anchor.href = `#${section.id}`;
|
|
anchor.innerHTML = ' # ';
|
|
section.appendChild(anchor);
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
|
|
{
|
|
anchor.addEventListener('click', () =>
|
|
{
|
|
/**
|
|
* @type {HTMLButtonElement}
|
|
*/
|
|
const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
|
|
navbarNav?.click();
|
|
});
|
|
}); |