diff --git a/public/includes/nav.html b/public/includes/nav.html
index e507475..c910521 100644
--- a/public/includes/nav.html
+++ b/public/includes/nav.html
@@ -14,6 +14,9 @@
Prijzen
+
+ Over FPV
+
Over mij
diff --git a/src/js/scripts.js b/src/js/scripts.js
index c9fe264..22a3705 100644
--- a/src/js/scripts.js
+++ b/src/js/scripts.js
@@ -1,17 +1,35 @@
-document.addEventListener('DOMContentLoaded', () =>
+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}
*/
const parallaxElems = document.querySelectorAll('.parallax');
- // Handle scroll events.
- window.addEventListener('scroll', () =>
+ const refreshScrollLinkedPositioningEffect = () =>
{
- // Add class to body when scrolled.
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
- // Parallax effect.
parallaxElems.forEach(parallaxElem =>
{
const parentElem = parallaxElem.parentElement;
@@ -23,8 +41,16 @@ document.addEventListener('DOMContentLoaded', () =>
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
});
- });
+ };
+ refreshScrollLinkedPositioningEffect();
+ window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);
+
+ highlightSectionFromHash();
+});
+
+document.addEventListener('DOMContentLoaded', () =>
+{
/**
* @type {NodeListOf}
*/
@@ -45,9 +71,10 @@ document.addEventListener('DOMContentLoaded', () =>
}
});
- document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
+ // Collapse the navbar in mobile view after clicking a link.
+ document.querySelectorAll('#navbarNav li.nav-item>a').forEach(navLink =>
{
- anchor.addEventListener('click', () =>
+ navLink.addEventListener('click', () =>
{
/**
* @type {HTMLButtonElement}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index e43e94d..1270f0e 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -94,6 +94,7 @@ body.home main {
@extend .pt-3;
}
+section,
main>* {
@extend .pt-4;
@extend .pb-3;
@@ -269,8 +270,7 @@ img.grayscale-effect {
.gradient-to-top-light::before {
content: "";
position: absolute;
- top: 0;
- left: 0;
+ inset: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, transparent 67%, rgba(var(--bs-light-rgb), 1) 100%);
@@ -333,4 +333,37 @@ img.grayscale-effect {
.socials {
display: flex;
gap: .5rem;
+}
+
+.scrollto-highlight {
+ position: relative;
+ overflow: hidden;
+ animation: highlight-fade 1s ease;
+}
+
+.scrollto-highlight::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.20);
+ pointer-events: none;
+ animation: highlight-overlay-fade 1s ease-in-out forwards;
+}
+
+@keyframes highlight-overlay-fade {
+
+ 0% {
+ opacity: 0;
+ }
+
+ 5%,
+ 90% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
}
\ No newline at end of file