3 ms·

Any idea on how to build this? I am thinking about doing the same for emperors and kings etc etc. Not sure if there is a framework of some sort or just js+css.

• methodical 3y ago
  No need for a framework or anything of the sort as far as I see it. Establish your scale in some manner which can be converted to a distance relative to the top of the page and position the elements absolutely to their proportional position. You can use this same scale against the scrollY attribute to know where you are relative to the top (in this case for rendering the depth).
• Teichopsia 3y ago
  You could use intersection observer to check the position of an element. I can't remember if there was a native way of doing it in CSS (for some reason it's stored in memory that it was recently added to CSS)... The closest is scroll snap.
• jurgemaister 3y ago
  Have a look at transform-when[1]. It might suit your needs. Demo can be seen here[2]. [1] https://github.com/callumacrae/transform-when https://github.com/callumacrae/transform-when [2] https://web.archive.org/web/20171203224250/https://samknows.com/ https://web.archive.org/web/20171203224250/https://samknows....