shrink large logo image on scroll

Heyy! 

I'd love to achieve the effect of a large image logo shrinking on scroll. Similar to this: https://www.byondesign.com/global/

The site I'm working on for it is: https://kumquat-butterfly-r966.squarespace.com
PW: sarah

(cc: @tuanphan)

On 12/19/2023 at 2:32 AM, c_rissy said:

Heyy! 

I'd love to achieve the effect of a large image logo shrinking on scroll. Similar to this: https://www.byondesign.com/global/

 

The site I'm working on for it is: https://kumquat-butterfly-r966.squarespace.com
PW: sarah

(cc: @tuanphan)

Hi,

I says: No website

Can you check your site url again?

Ohh sorry @tuanphan, I just updated it to pass to show client. 

Here is the updated URL 

https://sarah-ng.squarespace.com/

pw: sarah

@tuanphan I was able to get it to shrink but it has a weird glitch where it goes to the right side of the page first. Can you help me figure out why? 

site: https://sarah-ng.squarespace.com
pw: sarah

This is the code I used:
 

.header-title-logo img {
    width: auto;
    max-width: 900% !important;
    max-height: 331px;
    position: absolute;
    right: 160px;
    top: 300px;
}
  
  header#header img {
    transition: all 0.8s;
  }
  
  header#header.shrink img {
    max-height: 60px;
    transition: all 0.8s;
    left: 780px;
    top: 1px;
  }

Don't remove your code. Add this CSS under

@media screen and (min-width: 768px) {
header#header.shrink img {
     left: 50%;
    transform: translateX(-50%);
}
.header-title-logo img {
    left: 50%;
    transform: translateX(-50%);
}}

Seriously THE BEST! Thank you so much @tuanphan

Hi @tuanphan, I've used the code above as I'd like the same effect used on a website. Ideally I'd like the logo to sit at the bottom of the screen and a lot wider (see screenshot attached), also similar to this website: https://www.miltontextiles.com/

I'd like this effect to only occur on the Home Page or when they first land on the website.

How do I go about this? 

Any help would be greatly appreciated!

My website URL: https://www.askalmelbourne.com/

On 3/2/2024 at 11:00 AM, Theresamo said:

Hi @tuanphan, I've used the code above as I'd like the same effect used on a website. Ideally I'd like the logo to sit at the bottom of the screen and a lot wider (see screenshot attached), also similar to this website: https://www.miltontextiles.com/

I'd like this effect to only occur on the Home Page or when they first land on the website.

How do I go about this? 

Any help would be greatly appreciated!

 

My website URL: https://www.askalmelbourne.com/

 

Hi,

For this page? 

https://www.askalmelbourne.com/

Hi @tuanphan,

At the moment, I have the coming soon page visible on that URL. It's for the Home Page. I can add you as an admin to take a look?

Thanks,

Theresa

On 3/5/2024 at 3:35 PM, Theresamo said:

Hi @tuanphan,

At the moment, I have the coming soon page visible on that URL. It's for the Home Page. I can add you as an admin to take a look?

Thanks,

Theresa

You can share link to that page, or duplicate the site & share url, we can check easier

Hi @tuanphan, I've made a copy of this site.

https://horse-cheetah-6efj.squarespace.com/

PW: 167exhibition

Thankyou!

Hey @tuanphan just checking in to see if you had the chance to look at this?

Hi,

I'm trying to get this effect but the logo just disappears with the code? 

https://saxophone-minnow-acj7.squarespace.com/
PW: abcd

The code used: 

.header-title-logo img {
    width: auto;
    max-width: 900% !important;
    max-height: 331px;
    position: absolute;
    right: 160px;
    top: 300px;
}
  
  header#header img {
    transition: all 0.8s;
  }
  
  header#header.shrink img {
    max-height: 60px;
    transition: all 0.8s;
    left: 780px;
    top: 1px;
  }

On 1/2/2024 at 8:47 AM, tuanphan said:

@media screen and (min-width: 768px) {
header#header.shrink img {
     left: 50%;
    transform: translateX(-50%);
}
.header-title-logo img {
    left: 50%;
    transform: translateX(-50%);
}}

@tuanphan 

I love this effect but how did you get it to stop on other pages and just have the logo sitting in the header without the effect? Just wanting it on the homepage.

On 3/29/2024 at 12:33 AM, Ankel said:

Hi,

I'm trying to get this effect but the logo just disappears with the code? 

https://saxophone-minnow-acj7.squarespace.com/
PW: abcd

The code used: 

