dawn theme - header/logo effect - even AI cant help me LOL

Store Design
, , , ,
1

OK, so I’m trying to achieve the same kind of effect as muimui.com’s header/logo effect. It’s like a parallax effect, but I can’t get it to work. I use a marquee for my logo in a custom.liquid section. Basically, I want to add scrollY so that when you scroll with a mouse or touch device, it automatically scrolls up, so the logo(custom.liquid) smoothly scrolls out of the site like muimui/com’s. Mine is currently just fade and not parallax effect. AI has been no help with this one effect I need lololol.

this is my custom.liquid code in the theme editor.

<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<div class='marqlogo'>
<div id="node-marqueelogo">
  <span><a href="https://www.howahoriginals.com/"><img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/LOGO.svg?v=1728090950" width="100%"><img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/LOGO.svg?v=1728090950"  width="100%"></a></span>
</div>
</div>
<style>
  .marqlogo{
  background-color:white;
  }
</style>
<script>
  const logo = document.getElementById('node-marqueelogo');
if (logo) {
    nodeMarquee({
        parent: logo,
        speed: 0.3,
    });
}
</script>

And this is my code in backend theme.liquid ( think this is only for the header bar logo fade in after scrolling away from logo above header?)

    <script>
var headerHeading = document.querySelector('.header__heading-link');
headerHeading.style.opacity = '1';
headerHeading.style.display = 'none';

window.addEventListener('scroll', function() {
  if (window.scrollY > 10) {
    var sectionElement = document.querySelector('#shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4');
    sectionElement.style.opacity = '0';
    headerHeading.style.opacity = '1';
    headerHeading.style.display = 'block';
  } else {
    var sectionElement = document.querySelector('#shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4');
    sectionElement.style.opacity = '1';
    headerHeading.style.opacity = '0';
    headerHeading.style.display = 'none';
  }
});
</script>

<style>
  .header__heading-link, #shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4 {
    transition: opacity 0.6s ease;
  }
  .header__heading-link, #shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4 {
    transition: 0.6s ease;
  }
</style>

Let me know if anyone can help please !

Thanks! :slightly_smiling_face: