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.

[ronannoss]

On 6/27/2024 at 1:31 AM, akaroot said:

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/ the freak circus

 

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...

If you want an even closer reproduction of high-end sites like Gucci, instead of a hard toggle at 150px, calculate the scale dynamically based on scroll distance:

window.addEventListener('scroll', () => {
  const nav = document.getElementById('stickyNav');
  const scrollY = window.scrollY;
  const maxScroll = 200; // Distance over which the transition completes
  
  const progress = Math.min(scrollY / maxScroll, 1);
  
  // Interpolate position and scale dynamically
  if (progress > 0) {
    nav.classList.add('isSticky');
  } else {
    nav.classList.remove('isSticky');
  }
}, { passive: true });

Give this CSS transition tweak a shot - using scale() instead of changing font-size directly should solve the layout jump completely!