animations investigations

assets/css/base/_body.scss

@@ -137,7 +137,7 @@ body, #site-header, #site-footer{
 body.menu-open,
 body.is-hidden{
     overflow-y: hidden;
-    main, footer, #nav-highlight, .btn--back-to-top, .bottom-bar{
+    main, footer, #nav-highlight, .btn--back-to-top, .bottom-bar__inner{
         transition: opacity .3s ease-in;
         opacity: 0.1;
     }

assets/css/base/_var.scss

@@ -79,6 +79,9 @@
   --h-block: 30px;
 
   --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --transition-scroll: .5s ease-in-out;
+
+
 }
 
 
@@ -112,6 +115,8 @@
   --color-txt: #161616;
   --color-txt-light: var(--grey-400);
 
+   --border-light: 1px solid var(--grey-800);
+
   --color-accent: #ff00ff;
   --color-accent-50: #ffe9ff;
   --color-accent-100: #fdd8fd;

assets/css/components/_bottom-bar.scss

@@ -1,15 +1,39 @@
-.bottom-bar{
+#bottom-bar{
     position: fixed;
-    bottom: 0;
     left: 0;
-      z-index: calc(var(--z-header) - 10);
+    bottom: calc(var(--header-h)*-0.75);
+    &.is-visible{ 
+        bottom: 0px; 
+    }
+   
+    z-index: calc(var(--z-header) - 10);
     height: calc(var(--header-h)*0.75);
     width: 100vw;
     background-color: var(--color-bg);
     padding-left: var(--padding-body);
     padding-right: var(--padding-body);
 
-    border-top: 2px solid var(--grey-800);
+    transition: bottom var(--transition-scroll);
+
+
+  
+
+    // border-top: 2px solid var(--grey-800);
+
+    .progress-container{
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 2px;
+        width: 100vw;
+        background-color: var(--grey-800);
+
+        .progress-bar{
+             height: 2px;
+            background-color: var(--color-txt);
+            width: 40%;
+        }
+    }
 
     .bottom-bar__inner{
         height: calc(var(--header-h)*0.75);
@@ -45,8 +69,8 @@
         flex-grow: 1;
         width: 100%;
         white-space: nowrap;
-        overflow: hidden;
+        // overflow: hidden;
-        text-overflow: ellipsis;
+        // text-overflow: ellipsis;
      
      
         //  align-items: center;
@@ -59,7 +83,9 @@
                     padding-left: 1ch;
                     padding-right: 1ch;
                 }
+              
                 
+
         }
 
       

assets/css/partials/_site-header.scss

@@ -53,6 +53,7 @@
    #nav-investigation{
       flex-grow: 2;
       ul{
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -63,17 +64,57 @@
     }
     #nav-highlight ul{
          font-weight: 500;
-          text-transform: uppercase;
+        text-transform: uppercase;
      
     }
 
 
     #nav-investigation{
-      display: none;
+        position: absolute;
+        // transition: top var(--transition-scroll);
+        top: 10%;
+        left: 0;
+        display: flex;
+        opacity: 0;
+        // transform: translateY(-10px);
+        transition: top 0.3s ease;
+        pointer-events: none;
+
+        li{ 
+          color: var(--color-txt-light); 
+          transition: color 0.3s ease;
+        }
+
+        li.is-selected{
+          color: var(--color-txt);
+          &:hover{
+            color: var(--color-txt);
+              pointer-events: none;
+              a:hover{
+                color: var(--color-txt);
+              }
+          }
+        }
     }  
 
 
 
+    &.has-nav-investigation{
+      #nav-highlight{
+        display: none;
+      }
+      #nav-investigation{
+        position: relative;
+        opacity: 1;
+      transform: translateY(0);
+      top: 0px;
+      pointer-events: auto;
+      }
+    }
+
+
+
+
   #theme-toggle{
     width: var(--h-block);
     height: var(--h-block);
@@ -120,12 +161,6 @@
 
 
 
-#site-header.is-visible{
-  // .site-header__inner{
-  //   border-color: var(--grey-800);
-  // }
-}
-
 
 @media #{$medium}{
   #nav-highlight{

assets/css/style.css

