Problema CSS/JS. Oare are cineva cunostintele necesare?

[akaroot]

Incerc sa refac efectul de scroll al logoului de la gucci : https://www.gucci.com/ro/en_gb/

Dar Nu am reusit sa creez animatia nici cum ... exemplu : https://goiaandrei.com/

 

Am folosit codul de mai jos:

HTML:

<div id="stickyNav">
  GOIA
</div>

CSS:

#stickyNav {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
  z-index: 1000;
  font-size: 10vw; /* Initial large size */
  color: white;
  text-align: center;
  white-space: nowrap;
}

.isSticky {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4vw; /* Smaller size when fixed */
  color: black;
}

JS:

document.addEventListener('DOMContentLoaded', function() {
  const nav = document.getElementById('stickyNav');
  let isSticky = false;

  function setStickyClass(sticky) {
    if (sticky && !isSticky) {
      nav.classList.add('isSticky');
      isSticky = true;
    } else if (!sticky && isSticky) {
      nav.classList.remove('isSticky');
      isSticky = false;
    }
  }

  window.addEventListener('scroll', function() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop > 150) {
      setStickyClass(true);
    } else {
      setStickyClass(false);
    }
  });
});

Are cineva cunostintele necesare si bunavointa sa ma ajute? Nu mai stiu cum sa il invart sa functioneze...

[anamoraru]

Incearca sa copiezi metoda lor, observ ca tu vrei sa faci animatia completa doar cu un element.

 

pe siteul lor clasele se modifica incepand cu wrapper, nu doar un element cred ca sunt 4 in total.