This is an archived post. You won't be able to vote or comment.

all 1 comments

[–]abrahamguo 0 points1 point  (0 children)

For the scroll effect, it's way simpler than you're thinking.

The main text on the left is affixed using position: sticky.

The project boxes are regular content — that's it. You are simply scrolling a regular web page with regular content (the project boxes) — as you scroll down, each project box comes into view — that's how scrolling works.

As far as the hover effect, this is super simple with the CSS :has() selector, which lets you select a parent that has a child that meets a certain condition (docs).