| HN Mirror

Hey thanks for your response!

Please note that this response is only in the context of your home page desktop design on Firefox. I'd need to spend some additional time doing analysis on mobile and other browsers.

In my opinion, the main thing you want to do is not change responses to the user's systems native controls. This is an essential part the principal of least surprise - https://en.wikipedia.org/wiki/Principle_of_least_astonishmen...

In your case, my main problem with the design is two pieces, my scrollbar is missing until after the slide show and the animated pieces of the slide show don't move using the same "physics" principals as a bare html page in the same browser. The lack of a scroll bar (I have an optional setting on so it is always visible if present) means that I don't expect there to be additional content on the page. Then when I do try scrolling, ot feels like nothing is happening at all and then I hit some invisible threshold and the page scrolls _for_ me. This feels a little bit like lag, which in any other case would mean that my computer is breaking. That's a bad feeling.

In most cases I would suggest a medium scale redesign - save the font choices, the colors, and some of the layouts but go back to the drawing board on the user interactions. However I know that designs like this continue to be popular and so I'm going to have to keep working on them. I've found that there are some decent compromises out there. So here's what I would suggest:

1) For the transition between the final slide (pip 3) and the actual page content drop the fixed animation entirely. That content should simply be at the bottom of the page the entire time.

2) For the transitions between the 3 images of Venice (or wherever?), I think you're going to need to do a bit of playing around. Ideally the largest object on the screen should move in direct relation (and with a 1 to 1 ratio) to the scrollbar without any delay. The absolutist in me wants to say that you should just place the 3 images in a stack and be done with it, but I realize that's not eye catching enough for the audience you're targeting. In your case one option would be to consider the "largest object" to be the horizontal scan line where one image stops and the other image starts. But the problem there is that you're still going to have to do significant scroll jacking to get that transition point to move...

However, I think you can get an effect like this using transparency or opacity settings and some complex positioning. You might need JavaScript for slide transitions after the first, but I would have to actually build the thing to figure it out. I'll think about it overnight and let you know if I come up with anything! (No promises though!)

Another option might be to use background-clip: content-box; for the transitions and then some JS magic in-between slide transitions to change which image is in the foreground and which is in the background.

The text at the bottom would continue to switch in a slide show style I think. You would have to try it and see.

If you want to preserve the delay between slides, you'll need to add a somewhat large visual element to the design that continues to move as the user scrolls even while the image stays in place, but in this case, I'm not sure if that will be necessary.

None of those solutions will completely remove scroll event listeners, but they will bring the experience back significantly toward being in line with normal system interactions.

This feeling of lack of control vs perfect control is something I look for in the video games I play. I've come to believe that it is the single most important part of game design for me. Games like QWOP and Getting Over It play with this idea intentionally, while historical successes like Mario 64 and Soul Calibur have made waves in the gaming world specifically because their controls are so refined and fluid.

Sorry I wrote so much! I appreciate the work you're doing with this site and I wish you much success!