Understanding some code!

Hello friends!

I was looking at this website the other day:


I really like the way the heading gets smaller as you scroll down the page. I was looking for the part of the CSS where that happens and how it works but I couldn’t find it. Can anyone help?

Thank you!


That’s great.
I inspected that website, I see width height and top of Logo changes when scroll.
I think key word for this animation is: document.body.scrollTop and event scroll

1 Like

Thanks Sai!

I’m pretty new to HTML and CSS - would this animation be something you could do in CSS? Or would you have to do it in Javascript or something like that?

I think this task is quite complicated, I wrote a quick demo in codepen (click here) for you can imagine how Scroll works and Logo scales (by % or pixel).
Need more time to complete perfectly feature of header on mark-magazine.com.

1 Like