Transition between logo and logo after scroll - Support | Kriesi.at

Tagged: Fade, header, logo, transform, transformation

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
August 8, 2024 at 5:15 pm #1464161

pelgrimrat
Participant

Dear people of this forum,

I have a question concerning the logo in de header.

I have a page setup with a transparent header.
When you start scrolling, the logo changes into a different, slimmer logo (text only).
My question is: I think the transition between te “top logo” and the logo after scrolling looks very ugly, because you see the first logo scale down before transforming into the new logo.
Is there a way to make this transition/crossfade better? Or skip the transition, so no fade out/fade in?

Any help will be much appreciated!

August 9, 2024 at 4:50 am #1464201
Ismael
Moderator
Hey pelgrimrat,

Thank you for the inquiry.

When you start scrolling, the logo changes into a different, slimmer logo (text only).

This is only visible when you intentionally scroll down a few pixels (10-20px) from the top. The transition you’re describing won’t be noticeable to most users, as they will likely scroll well beyond the fold after viewing the top content. If you’d like to adjust it, you can add this css code to completely hide the initial logo on scroll.
```
.header-scrolled .logo .subtext > img {
    opacity: 0;
    display: none;
}
```
Best regards,
Ismael
August 12, 2024 at 11:39 am #1464450

pelgrimrat
Participant

Hi Ismael,

Thank you very much for your reply!
Your code works perfectly when scrolling down!

When I scroll back up, there is still a transition visible which I don’t like: the “scrolled” logo is getting stretched before fading into the “full” logo.
Is that transition also possible to hide with CSS?

Thanks in advance.

August 12, 2024 at 3:35 pm #1464458
Guenni007
Participant
if it is only a matter of opacity – you can work with transition

but best would be to see the site you like to have that to give better advice.
f.e.:
```
#header .logo img,
#header.header-scrolled .logo img {
  transition : opacity 1s ease;
}
```
August 13, 2024 at 5:50 am #1464503

Ismael
Moderator

Hi,

@pelgrimrat: Please try @Guenni007’s suggestion above and let us know if it works.

Best regards,
Ismael

August 13, 2024 at 9:22 am #1464519
pelgrimrat
Participant
It works perfectly, thank you so much!

Eventually, I used this code:
```
.header-scrolled .logo .subtext > img {
    opacity: 0;
    display: none;
}

#header .logo img,
#header.header-scrolled .logo img {
  transition : opacity 0s ease;
}
```
I think it looks perfect now, thanks again!!

Page:

Home

This topic can be closed.
August 13, 2024 at 11:57 am #1464525

Rikard
Keymaster

Hi,

Thanks for the update and for sharing, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts