9 ms·
Scroll This
- bicknergseng 13y agoFun. Would be a neat alternative to parallax on desktop web too.
- rayhano 13y agoLove this. But would prefer the icons to not shrink. Keep it simple with the bend.
- jreposa 13y agoOnly one improvment for me: It should bounce at the top and bottom!
- cpeterso 13y agoI think Apple has a patent related to iOS' "snapback" scrolling and that's why Android switched to using the awkward "blue glow" scroll effect.
- ovis 13y agoThis is cute. But does it affect readability if the page being scrolled is text?
- emp_ 13y agoQuickly added text to it: http://codepen.io/anon/full/JiCpj http://codepen.io/anon/full/JiCpj
- Fuzzwah 13y agoThis could be a fun control mechanism for a game too. The idea which popped into my head was "pulling down" on the screen to initiate a ball rolling from the left of the screen into the divot you're making, then letting go so that the surface the ball is rolling on springs back up, sending the ball flying.
- akshayagarwal 13y agoThis sounds really interesting!
- antsar 13y agoSounds similar to the experience of launching a virtual pinball. Could be fun to play for sure, depending on the rest of the game.
- janeglendale 13y agoReally freakin' cool, however it feels weird on mobile since there's no momentum scrolling with it. I just stops (and has the jelly effect).
- shurcooL 13y agoIt has momentum for me, when using the trackpad to scroll on OS X.
- electronous 13y agoIt looks like the lines bend the wrong way. I would expect everything to bend down when I scroll up, but it does the opposite. Very strange.
- deleted 13y ago[deleted]
- 3Pi 13y agoThere is a control in the top right corner that lets you change which way the lines bend. edit: This does not show up in IE
- publicfig 13y agoIt's to match where your finger would be when scrolling. On a touch device/mouse using natural scrolling it would go the direction you expect. Using traditional/inverse scrolling does the opposite.
- JoshTriplett 13y agoCute, in much the same way wobbly windows are cute. Somewhat odd when scrolling via keyboard, though, since the "force" applied is always fixed.
- shurcooL 13y agoThis is neat, but really disappointing that there is no feedback when you're at the top/bottom and try to scroll further. It'd be so natural to have this bouncy effect happen in-place to let you know you've reached the end.
- lukeholder 13y ago"really disappointing" ?? another example of the HN changes around here.
- mistercow 13y agoI think shurcooL's comment probably came across differently than s/he intended it. I think it was intended not as an expression of disapproval for the author, but rather as a description of how it feels as a user to scroll to the edge and not see it react in the satisfying way anticipated. Interpreted that way, it's fine constructive feedback. But it's easy to see how it would be taken as a self-entitled complaint.
- shurcooL 13y agoYep, that was my intention.
- shurcooL 13y agoI think you misunderstand what I'm trying to say. What I say is that it's very disappointing that this demo goes 95% of the way to create something AWESOME, but those 5% it goes short are very stark and unfortunate. It's like a brand new Ferrari with a scratch. Wouldn't that be disappointing? Even though it's a Ferrari which is awesome. The problem is that feelings are 95% positive and 5% negative, but my comment is 50/50. So it may seem that I'm being negative, when in fact I'm 95% positive. Hence those missing 5% are so disappointing. Great job though, it's really neat (this goes without saying...). Edit: The reason I talk about the negative is because it can be made better. I find it less useful to talk about positive because it's already good, so there's nothing to be done.
- BlakePetersen 13y ago
- pouzy 13y agoCute indeed, but not sure that it's the right era anymore for jelly-looking things ?
- SimHacker 13y agoFlat Jelly: http://en.wikipedia.org/wiki/Fruit_Roll-Ups http://en.wikipedia.org/wiki/Fruit_Roll-Ups
- bryanjclark 13y agoNike had this interaction a good while ago: http://capptivate.co/tag/nike/ http://capptivate.co/tag/nike/
- slosh 13y agoI like teh design
- zalzane 13y agoDon't forget to patent it and sue everyone who uses it, OP. suggestion: seems to only be one level of bounciness, and it only applies at the end of the scroll. itd be cool to see the screen morph while the scroll occurs as a function of the velocity of the scroll, and giving a bounce that's appropriate to the change in velocity.
- throwawaykf02 13y agoToo late. Windows Phone uses similar "stretchiness" (but less cutesy) to indicate over-scroll. It cleverly presents an effect comparable to the rubber banding in iOS without, as far as I can tell, infringing Apple's patent. And yes, Microsoft has patented it.
- vxNsr 13y agoI actually thought the WP thing was Microsoft cross licensing Apple's stuff (circa 1997 agreement), I don't get how it's any different from iOS. (I originally had an iphone and recently traded it in for a WP)... How is it different?
- throwawaykf02 13y agoIf you read the claims in Apples rubber banding patent, they specifically include "displaying an area beyond the edge of the document" (in iOS, the gray linen background) when you over scroll. Thus, instead of jarringly stopping at the edge without any indication that a boundary has been reached, the document keeps scrolling with your finger. Windows Phone, however, does not show an "area beyond the edge" on over scrolling; instead, it anchors one edge of the document at the boundary, and subtly "stretches" the rest of the document to follow your finger. The effect is like trying to pull down an elastic sheet of paper. This indicates that the boundary has been reached, but without showing a separate "area beyond the edge". As such, it achieves an effect as intuitive as iOS's, but without infringing the claims. (Yes, you really have to be the pedantic when evaluating claims.) I'm pretty sure this effect came about because Microsoft wanted to work around the Apple patent. However, some sort of cross license, if not the one from the 90s, is apparently in place as well. Some UI elements in WP do infringe other Apple patents, such as the "disappearing scroll bar" one.
- deleted 13y ago[deleted]
- ambrop7 13y agoIt's a scroll bar with the contents wobbling as you scroll it. What am I missing, how is this useful?
- null_ptr 13y agoIt's a cool demo that's fun to play with. Cool demos like this can spark people's imaginations, that's how it's useful.
- minor_nitwit 13y agoI like it very creative. It should ripple when you strike the bottom.
- jyz 13y agowhy is china a box of rice? :D
- deleted 13y ago[deleted]
- Kiro 13y agoLags a lot on my phone (Samsung Galaxy S3, stock browser).
- professorTuring 13y agoWell I don't really found it useful. Ok, it's cute; I will give you this, but... I have used different desktops and I have used every bell & whistle available. And I have really enjoyed them, sure, but just for three or four days. I think there's a lot of movement in that scroll, it's battery consuming, and it just doesn't provide any help for the user. But don't get me wrong, I think it's a nice project to test your design skills, keep up working =)
- akshayagarwal 13y agoDisclaimer: I didn't build this. Its something cute that I found and shared.
- kilian 13y agoFor those interested in how it's made, there's a great writeup here on Smashing Magazine: http://coding.smashingmagazine.com/2013/08/15/jelly-navigation-menu-canvas-paperjs/ http://coding.smashingmagazine.com/2013/08/15/jelly-navigati...
- pg1 13y agoLove it.
- rglover 13y agoThis would be really fun in an app for kids.