61–70 of 99 posts
I did a project a while back that takes advantage of this, as a way to show the folding an unfolding of brochures, I found it to work much better for this particular use case than WebGL here is the output http://gofoldit.com/abcdfegh and this is the tool where you create them http://gofoldit.com/demo
When I pinched to zoom in, it changed the folding state of the brochure.
Earlier quoted context omitted.
Parallax. My favorite implementation is on the homepage of Campo Santo's Firewatch game: https://www.firewatchgame.com/ Not only the parallax itself, but the creativity! They used semitransparent layers so that when you scroll it looks like there are specular reflections! (the glittery specks of light)
Interesting, it's laggy even on my M1 macbook + Firefox.
Earlier quoted context omitted.
Thanks for noticing that! The images aren't exactly pinned, but they're constrained based on the nativeWidth as a proportion of the window width, so they can appear to move behind the card but without showing their corners or edges. Getting them not to exceed the bounds was tough, since they're loaded on the fly. One other fun visual gag in this was changing the drop shadow blur amount based on z-order / z-position.…
A neat thing about this interface is that it often works to cycle through all the content at a particular selection level by just repeatedly clicking in the same place. Unfortunately, this doesn't work consistently (neither at 'toplevel' nor in the vertical list of subselections) but it's so close I wonder if you considered it and/or ended up deciding against it for some practical or designy reason. Either way this i…
The click-in-one-place cycle sprang from what I'd call a happy accident, after playing with several ways of handling where to put the section you just clicked away from. I realized it was a neat feature not to just send it back to where you had clicked, since that would lead to just A/B clicking, but to shuffle it to the bottom or right side of the deck. It works if you just repeatedly click on the second item. I don't think I could find a way to let a single click on the third item cycle through everything and act in a logically consistent way. A carousel, I guess, but that didn't seem to feel right, because then the next click might skip a bunch. I remember just thinking it might be fun for people to figure it out. I could've just left them alone and not had them reshuffle at all, but what fun would that be?! ;)
Also, twiddling with it sometimes, when I get a new device, I often find myself "missing one". To answer your question about design vs. practicality, this design probably just triggers my own OCD about getting everything arranged just right. I'd say that a lot of software I design is, accidentally, a way to usher users into my own OCD way of thinking about edge cases and make them dot their own i's (rather than repeatedly hammer them with error messages or something). And plus, I like easter egg designs that reveal themselves slowly, when people are actually noticing things. I assume most people don't try to click every entry on a website, so it's nice to leave a little extra to discover for those who do.
Thanks again, your comment made my night.
[1] Code, https://github.com/plurid/plurid
Sliders don't work on mobile
This is really cool, might even be helpful to have as a feature to have in browser dev tools, looking at the underlying structure of any page and how elements are nested, to figure out where most of the complexity lies.
I think Firefox actually used to have that, though it was removed: https://firefox-source-docs.mozilla.org/devtools-user/3d_vie...
I did a project a while back that takes advantage of this, as a way to show the folding an unfolding of brochures, I found it to work much better for this particular use case than WebGL here is the output http://gofoldit.com/abcdfegh and this is the tool where you create them http://gofoldit.com/demo
No HTTPS?