Page 1 of 1
Change Website Logo with OnScroll
Posted: Sat Feb 11, 2023 12:35 pm
by Dali
I want to show an logo when the page hasn't been scrolled yet (with a black background, but it doesn't matter).
When the page is scrolled down, a different logo should be displayed (it's basically the same thing but with a transparent background).
When the page is back in the scroll starting point, the first image should be displayed again.
Like on this page:
https://divi-tutorials.com
is this possible in WWB? If yes, how? I hope you can help me

Re: Change Website Logo with OnScroll
Posted: Sat Feb 11, 2023 1:48 pm
by Pablo
Re: Change Website Logo with OnScroll
Posted: Sat Feb 11, 2023 4:12 pm
by Dali
I will try it, okay, Thanks!!
Re: Change Website Logo with OnScroll
Posted: Sat Feb 11, 2023 11:26 pm
by Dali
Have tried for a long time. It is not possible.
This is not possible with the proposed solutions.
The image/logo should change when the website is scrolled up. If I scroll down the page, the first logo should be displayed again.
Similar to the rollover feature when I move the mouse over it.
Under the "Animations - Transitions" function, I can't find any way to change the image.
Under property I only find "background-image" but I don't understand what needs to be entered in the "Value" field.
That is very confusing.
I would like to get this effect, like on this website:
https://divi-tutorials.com
Here you can see that the logo changes when the page is scrolled up.
Re: Change Website Logo with OnScroll
Posted: Sun Feb 12, 2023 1:22 am
by BaconFries
Have tried for a long time. It is not possible. This is not possible with the proposed solutions.
It is possible as you can see with the following example template. Note it is
not exactly what you are asking but you will see it hides/shows the header when you scroll. The difference is you are wanting to use a logo (image) to the left were the example is text. So in theory the principle is the same
https://www.wysiwygwebbuilder.com/suppo ... world.html
Re: Change Website Logo with OnScroll
Posted: Sun Feb 12, 2023 8:15 am
by Pablo
Here's an example where the logo is hidden when you scroll by changing the opacity and scale:
https://www.wysiwygwebbuilder.com/suppo ... wizzy.html
Re: Change Website Logo with OnScroll
Posted: Sun Feb 12, 2023 2:40 pm
by crispy68
On the site you are looking at they are not swapping out 2 images for the logo. They are using the same image. All they did was apply a filter to the image when at the top to make it look white and then remove the filter when you scroll down.
Maybe this would work?
http://www.wysiwygwebbuilder.com/forum/ ... ix#p476666