Merge branch 'development'

public/includes/nav.html

@@ -14,6 +14,9 @@
         <li class="nav-item">
           <a class="nav-link" href="/#section-pricing">Prijzen</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/#section-fpv">Over FPV</a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" href="/#section-about">Over mij</a>
         </li>

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<HTMLVideoElement>}
    */
   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<HTMLElement>}
    */
@@ -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}

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%);
@@ -334,3 +334,36 @@ img.grayscale-effect {
   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;
+  }
+}