JQuery Scroll Path - Scroll a page along a custom path

by JoelBesada • 14 years ago

181 45 14 years ago

flexd• 14 years ago

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

zxoq• 14 years 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• 14 years 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• 14 years ago

Same =(

MattBearman2• 14 years ago

Works fine for me on Chrome OSX (17.0.963.79 and Lion 10.7.2 respectively)

intenex• 14 years ago

This is like web 1.0 ported to 2.0

plorkyeran• 14 years ago

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

fpp• 14 years ago

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

tav• 14 years 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• 14 years 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• 14 years ago

Really cool how it wraps around from front to back!

MattBearman2• 14 years 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• 14 years ago

That was my first thought too:

http://c.wsld.me/1N0d1K1V2q1m2Z0R0F1C

avolcano• 14 years ago

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

hrktb• 14 years ago

Showing the path eases this feeling a lot, while accentuating the sensation of speed.

cbs• 14 years 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/ Wow, much, much, better. Simple, and so much faster to read all the content (the entire page fits into an 80x26 terminal)!

rayhano• 14 years ago

Thanks for the heads up!

Note to self: highlight scroll path to alleviate user feeling of nausea.. :)

jan-hocevar• 14 years ago

Nice effect!

jeremyswank• 14 years 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.

JoelBesada4• 14 years ago

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

talmand• 14 years 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.

JoelBesada4• 14 years 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• 14 years 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• 14 years 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• 14 years ago

Inertial scrolling as well (Mac)

JoelBesada4• 14 years 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• 14 years ago

Also doesn't degrade gracefully in case of no javascript.

JoelBesada4• 14 years ago

The demo doesn't, but any developer could easily set up a default layout for cases when Javascript is disabled.

mkmcdonald3• 14 years 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• 14 years ago

I find it interesting that Gmail has custom scroll bars.

cobychapple• 14 years ago

Do you really think discouraging enthusiastic designers and developers from building innovative things that push the boundaries of what's possible with browsers is the way forward?

... for the sake of preserving the status quo of default scrollbars, no less?

Come on.

ThomPete• 14 years ago

This is completely missing the point of demos like these.

It doesn't matter whether it breaks the web. It also shows new ways of thinking.

Dont forget that whatever is currently the "rule" is always in flux.

I for one hope that people will continue to "break the web" like this.

ehsanu1• 14 years ago

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

bandydesign• 14 years 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• 14 years ago

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

redorb• 14 years ago

http://www.nike.com/jumpman23/aj2012/

Best use I've seen.

justwrote• 14 years ago

another nice example: http://beetle.com/

potatolicious• 14 years 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.

alantrick• 14 years ago

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

maybe for art.

wildmXranat• 14 years ago

I got a bit nauseated from that.

JQuery Scroll Path - Scroll a page along a custom path

Related Stories