Search…

X3 Photo Gallery Support Forums

Search…
 
tbp
Experienced
Topic Author
Posts: 25
Joined: 12 Apr 2020, 09:19

"Shrink" logo when scrolling

25 Jun 2020, 11:27

Hi Karl,

As you might know, I am using a rather large logo on my website. I have often seen the effect, that the logo start to "shrink" when scrolling down a website.
I really like this effect and therefore would like to ask you how I can achieve this effect using X3? 

Thanks,
Tom
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12166
Joined: 30 Sep 2006, 03:37

Re: "Shrink" logo when scrolling

26 Jun 2020, 00:52

Hi Thomas. I'm struggling a bit to see the point ... Your logo is attached top of screen, and as soon as one scrolls just past the logo height, it is out of view anyway. What is the point in shrinking the logo past this point? At best, you could achieve a shrink effect while scrolling from the very top until the logo is outside of scroll view. Also, you would have to user a transform:scale() CSS effect (not padding/margin), because you would not want to scale the logo while affecting the rest of the page ... That would cause "jerkiness".

Also, you should make sure to consider how it will look/work on all screen sizes.

It should not be too difficult to achieve. You would need a window scroll listener, which simply sets CSS transform scale on the logo element on scroll. Then when scroll gets past a certain value, the function doesn't do anything (you don't want to be triggering a rather heavy function all the time on page scroll).
 
tbp
Experienced
Topic Author
Posts: 25
Joined: 12 Apr 2020, 09:19

Re: "Shrink" logo when scrolling

26 Jun 2020, 03:12

Hi Karl,

To be honest: I simply like the effect when the image shrinks while scrolling. 
At best, you could achieve a shrink effect while scrolling from the very top until the logo is outside of scroll view.
That's exactly what I'd like to achieve.

Can you provide me with the necessary CSS code?

Thanks,
Tom
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12166
Joined: 30 Sep 2006, 03:37

Re: "Shrink" logo when scrolling

26 Jun 2020, 03:53

tbp wrote:Can you provide me with the necessary CSS code?
It will be Javascript. CSS alone can't make dynamic effects like that. Can you give me login to your panel? Else I am working in the dark.
 
tbp
Experienced
Topic Author
Posts: 25
Joined: 12 Apr 2020, 09:19

Re: "Shrink" logo when scrolling

26 Jun 2020, 04:21

Hi Karl,

just sent you a PM.

Thanks,
Tom