3 ms·
I was 20 minutes into this before I realized the interactive bits were automatically turning themselves off and on based on which one was visible in the viewpor
by apitman 4y ago
I was 20 minutes into this before I realized the interactive bits were automatically turning themselves off and on based on which one was visible in the viewport. That seems obvious, but the fact that it worked so intuitively and without bugs on my system says a great deal. This is what master UX design looks like.
- lelandfe 4y agoThat it all worked perfectly on my phone is testament to a ton of testing.
- mixmastamyk 4y agoIt’s a few lines of standard JavaScript. Nice touch used by many sites, not difficult.
- behnamoh 4y ago> not difficult. And yet, not so common especially on popular websites with $$$ development costs.
- mixmastamyk 4y agoSomeone has to care enough to notice, often the case.
- pigcat 4y agoHow is it done? Could you point to the section of code in the source code?
- harrisi 4y agoThe relevant few lines are these: if ("IntersectionObserver" in window) { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { entry.target.drawer.set_visible(entry.isIntersecting); }) }, { rootMargin: "300px" }) all_containers.forEach(container => observer.observe(container)); } else { all_containers.forEach(container => container.drawer.set_visible(true)); } You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersectio... As a side note, all of the code is very pleasant to read. It's interesting that it's seemingly (almost) all hand-written, given that there are commented-out rules in the CSS, for example. I'm not sure what's going on with the HTML though, probably some custom generator.
- pigcat 4y agoThanks!