Image to header on scroll

Hey!! 

So I'm looking to create a sort of similar transition to this website, I love how the image transforms into the scrolling header at the top and wanted to replicate that with my own logo (without the split). I've tried high and low to find this but I'm not sure if it can be done?

Thank you in advance!!!

@tuanphan Could you shed some light on this please? 🙂

Hi,

What is site url?

@tuanphan

https://khaki-bumblebee-rgm8.squarespace.com/

pass: newyorkminute

Thank you!!

On 4/27/2023 at 11:22 PM, Gigi-C said:

@tuanphan

https://khaki-bumblebee-rgm8.squarespace.com/

pass: newyorkminute

 

Thank you!!

I see you figured it out?

@tuanphan unfortunately it's not the exact effect I would've liked to have.

I would've preferred the logo image to centre more in the middle of the first section, and while scrolling down become part of the header... It seems a little more complicated than I had originally thought!

On 4/29/2023 at 11:16 PM, Gigi-C said:

@tuanphan unfortunately it's not the exact effect I would've liked to have.

 

I would've preferred the logo image to centre more in the middle of the first section, and while scrolling down become part of the header... It seems a little more complicated than I had originally thought!

Add to Design > Custom CSS

header#header:not(.shrink) img {
    position: relative;
    top: 100px;
}

@tuanphan omg thank you!!! Just one more question, the scroll motion when scrolling down and up when coming across this feels a little glitchy, anyway I can make the scroll a little smoother?

Thanks!!

I see you added transition to code?

@tuanphan I tried, but unfortunately it still looks quite choppy when I scroll. Any fixes?

On 5/10/2023 at 4:24 PM, Gigi-C said:

@tuanphan I tried, but unfortunately it still looks quite choppy when I scroll. Any fixes?

I see it looks fine to me

@tuanphan I guess it's not as choppy as I thought. Since I'm here, could you also help me with the following please?

I've written the last comment. I was wondering whether you could help me figure out a way to make this mobile responsive. 

Thanks in advance!