6 ms·

JQuery Scroll Path - Scroll a page along a custom path

181 points by JoelBesada 15y ago

flexd 15y ago
That is really neat! I would get motion sickness if this catches on though! Too many websites with this would ruin it.
zxoq 15y ago
Does not work at all on Chrome on OSX. I can only scroll with the arrow keys. It also disables the back/forward gestures.
- deefour 15y ago
  Works great with Chrome 17 on Snow Leopard using my magic mouse, pc mouse with scroll wheel, magic track pad, and keyboard arrows. The 2 fingered back/forward gestures are instead used for horizontal scrolling (right or down progress further down the page, left or up move back up the page)
- samarudge 15y ago
  Same =(
- MattBearman 15y ago
  Works fine for me on Chrome OSX (17.0.963.79 and Lion 10.7.2 respectively)
intenex 15y ago
This is like web 1.0 ported to 2.0
- plorkyeran 15y ago
  Yeah, this reminds me of the sort of thing you'd find on DHTML gallery sites in the mid-90s.
fpp 15y ago
Should fit in nicely with HTML5 slides and online Powerpoint replacement - very neat, great that you added the display path feature.
tav 15y ago
You can also be the 988th kind person to tweet this. The use of the Tweet count to create the custom "tweet this" message is pretty cool.
- nascro 15y ago
  Since I have the DNT+ extension installed on Chrome 17 / OS X, the message reads, "Feel free to follow me on Twitter. You can also be a kind person and tweet this."
switz 15y ago
Really cool how it wraps around from front to back!
MattBearman 15y ago
I found this became even more awesome if you zoom out the max in your browser, turn on showing the scroll path and then go through the links. Try it!
- whalesalad 15y ago
  That was my first thought too: http://c.wsld.me/1N0d1K1V2q1m2Z0R0F1C http://c.wsld.me/1N0d1K1V2q1m2Z0R0F1C
avolcano 15y ago
This is oddly unsettling and a bit nauseating, at least scrolling through it with the trackpad. It's a cool effect, though.
- hrktb 15y ago
  Showing the path eases this feeling a lot, while accentuating the sensation of speed.
cbs 15y ago
My experience, in three parts: 1) JQuery scrolling this could be neat opens web page 2) OK, lets see this in action. Hits page down That seemed normal. Hits page down again Half the text of this part is outside the view port. Page down again Oh, now its all in frame. I don't really see whats going on here though. Hits page down again, nothing happens Well this is a bust. I can see you, little faux-scrollbar, why can't I go down and see the rest of the document. Clicks on scrollbar to drag it, nothing happens What the fuck little scrollbar? Refreshes page Hey, little scrollbar, you're working now! 3) lynx http://joelb.me/scrollpath/ http://joelb.me/scrollpath/ Wow, much, much, better. Simple, and so much faster to read all the content (the entire page fits into an 80x26 terminal)!
- rayhano 15y ago
  Thanks for the heads up! Note to self: highlight scroll path to alleviate user feeling of nausea.. :)
jan-hocevar 15y ago
Nice effect!
jeremyswank 15y ago
this has interesting possiblities. but i consider it broken unless/until it supports scrolling with the spacebar, like ever other web page. fyi, i'm on firefox 11 osx.
- JoelBesada 15y ago
  Spacebar scrolling is actually already implemented, not sure why it's not working for you.
talmand 15y ago
The demo needs a background with a clearer pattern so you can see the path actually being followed. With just text and the dark background it just seems like a slideshow with transitions.
- JoelBesada 15y ago
  That's a good point, thanks! At the moment, the background isn't actually being scrolled at all. If I were to apply a patterned background to the element that gets scrolled around, I'd have to increase its size so that the screen always stays inside of it. I'm also not sure how a background image would affect the performance of the rotations.
leeoniya 15y ago
on FF and Chrome nightly (and possibly others), click-holding the wheel and dragging is pretty broken or doesn't work at all. it's cool but not very usable, IMO.
Deestan 15y ago
I appreciate the beauty, but you are breaking the web when doing things like this. Some breakages: * PageUp and PageDown doesn't work. * Home and End doesn't work. * Long-clicking the scrollbar doesn't work A: Should react immediately, not on mouseup. * Long-clicking the scrollbar doesn't work B: Should rapidfire (like with holding down PageDown). * Middle-clicking the scroll wheel doesn't bring up the analog-ish scroller floater. (Using Chrome on Win7)
- artursapek 15y ago
  Inertial scrolling as well (Mac)
