change logo and shrink it on scroll

hi there, i'm looking to shrink and replace the main logo with a different logo on scroll.

the second logo needs to be left aligned.

I would like this to kick into effect at the start of the second page section. 

I would also only like the second smaller logo to appear in the left corner on all content pages.

here is an example: https://lowtide.co/

another example: https://www.thestyledsquare.com/header-scroll-feature-plugin?fbclid=IwAR1U437b3xWcCzGTCe6jKmJUcgmxpua1SU6tLDr26BUzmygfooxQK1NbZbs

my site url: www.moonlitdesign.uk/home-old

attached is my design:

Hey @moonlitdesign how did you go about this? I'm wanting to acheive something similar to my site?

I haven't thus yet, I bought the styled square plug in but still couldn't get it to work in the way I wanted. 

I put some code together randomly but it looks awful and can't work out how to fix it 😞

79$ for a bit of code! Yikes!

Try this:

/* Shrinking Logo On Scroll - 7.1 */
.header.shrink img {
    max-width: 120px; /* Adjust the max width as needed */
    transition: all 0.2s ease-in-out;
}

.header img {
    transition: all 0.2s ease-in-out;
}

/* Second logo styling */
.second-logo {
    display: none; /* Initially hide the second logo */
    max-width: 120px; /* Adjust the max width as needed */
    transition: all 0.2s ease-in-out;
}

/* Show second logo on scroll and align left */
body:not(.homepage) .second-logo {
    display: block;
    float: left; /* Align left */
}

/* Trigger effect at the start of the second page section */
body:not(.homepage) .header.shrink .second-logo {
    opacity: 1; /* Adjust opacity or other styles as needed */
}

PRO Tip: Use ChatGTP to 1 work out the quirks.

Hope it helps. Stay creative!

23 hours ago, cro0w said:

79$ for a bit of code! Yikes!

Try this:

 

/* Shrinking Logo On Scroll - 7.1 */
.header.shrink img {
    max-width: 120px; /* Adjust the max width as needed */
    transition: all 0.2s ease-in-out;
}

.header img {
    transition: all 0.2s ease-in-out;
}

/* Second logo styling */
.second-logo {
    display: none; /* Initially hide the second logo */
    max-width: 120px; /* Adjust the max width as needed */
    transition: all 0.2s ease-in-out;
}

/* Show second logo on scroll and align left */
body:not(.homepage) .second-logo {
    display: block;
    float: left; /* Align left */
}

/* Trigger effect at the start of the second page section */
body:not(.homepage) .header.shrink .second-logo {
    opacity: 1; /* Adjust opacity or other styles as needed */
}

PRO Tip: Use ChatGTP to 1 work out the quirks.

Hope it helps. Stay creative!

thank you, yeah i know gutted, but hopefully can utilise on as many client projects as possible hahah. thank you for the code, i'm still not quite getting the effect i want even with trying to modify it. it's annoying because i've seen it done on other sites: www.lowtide.co for example. but her logo stays the same, where as i want to change mine. will keep trying to work on it!

3 hours ago, moonlitdesign said:

thank you, yeah i know gutted, but hopefully can utilise on as many client projects as possible hahah. thank you for the code, i'm still not quite getting the effect i want even with trying to modify it. it's annoying because i've seen it done on other sites: www.lowtide.co for example. but her logo stays the same, where as i want to change mine. will keep trying to work on it!

Definitely try ChatGTP to get the right code, it does wonders if you give it all the information. I have gotten my sites to look how I want without relying on a programmer AND I've increased my skills in coding cus ChatGTP is fast and nice in explaining things. 

@cro0w @moonlitdesign 

I'm trying to do something similar, but instead:

1. On scroll, the large red ARGUS logo, black rule, and nav slide up (the large ARGUS logo and rule are out of the viewport). The nav bar is now sticky to the top.

2. When you continue to scroll, the little red ARGUS logo slides/fade in at the top left of the nav.

Similar to this: https://www.capsule-design.studio/

Any help would be appreciated

site: https://toucan-tetra-fwm2.squarespace.com/
p: argus

I've also attached two screenshots. 1. On page load 2. When scrolled

On 3/9/2024 at 8:50 AM, orkoellis said:

@cro0w @moonlitdesign 

I'm trying to do something similar, but instead:

1. On scroll, the large red ARGUS logo, black rule, and nav slide up (the large ARGUS logo and rule are out of the viewport). The nav bar is now sticky to the top.

