How can I create a header logo animation on scroll?

[Ab52]

Hi, I'm trying to recreate a header-logo animation on scroll, similar to the Gucci website: https://www.gucci.com/nl/en_gb/?gad_source=1&gclsrc=ds Can you help me create this? Thank you in advance.

[Raj-webdesigner]

Yes I can Help You

[Ab52]

Perfect, how?

[Raj-webdesigner]

Where in the site do you want to create this animation

[Ab52]

Header, where my logo is. Same as the Gucci site

[Raj-webdesigner]

Okay You Say I all Code Give you DIrect Without Site,
Same as Gucci

[Ab52]

I’m sorry I don’t understand what you mean, Yes i just want a code to implement in base.css/theme.liquid/headercss etc. But I want the animation exactly the same, where i can change it to my logo instead on Gucci ‘ do you understand me? I’m sorry for my english.

[Raj-webdesigner]

Okay, Your Code Is ready Bro, Please My Code Works Perfectly! where you Coffee with Me bro

[Ab52]

Perfect, can you show me how the code works? What it is? Where to implement?

[Raj-webdesigner]

This Is Script Use It in Header.liquid

<script>
document.addEventListener('DOMContentLoaded', function() {
    const nav = document.getElementById('stickyNav');
    let lastScrollTop = 0;
    let isSticky = false;
  
    function setStickyClass(sticky) {
      if (sticky && !isSticky) {
        nav.classList.remove('isSticky');
        nav.style.top = '0';
        nav.style.fontSize = '500px'; // Adjust the font size as needed
        nav.style.color = 'white';
        isSticky = true;
    } else if (!sticky && isSticky) {
        nav.classList.add('isSticky');
        nav.style.top = '0px';
        nav.style.fontSize = '42px'; // Adjust the font size as needed\\
        nav.style.color = 'black';
        isSticky = false;
      }
    }
  
    window.addEventListener('scroll', function() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
      if (scrollTop <= 150) {
        setStickyClass(true);
      } else {
        setStickyClass(false);
      }
      lastScrollTop = scrollTop;
    });
  });
</script> 

[Ab52]

It doesn’t work

[Raj-webdesigner]

First You Put Header.liquid Logo Add id and this code than add css after Work this Code

First You Find This Class Name

class="header__heading-link link link--text focus-inset"

This Class Name Total Two And You Both Same Change

Replace By This Code 

id="stickyNav" style="top: -50px; font-size: 500px; color: white; width:100%" class="header__heading-link link link--text focus-inset"

And Than Add Css Above Of the header.liquid above code Style inner Put

#stickyNav {
    position: fixed;
    font-size: 80px;
    width: 100%;
    text-align: center;
    transition: top 1s ease, font-size 1s ease; 
}

[Ab52]

should i send you a link of my website in pm?

[Raj-webdesigner]

Okay

[Ab52]

Sent

[Raj-webdesigner · Accepted solution]

add This css Code in Header.liquid FIle

line 85 :-->     /* Logo Text */    "
Below Past This Code

header.header h1.header__heading:nth-child(4) .header__heading-logo-wrapper {
    display: none;
}

[BlendAgency]

Hi @Raj-webdesigner , I tried to contact you through email but your email adress doesnt seem to work. How can we get in contact? I'm looking for a developer who can implement exact this animation for me. 

Thank you 

[Raj-webdesigner]

Yes Sure.