.header-title-logo img {
    width: auto;
    max-width: 900% !important;
    max-height: 331px;
    position: absolute;
    right: 160px;
    top: 300px;
}
  
  header#header img {
    transition: all 0.8s;
  }
  
  header#header.shrink img {
    max-height: 60px;
    transition: all 0.8s;
    left: 780px;
    top: 1px;
  }

@tuanphan 

Answered your email

On 4/3/2024 at 7:20 AM, Stefik said:

I love this effect but how did you get it to stop on other pages and just have the logo sitting in the header without the effect? Just wanting it on the homepage.

Which code did you use in this thread? We can add id body.homepage {} before the code to make it run on homepage only

I figured out how to apply this only to the homepage! Has there been a solution to create this effect on mobile too? Can't seem to get that one to work.

You can send me your website url and I can give you updated code. 

On 5/2/2024 at 3:10 AM, Stefik said:

I figured out how to apply this only to the homepage! Has there been a solution to create this effect on mobile too? Can't seem to get that one to work.

Change 768px in the code to 1px 

Hi! I would love this effect on the homepage of a website I'm working on;

thomasteal.com

I used the code below but it just made the header disappear;

.header-title-logo img {
    width: auto;
    max-width: 900% !important;
    max-height: 331px;
    position: absolute;
    right: 160px;
    top: 300px;
}
  
  header#header img {
    transition: all 0.8s;
  }
  
  header#header.shrink img {
    max-height: 60px;
    transition: all 0.8s;
    left: 780px;
    top: 1px;
  }

On 6/28/2024 at 5:45 AM, sombracreative said:

Hi! I would love this effect on the homepage of a website I'm working on;

thomasteal.com

I used the code below but it just made the header disappear;

.header-title-logo img {
    width: auto;
    max-width: 900% !important;
    max-height: 331px;
    position: absolute;
    right: 160px;
    top: 300px;
}
  
  header#header img {
    transition: all 0.8s;
  }
  
  header#header.shrink img {
    max-height: 60px;
    transition: all 0.8s;
    left: 780px;
    top: 1px;
  }

 

You need to enable Fixed Header first. Because If you don't enable this, ID ".shrink" won't appear.

I tried that but I'm afraid it's still not working, the header just disappears 

On 7/2/2024 at 1:22 AM, sombracreative said:

I tried that but I'm afraid it's still not working, the header just disappears 

Remove above code & use this new code

body .header-title {
    position: absolute;
    width: 100%;
    transition: 2s ease !important;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 25vh;
}
body header#header.shrink .header-title {
    width: 15% !important;
    left: 0;
    top: 0vh;
    text-align: left;
}
body .header-title img {
    width: 100% !important;
    max-height: 400px;
}

Hello!

I am trying to do something similar on my site but the logo goes to far to the top left corner instead of centered in the header. How do I fix this?

My site: https://www.throughfood.org/

the inspo site I am trying to replicate: https://thelocavore.com/

I used this script

body .header-title {
    position: absolute;
    width: 100%;
    transition: 2s ease !important;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 25vh;
}
body header#header.shrink .header-title {
    width: 15% !important;
    left: 0;
    top: 0vh;
    text-align: left;
}
body .header-title img {
    width: 100% !important;
    max-height: 400px;
}

thank you so much!

On 8/29/2024 at 11:50 PM, insuficientspectrum said:

Hello!

I am trying to do something similar on my site but the logo goes to far to the top left corner instead of centered in the header. How do I fix this?

My site: https://www.throughfood.org/

the inspo site I am trying to replicate: https://thelocavore.com/

I used this script

body .header-title {
    position: absolute;
    width: 100%;
    transition: 2s ease !important;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 25vh;
}
body header#header.shrink .header-title {
    width: 15% !important;
    left: 0;
    top: 0vh;
    text-align: left;
}
body .header-title img {
    width: 100% !important;
    max-height: 400px;
}

thank you so much!

You can use this new code

body .header-title {
    position: absolute;
    width: 100%;
    transition: 2s ease !important;

}
body header#header.shrink .header-title {
    width: 15% !important;
    left: 50%;
    top: 0vh;
    text-align: left;
    transform: translateX(-50%);
}
body .header-title img {
    width: 100% !important;
    max-height: 400px;
}

.header-title-nav-wrapper {
    flex-direction: column;
}

Thank you so much, If I wanted to have the logo end up in the left hand corner (normal logo spot in Squarespace header) how would I change that code?  when I tried to do it on my own it had no padding and was stuck in the farther corner possible.