Hacker News new | ask | show | jobs
by ayushgta 4047 days ago
It is really interesting how the bottom part of the text fades away progressively. It elicits an emotive reaction to want to scroll further down. Well done!

I can't spot any css, fixed divs etc. Thoughts on how that is being done?

2 comments

On the other hand, it slightly annoyed me, I guess for a very specific reason, which I'll state in case anyone finds it interesting. I'm nearsighted and wear glasses; as I often do, I was using my laptop with my glasses off, because taking them off moves my default focus point closer and thus lets me focus on nearby objects with less eye strain. However, the result goes a bit too far in the opposite direction and I need to keep the laptop closer to my face than normal to be able to focus on the screen, which means the high-detail center of my field of view covers less of the screen than typical and I have to move my head slightly to shift it. On top of that, when I started reading the article, in an unconscious attempt to focus on the text, I had leaned forward to move my head even closer... And so I had been reading using solely a paragraph or two of space, which happened to be at the bottom of the screen (gently scrolling the trackpad to continue - this is way more precise than using a mouse scroll wheel, by the way)... for the first part of the article; then that space suddenly became half greyed out, and the required head movement to switch to reading higher up was unusual enough to bubble its way into conscious thought.

Oh, and I guess it doesn't help that a fade to white at the bottom of the screen is also what the NYTimes paywall does when you've run out of free articles - I have a paid subscription, but sometimes I get logged out. This has happened often enough to cause me to form a mental association between the bottom of a NYTimes article suddenly greying out and the annoying act of logging in. Pretty pedantic complaint, I know.

I wonder if I'm the only dev who completely ignored the presentation and just enjoyed the story!
It's done with an opacity transition on the element: https://i.imgur.com/6Wq71pH.png
It is actually an after CSS selector with fixed position and a linear gradient background. Pretty clever! Here is a JS Fiddle which shows just that bit: http://jsfiddle.net/wyx7zogo/