Logo Post Effect when scroll

[manuuug]

Hi,

I am finishing my portfolio and I have several queries. I’ve seen one thing. at

https://blancfestival.com/

And I found it interesting to see how the logo is. I found this website that explains how to achieve this effect

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

. So what I want is that when loading the page, the logo is blank and when scrolling it works. And only within the posts and not on the homepage.

I tried to do it on my own, but did not get good results. I hope you can help me!

Thanks a lot

Manu.

[SeaTheme]

Hi,

The invert doesn’t work on Safari and Firefox https://caniuse.com/?search=invert
The logo effect of blancfestival is not by the invert CSS either.
The logo effect is not an easy job, it is not included in the free support scope.

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[manuuug]

This reply has been marked as private.

[manuuug]

Hi!

I have managed to perform the effect on the main page. But how can I make the call in css to the .svg so that the effect can only be applied in some predefined posts?

Thank you.

[manuuug]

680 / 5000
Resultados de traducción
Hello again.

I’ve been working pretty hard on the inverted logo and I can’t quite reverse the logo. Yes, I have managed to invert the entire Header but the logo and menu only have not. In a web test I have managed to do it. But on its template it is impossible; apparently.
I found a website that does it through another css system (mix-blend-mode): https://markus.se/

On the other hand; I was searching the forum to find cases where a certain different color or something is applied to the svg logo and I found this post. Can it be related? Universal Color?
https://seatheme.net/forums/topic/change-the-logo-on-header-scroll/

I hope your help.
Thank you.

[SeaTheme]

Hi,

1. mix-blend-mode

Please add the custom CSS:

#header {
 mix-blend-mode: difference;
}

It will work for all pages of the website, the header bar should not be set BG color.

2. Universal Color?

It will change 2 types of color, it is different from mix-blend-mode
It will work only for the specified pages what is set Universal Color https://doc.seatheme.net/sea-content-builder-plugin/group-module/#scrolling-effect-changing-color

Regards

[manuuug]

Hello, thanks for your attention.

I think I did not explain myself well. The header effect had done it. But I have not managed to apply it only to the logo and the menu. Because when applying it; within the portfolios if I apply the “mix-blend-mode” effect the logo goes directly below the entire web; as if the z-index had the value of 0; but it’s not like that. I don’t really understand what the reason is.

And the other was solely as an idea of being able to make the call to the color change.

Thank you.

[SeaTheme]

Hi,

Please leave your website URL, thanks

Regards

[manuuug]

This reply has been marked as private.

[SeaTheme]

Thanks, do you want to stay the background color on the header bar?

[SeaTheme]

Please try to upload a PNG file instead of SVG for the logo.

[Author]

Posts