@@ -56,6 +56,7 @@
   --spacing: 30px;
   --h-block: 30px;
   --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --transition-scroll: .5s ease-in-out;
 }
 
 @media screen and (max-width: 768px) {
@@ -81,6 +82,7 @@
   --color-bg: #efefef;
   --color-txt: #161616;
   --color-txt-light: var(--grey-400);
+  --border-light: 1px solid var(--grey-800);
   --color-accent: #ff00ff;
   --color-accent-50: #ffe9ff;
   --color-accent-100: #fdd8fd;
@@ -144,12 +146,12 @@ body.menu-open,
 body.is-hidden {
   overflow-y: hidden;
 }
-body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top, body.menu-open .bottom-bar,
+body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top, body.menu-open .bottom-bar__inner,
 body.is-hidden main,
 body.is-hidden footer,
 body.is-hidden #nav-highlight,
 body.is-hidden .btn--back-to-top,
-body.is-hidden .bottom-bar {
+body.is-hidden .bottom-bar__inner {
   transition: opacity 0.3s ease-in;
   opacity: 0.1;
 }
@@ -199,6 +201,7 @@ body.is-hidden .bottom-bar {
 }
 #site-header #nav-highlight ul,
 #site-header #nav-investigation ul {
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -210,8 +213,38 @@ body.is-hidden .bottom-bar {
   text-transform: uppercase;
 }
 #site-header #nav-investigation {
+  position: absolute;
+  top: 10%;
+  left: 0;
+  display: flex;
+  opacity: 0;
+  transition: top 0.3s ease;
+  pointer-events: none;
+}
+#site-header #nav-investigation li {
+  color: var(--color-txt-light);
+  transition: color 0.3s ease;
+}
+#site-header #nav-investigation li.is-selected {
+  color: var(--color-txt);
+}
+#site-header #nav-investigation li.is-selected:hover {
+  color: var(--color-txt);
+  pointer-events: none;
+}
+#site-header #nav-investigation li.is-selected:hover a:hover {
+  color: var(--color-txt);
+}
+#site-header.has-nav-investigation #nav-highlight {
   display: none;
 }
+#site-header.has-nav-investigation #nav-investigation {
+  position: relative;
+  opacity: 1;
+  transform: translateY(0);
+  top: 0px;
+  pointer-events: auto;
+}
 #site-header #theme-toggle {
   width: var(--h-block);
   height: var(--h-block);
@@ -2048,60 +2081,76 @@ button.sort[data-sort-type=up] .arrow {
   box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
 }
 
-.bottom-bar {
+#bottom-bar {
   position: fixed;
-  bottom: 0;
   left: 0;
+  bottom: calc(var(--header-h) * -0.75);
+}
+#bottom-bar.is-visible {
+  bottom: 0px;
+}
+#bottom-bar {
   z-index: calc(var(--z-header) - 10);
   height: calc(var(--header-h) * 0.75);
   width: 100vw;
   background-color: var(--color-bg);
   padding-left: var(--padding-body);
   padding-right: var(--padding-body);
-  border-top: 2px solid var(--grey-800);
+  transition: bottom var(--transition-scroll);
 }
-.bottom-bar .bottom-bar__inner {
+#bottom-bar .progress-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 2px;
+  width: 100vw;
+  background-color: var(--grey-800);
+}
+#bottom-bar .progress-container .progress-bar {
+  height: 2px;
+  background-color: var(--color-txt);
+  width: 40%;
+}
+#bottom-bar .bottom-bar__inner {
   height: calc(var(--header-h) * 0.75);
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: var(--padding-inner);
 }
-.bottom-bar .btn--back-to-top .icon {
+#bottom-bar .btn--back-to-top .icon {
   display: flex;
   width: 20px;
   height: 20px;
 }
-.bottom-bar .btn--back-to-top .icon svg {
+#bottom-bar .btn--back-to-top .icon svg {
   width: 20px;
   height: 20px;
 }
-.bottom-bar .btn--back-to-top {
+#bottom-bar .btn--back-to-top {
   position: relative;
   top: -3px;
   width: 100px;
 }
-.bottom-bar .btn--back-to-top a {
+#bottom-bar .btn--back-to-top a {
   justify-content: flex-end;
 }
-.bottom-bar .btn--back-to-top .icon {
+#bottom-bar .btn--back-to-top .icon {
   transform: rotate(-90deg);
   transform-origin: center;
 }
-.bottom-bar .title-group {
+#bottom-bar .title-group {
   font-size: var(--fs-small);
   display: flex;
   color: var(--color-txt-light);
   flex-grow: 1;
   width: 100%;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-.bottom-bar .title-group .type {
+#bottom-bar .title-group .type {
   text-transform: uppercase;
 }
-.bottom-bar .title-group .type::after {
+#bottom-bar .title-group .type::after {
   content: "/";
   padding-left: 1ch;
   padding-right: 1ch;
@@ -2152,6 +2201,7 @@ button.sort[data-sort-type=up] .arrow {
 }
 #site-header #nav-highlight ul,
 #site-header #nav-investigation ul {
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2163,8 +2213,38 @@ button.sort[data-sort-type=up] .arrow {
   text-transform: uppercase;
 }
 #site-header #nav-investigation {
+  position: absolute;
+  top: 10%;
+  left: 0;
+  display: flex;
+  opacity: 0;
+  transition: top 0.3s ease;
+  pointer-events: none;
+}
+#site-header #nav-investigation li {
+  color: var(--color-txt-light);
+  transition: color 0.3s ease;
+}
+#site-header #nav-investigation li.is-selected {
+  color: var(--color-txt);
+}
+#site-header #nav-investigation li.is-selected:hover {
+  color: var(--color-txt);
+  pointer-events: none;
+}
+#site-header #nav-investigation li.is-selected:hover a:hover {
+  color: var(--color-txt);
+}
+#site-header.has-nav-investigation #nav-highlight {
   display: none;
 }
+#site-header.has-nav-investigation #nav-investigation {
+  position: relative;
+  opacity: 1;
+  transform: translateY(0);
+  top: 0px;
+  pointer-events: auto;
+}
 #site-header #theme-toggle {
   width: var(--h-block);
   height: var(--h-block);

assets/js/investigation.js

@@ -9,3 +9,98 @@ export function initSliderBeforeAfter(container = document){
     }
   });
 }
+
+
+export function navInvestigation(){
+  const nav = document.getElementById('nav-investigation');
+  if (!nav) return;
+
+  const items = nav.querySelectorAll('li');
+  const headerOffset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h-header')) || 0;
+
+  const sections = Array.from(items).map(li => {
+    const href = li.querySelector('a')?.getAttribute('href');
+    const target = href ? document.querySelector(href) : null;
+    return { li, target };
+  }).filter(s => s.target);
+
+  const update = () => {
+    const scrollY = window.scrollY + headerOffset;
+    let current = sections[0];
+
+    for (const section of sections) {
+      if (section.target.offsetTop <= scrollY) {
+        current = section;
+      }
+    }
+
+    items.forEach(li => li.classList.remove('is-selected'));
+    if (current) current.li.classList.add('is-selected');
+  };
+
+  window.addEventListener('scroll', update, { passive: true });
+  update();
+}
+
+
+
+
+export function progressBar(){
+  const bar = document.getElementById('progressBar');
+  if (!bar) return;
+
+  window.addEventListener('scroll', () => {
+    const scrollTop = window.scrollY;
+    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+    const progress = docHeight > 0 ? (scrollTop / docHeight) * 160 : 0;
+    bar.style.width = `${progress}%`;
+  }, { passive: true });
+}
+
+
+export function scrollBack(){
+  const bottomBar = document.getElementById('bottom-bar');
+  const navInvestigation = document.getElementById('nav-investigation');
+  const header = document.getElementById('site-header');
+
+  let lastY = window.scrollY;
+  let peakY = window.scrollY;
+  let visible = false;
+
+  const show = () => {
+    visible = true;
+    if (bottomBar) bottomBar.classList.add('is-visible');
+    if (navInvestigation && header) header.classList.add('has-nav-investigation');
+  };
+
+  const hide = () => {
+    visible = false;
+    if (bottomBar) bottomBar.classList.remove('is-visible');
+    if (navInvestigation && header) header.classList.remove('has-nav-investigation');
+  };
+
+  window.addEventListener('scroll', () => {
+    const currentY = window.scrollY;
+
+    // header : basé uniquement sur la position absolue
+    if (navInvestigation && header) {
+      header.classList.toggle('has-nav-investigation', currentY >= 160);
+    }
+
+    // bottom-bar : show au scroll bas > 280px, hide après 200px de scroll haut
+    if (currentY > lastY) {
+      peakY = currentY;
+      if (!visible && currentY > 280) {
+        visible = true;
+        if (bottomBar) bottomBar.classList.add('is-visible');
+      }
+    } else {
+      if (visible && peakY - currentY >= 200) {
+        visible = false;
+        if (bottomBar) bottomBar.classList.remove('is-visible');
+      }
+    }
+
+    lastY = currentY;
+  }, { passive: true });
+}

assets/js/script.js

@@ -4,7 +4,7 @@ import { themeToggle } from './themeToggle.js';
 import { playVideo } from './hero-video.js';
 import { initDropdowns } from './dropdown.js';
 import { initSwipers } from './swipers.js';
-import { initSliderBeforeAfter } from './investigation.js';
+import { initSliderBeforeAfter, progressBar, scrollBack, navInvestigation } from './investigation.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -20,7 +20,11 @@ window.onload = async function () {
   initDropdowns(responsiveSmall);
   initSwipers();
 
+  progressBar();
+
   initSliderBeforeAfter();
+  scrollBack();   
+  navInvestigation();  
 
   var elem = document.querySelector('.grid-masonry');
   var msnry = null;

site/snippets/header.php

@@ -52,7 +52,7 @@
 
     <nav id="nav-investigation">
       <ul>
-           <li><a href="#investigation__hero">Vidéo</a></li>
+           <li class="is-selected"><a href="#investigation__hero">Vidéo</a></li>
             <li><a href="#investigation__content">Enquête</a></li>
              <li><a href="#methodo">Méthodologies</a></li>
              <li><a href="#impacts">Impact</a></li>

site/templates/investigation.php

@@ -483,9 +483,14 @@ if ($package):
 
 
 
-<div class="bottom-bar">
+<div id="bottom-bar">
+    
     <div class="bottom-bar__inner">
 
+            <div class="progress-container">
+                <div class="progress-bar" id="progressBar"></div>
+            </div>
+
             <div class="title-group">
                 <p class="type">Enquête</p>
                 <p class="title"><?= $page->title()->esc() ?></p>