Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Scroll This (codepen.io)
163 points by akshayagarwal on Aug 21, 2013 | hide | past | favorite | 45 comments


Don'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.


Too 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.


I 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?


If 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.


Thanks for the explanation.

I wish they'd cross license the Universal search thing, it'd be really nice because there's a dedicated search button on every phone.


Technically doesn't this imply they've already published it and put it in the public domain?


This 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.


> This is neat, but really disappointing that there is no feedback when…

Here's how you can say the same in a more positive manner:

> This is neat, and it would be even better if there was feedback when…

To keep up the hacker spirit, I find it amusing that the words "but" and "and" are logically equivalent (i.e. they both are representations of the logical ∧ operator), just with different connotations. :)

(Edit: It's actually a social hack to say your negatively toned "but" phrase with a positive "and" instead.)


"really disappointing" ??

another example of the HN changes around here.


I 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.


I 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.


Yep, that was my intention.


Booo this man. Its 'really disappointing' seeing someone complain about amazing free open code they're able to contribute to. Its great to offer feedback but you can do so without implying some sort of entitlement. Come on now...


the meaningless boosting around here is fucking weird - negative feedback is crucial to stuff getting anywhere. calling anything besides praise 'disappointing' is the best way to create a completely ossified creative field, i.e. the complete opposite of the 'hacker' ethic worshipped round here. besides, this guy isn't even being particularly critical


Nike had this interaction a good while ago: http://capptivate.co/tag/nike/


This looks to be a web implementation of the Nike iOS native implementation.


They're actually videos of the Nike iOS native implementation.


Only one improvment for me: It should bounce at the top and bottom!


I think Apple has a patent related to iOS' "snapback" scrolling and that's why Android switched to using the awkward "blue glow" scroll effect.


Cute, in much the same way wobbly windows are cute.

Somewhat odd when scrolling via keyboard, though, since the "force" applied is always fixed.


For those interested in how it's made, there's a great writeup here on Smashing Magazine: http://coding.smashingmagazine.com/2013/08/15/jelly-navigati...


This 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.


Sounds similar to the experience of launching a virtual pinball. Could be fun to play for sure, depending on the rest of the game.


This sounds really interesting!


Well 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 =)


I like it very creative. It should ripple when you strike the bottom.


Really freakin' cool, however it feels weird on mobile since there's no momentum scrolling with it. I just stops (and has the jelly effect).


It has momentum for me, when using the trackpad to scroll on OS X.


Cute indeed, but not sure that it's the right era anymore for jelly-looking things ?



Disclaimer: I didn't build this. Its something cute that I found and shared.


This is cute. But does it affect readability if the page being scrolled is text?


Quickly added text to it: http://codepen.io/anon/full/JiCpj


Love this.

But would prefer the icons to not shrink. Keep it simple with the bend.


Fun. Would be a neat alternative to parallax on desktop web too.


Lags a lot on my phone (Samsung Galaxy S3, stock browser).


This would be really fun in an app for kids.


why is china a box of rice? :D


Love it.


It 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.


It'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.


There 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


I like teh design


It's a scroll bar with the contents wobbling as you scroll it. What am I missing, how is this useful?


It'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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: