shrink image on scroll

Hi there, i've got my nav logo how i want it, now i need to complete the illusion with the large logo image.

i need to shrink the 'MOONLIT' image down into the left corner on scroll,

on the same time/slightly before the nav logo appears. 

i'm using this @tuanphan code in page > settings >advanced >header:

<script>
  $(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 700){
    $('header#header').addClass('scrollNav');
  }
  else{
    $('header#header').removeClass('scrollNav');
  }
});
</script>
<style>
  
  
  header#header img {
    opacity: 0;
    transition: all 0.3s;
}
.scrollNav img {
    opacity: 1 !important;
    transition: all 0.3s;
}
   
  
</style>

along with CSS > website tools:

 

//hide logo until scroll//

.homepage .header-title-logo, .homepage .header-mobile-logo a {
    opacity: 0;
    position: relative;
    top: -10vh;
    transition: all .75s;
}

.homepage .shrink .header-title-logo, .homepage .shrink .header-mobile-logo a {
    opacity: 1;
    position: relative;
    top: 0;
}

What is site url?

On 3/14/2024 at 8:38 AM, tuanphan said:

What is site url?

@tuanphan www.moonlitdesign.uk/home-old

Try this code to Website > Website Tools > Custom CSS

header#header.shrink + #page div#block-yui_3_17_2_1_1710265456616_12284 {
    width: 300px !important;
    transition: all 0.3s;
}
div#block-yui_3_17_2_1_1710265456616_12284 {
    transition: all 0.3s;
}

4 hours ago, tuanphan said:

Try this code to Website > Website Tools > Custom CSS

header#header.shrink + #page div#block-yui_3_17_2_1_1710265456616_12284 {
    width: 300px !important;
    transition: all 0.3s;
}
div#block-yui_3_17_2_1_1710265456616_12284 {
    transition: all 0.3s;
}

 

@tuanphan This is an incredible start thank you so much! I changed the width to '0' to make it completely vanish!

there's still the issue that it starts to disappear straight away,
rather than about 600 scroll down the page, like this code:

<script>
  $(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 700){
    $('header#header').addClass('scrollNav');
  }
  else{
    $('header#header').removeClass('scrollNav');
  }
});
</script>
<style>

- is there a way to add a scroll time like this for the big MOONLIT image too ?

- is there also a way to add a left direction to the 'shrink' animation?
so it looks like its disappearing into the corner and being replaced with the new logo 😄 

thank you!

@moonlitdesign did you manage to get the code to achieve what you wanted? Looks good. 

I'm looking to get text blocks to move left out of screen when scrolling, and others to go to 0% opacity while scrolling. 

Thank you.