Hello friends!
I was looking at this website the other day:
https://www.mark-magazine.com/
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
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.