- JoelBesada 15y ago
  Thanks for bringing up these issues, I hadn't even thought of most of them and they should be easy to fix. About the middle-click scrolling thing, I've disabled it for now since there doesn't seem to be any way to actually make it work with the custom path. Also, please note that this is a very experimental plugin and should probably never be used on anything else than a personal site or presentation.
- user2459 15y ago
  Also doesn't degrade gracefully in case of no javascript.
  - JoelBesada 15y ago
    The demo doesn't, but any developer could easily set up a default layout for cases when Javascript is disabled.
- mkmcdonald 15y ago
  This should a warning to all over-enthusiastic designers/developers on the Internet. Please stop creating custom scrollbars. Web browsers already provide wonderful scrollbars.
  - vyrotek 15y ago
ehsanu1 15y ago
I think the effect on http://www.marketo.com/ http://www.marketo.com/ (no affiliation) works better. I get inertial scrolling for instance, just feels more natural.
bandydesign 15y ago
Very neat. Not at all iPad friendly. Jerky at best when you click the individual numbers and no scroll or gesture seems to get you going from one part to the next.
lbotos 15y ago
http://www.artofflightmovie.com/ http://www.artofflightmovie.com/ uses a similar effect but uses a native scrollbar.
redorb 15y ago
http://www.nike.com/jumpman23/aj2012/ http://www.nike.com/jumpman23/aj2012/ Best use I've seen.
- justwrote 15y ago
  another nice example: http://beetle.com/ http://beetle.com/
  - potatolicious 15y ago
    Ugh, I think this site really gives credence to the top poster's concerns: it's whiz-bang cool at the expense of actual usability. Chrome/Win7/Quad-Core i7 3.4GHz + 8GB DDR3 RAM and the whole thing chugs, to the point where the website is difficult to navigate and parse.
    - nantes 15y ago
      Huh, works pretty well for me. Chrome/Ubuntu 10.10/boring old Core Duo Mac Mini.
alantrick 15y ago
it's neat you can do that, but, I mean, why would you ever want to? maybe for art.
wildmXranat 15y ago
I got a bit nauseated from that.

181 points by JoelBesada 15y ago

flexd 15y ago

That is really neat! I would get motion sickness if this catches on though! Too many websites with this would ruin it.

zxoq 15y ago

Does not work at all on Chrome on OSX. I can only scroll with the arrow keys. It also disables the back/forward gestures.

deefour 15y ago
Works great with Chrome 17 on Snow Leopard using my magic mouse, pc mouse with scroll wheel, magic track pad, and keyboard arrows. The 2 fingered back/forward gestures are instead used for horizontal scrolling (right or down progress further down the page, left or up move back up the page)
samarudge 15y ago
Same =(
MattBearman 15y ago
Works fine for me on Chrome OSX (17.0.963.79 and Lion 10.7.2 respectively)

intenex 15y ago

This is like web 1.0 ported to 2.0

plorkyeran 15y ago
Yeah, this reminds me of the sort of thing you'd find on DHTML gallery sites in the mid-90s.

fpp 15y ago

Should fit in nicely with HTML5 slides and online Powerpoint replacement - very neat, great that you added the display path feature.

tav 15y ago

You can also be the 988th kind person to tweet this. The use of the Tweet count to create the custom "tweet this" message is pretty cool.

nascro 15y ago
Since I have the DNT+ extension installed on Chrome 17 / OS X, the message reads, "Feel free to follow me on Twitter. You can also be a kind person and tweet this."

switz 15y ago

Really cool how it wraps around from front to back!

MattBearman 15y ago

I found this became even more awesome if you zoom out the max in your browser, turn on showing the scroll path and then go through the links. Try it!

whalesalad 15y ago
That was my first thought too: http://c.wsld.me/1N0d1K1V2q1m2Z0R0F1C http://c.wsld.me/1N0d1K1V2q1m2Z0R0F1C

avolcano 15y ago

This is oddly unsettling and a bit nauseating, at least scrolling through it with the trackpad. It's a cool effect, though.

hrktb 15y ago
Showing the path eases this feeling a lot, while accentuating the sensation of speed.

cbs 15y ago

My experience, in three parts: 1) JQuery scrolling this could be neat opens web page 2) OK, lets see this in action. Hits page down That seemed normal. Hits page down again Half the text of this part is outside the view port. Page down again Oh, now its all in frame. I don't really see whats going on here though. Hits page down again, nothing happens Well this is a bust. I can see you, little faux-scrollbar, why can't I go down and see the rest of the document. Clicks on scrollbar to drag it, nothing happens What the fuck little scrollbar? Refreshes page Hey, little scrollbar, you're working now! 3) lynx http://joelb.me/scrollpath/ http://joelb.me/scrollpath/ Wow, much, much, better. Simple, and so much faster to read all the content (the entire page fits into an 80x26 terminal)!