2. When you continue to scroll, the little red ARGUS logo slides/fade in at the top left of the nav.

Similar to this: https://www.capsule-design.studio/

Any help would be appreciated

site: https://toucan-tetra-fwm2.squarespace.com/
p: argus

I've also attached two screenshots. 1. On page load 2. When scrolled

@orkoellis, it looks like you were able to achieve this! It looks amazing. would you mind sharing the code you used (or the plugin, if you purhased) to get it working?

@tuanphan hey ! i've used some of your code that i've found around on the forum to try and create a header shrinking effect. i'm not super happy with desktop but i can live with it. on mobile however, i'd really like help with the following:

- i'm wondering if there is a way to delay the shrink nav logo appearing until you have scrolled to the second section of my homepage only on mobile! 

www.moonlitdesign.uk/home-old

fingers crossed and thank you!!!

On 4/9/2024 at 4:55 PM, moonlitdesign said:

@tuanphan hey ! i've used some of your code that i've found around on the forum to try and create a header shrinking effect. i'm not super happy with desktop but i can live with it. on mobile however, i'd really like help with the following:

- i'm wondering if there is a way to delay the shrink nav logo appearing until you have scrolled to the second section of my homepage only on mobile! 

www.moonlitdesign.uk/home-old

fingers crossed and thank you!!!

 

Add this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  header#header img {
    opacity: 0 !important;
}
header#header.test-something img {
    opacity: 1 !important;
}
</style>

On 4/13/2024 at 8:56 AM, tuanphan said:

Add this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  header#header img {
    opacity: 0 !important;
}
header#header.test-something img {
    opacity: 1 !important;
}
</style>

 

thank you so much! is there a way to change the code to only happen on the homepage, and only on mobile? 

3 hours ago, tuanphan said:

You can add code to Homepage Header Code Injection, instead of Sitewide Code Injection Footer

With Mobile, change code to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .header-display-mobile img {
    opacity: 0 !important;
}
header#header.test-something .header-display-mobile img {
    opacity: 1 !important;
}
</style>

 

Thank you so much you're incredible!!

out of interest, do you know how to delay the transition of the large moonlit logo image on the homepage? i would like the image to overlap it on scroll first before transitioning away. not essential but i tried a few things with no luck! 

www.moonlitdesign.uk/home-old

#block-yui_3_17_2_1_1710265456616_12284

I see it already overlap image here

2 hours ago, tuanphan said:

I see it already overlap image here

@tuanphan yeah so i'd like the logo to be sticky, and then the image to completely scroll up above the logo until the image disappears, then the logo shrinks down !

@tuanphan ive tried adding sticky to it and a top value but can't get it to work. any thoughts at all? thank you!

@tuanphan

Hey Tuan, 

I've been trying to get the above scripts to work on my site however, I can't seem to get it right, maybe I'm installing it wrong or the pre-set header nav isn't set-up correctly. 

I'd like to replicate this site's header scroll animation, which is similar to the above examples – would you be able to help?

https://www.friendsoffriends.design/

This is my site - https://www.knwn.studio/

With the examples above there doesn't seem to be CSS associated with the scripts either, would it be possible that that's what I'm missing?

Thanks, 

On 5/14/2024 at 7:58 AM, Nick.Loubser said:

@tuanphan

Hey Tuan, 

I've been trying to get the above scripts to work on my site however, I can't seem to get it right, maybe I'm installing it wrong or the pre-set header nav isn't set-up correctly. 

I'd like to replicate this site's header scroll animation, which is similar to the above examples – would you be able to help?

https://www.friendsoffriends.design/

This is my site - https://www.knwn.studio/

With the examples above there doesn't seem to be CSS associated with the scripts either, would it be possible that that's what I'm missing?

Thanks, 

Use this CSS code

a#site-title {
    font-size: 200px;
    position: relative;
    top: 30px;
    transition: all 0.3s;
}
.shrink a#site-title {
    font-size: 30px;
    transition: all 0.3s;
    top: 0;
}

Hi @tuanphan, 

I've had a developer help me get this effect using scripts: 
https://lumierecanberra.squarespace.com/
password: bandit

And while it looks great on desktop (exactly the effect I want), on mobile it's really jumpy, and not really a smooth scroll. Do you know if anything can be done here to make it more of a smooth transition?

Thank you