Solved

How can I create a header logo animation on scroll?

Ab52
New Member
38 0 0

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.

Accepted Solution (1)
Raj-webdesigner
Shopify Partner
253 56 60

This is an 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;
}



 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 15 (15)

Raj-webdesigner
Shopify Partner
253 56 60

Yes I can Help You

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Ab52
New Member
38 0 0

Perfect, how?

Raj-webdesigner
Shopify Partner
253 56 60

Where in the site do you want to create this animation

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Ab52
New Member
38 0 0

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

Raj-webdesigner
Shopify Partner
253 56 60

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

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Ab52
New Member
38 0 0

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
Shopify Partner
253 56 60
Okay, Your Code Is ready Bro, Please My Code Works Perfectly! where you Coffee with Me bro



If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Ab52
New Member
38 0 0

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

Raj-webdesigner
Shopify Partner
253 56 60

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> 

 

 

 

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Ab52
New Member
38 0 0

It doesn’t work

Raj-webdesigner
Shopify Partner
253 56 60

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; 
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Ab52
New Member
38 0 0

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

Raj-webdesigner
Shopify Partner
253 56 60

Okay

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Ab52
New Member
38 0 0

Sent

Raj-webdesigner
Shopify Partner
253 56 60

This is an 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;
}



 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com