rayhano 15y ago
Thanks for the heads up! Note to self: highlight scroll path to alleviate user feeling of nausea.. :)

jan-hocevar 15y ago

Nice effect!

jeremyswank 15y ago

this has interesting possiblities. but i consider it broken unless/until it supports scrolling with the spacebar, like ever other web page. fyi, i'm on firefox 11 osx.

JoelBesada 15y ago
Spacebar scrolling is actually already implemented, not sure why it's not working for you.

talmand 15y ago

The demo needs a background with a clearer pattern so you can see the path actually being followed. With just text and the dark background it just seems like a slideshow with transitions.

JoelBesada 15y ago
That's a good point, thanks! At the moment, the background isn't actually being scrolled at all. If I were to apply a patterned background to the element that gets scrolled around, I'd have to increase its size so that the screen always stays inside of it. I'm also not sure how a background image would affect the performance of the rotations.

leeoniya 15y ago

on FF and Chrome nightly (and possibly others), click-holding the wheel and dragging is pretty broken or doesn't work at all. it's cool but not very usable, IMO.

Deestan 15y ago

I appreciate the beauty, but you are breaking the web when doing things like this. Some breakages: * PageUp and PageDown doesn't work. * Home and End doesn't work. * Long-clicking the scrollbar doesn't work A: Should react immediately, not on mouseup. * Long-clicking the scrollbar doesn't work B: Should rapidfire (like with holding down PageDown). * Middle-clicking the scroll wheel doesn't bring up the analog-ish scroller floater. (Using Chrome on Win7)

artursapek 15y ago
Inertial scrolling as well (Mac)
JoelBesada 15y ago
Thanks for bringing up these issues, I hadn't even thought of most of them and they should be easy to fix. About the middle-click scrolling thing, I've disabled it for now since there doesn't seem to be any way to actually make it work with the custom path. Also, please note that this is a very experimental plugin and should probably never be used on anything else than a personal site or presentation.
user2459 15y ago
Also doesn't degrade gracefully in case of no javascript.
- JoelBesada 15y ago
  The demo doesn't, but any developer could easily set up a default layout for cases when Javascript is disabled.
mkmcdonald 15y ago
This should a warning to all over-enthusiastic designers/developers on the Internet. Please stop creating custom scrollbars. Web browsers already provide wonderful scrollbars.
- vyrotek 15y ago

ehsanu1 15y ago

I think the effect on http://www.marketo.com/ http://www.marketo.com/ (no affiliation) works better. I get inertial scrolling for instance, just feels more natural.

bandydesign 15y ago

Very neat. Not at all iPad friendly. Jerky at best when you click the individual numbers and no scroll or gesture seems to get you going from one part to the next.

lbotos 15y ago

http://www.artofflightmovie.com/ http://www.artofflightmovie.com/ uses a similar effect but uses a native scrollbar.

redorb 15y ago

http://www.nike.com/jumpman23/aj2012/ http://www.nike.com/jumpman23/aj2012/ Best use I've seen.

justwrote 15y ago
another nice example: http://beetle.com/ http://beetle.com/
- potatolicious 15y ago
  Ugh, I think this site really gives credence to the top poster's concerns: it's whiz-bang cool at the expense of actual usability. Chrome/Win7/Quad-Core i7 3.4GHz + 8GB DDR3 RAM and the whole thing chugs, to the point where the website is difficult to navigate and parse.
  - nantes 15y ago
    Huh, works pretty well for me. Chrome/Ubuntu 10.10/boring old Core Duo Mac Mini.

alantrick 15y ago

it's neat you can do that, but, I mean, why would you ever want to? maybe for art.

wildmXranat 15y ago

I got a bit nauseated from that.