Space.js – HTML-driven narrative 3D-scrolling

http://www.slashie.org/space.js/

by gothep • 11 years ago

54 22 11 years ago

Great work and useful examples that shows how much richer the web has become since the dark old days when <blink> and <marquee> was the only options to make your web page eye-catching.

laumars• 11 years ago

Don't forget animated GIFs. A staple for any mid-90s site

blackle• 11 years ago

You mean annoying? There are better ways to make a website stand out than to override default scroll behaviour. Websites like these tend to make me queasy, since I expect the screen to move down, not forward.

If you're going to make transitions like these, they should be initiated by something else, like the keyboard or buttons. The scroll bar was specifically designed for browsing vertical documents, not rocketing through spacetime.

wahsd• 11 years ago

I am sure this could be used in creative ways, but how is this not essentially manual stop-motion video? It's amazing that technology has progressed so much that now I can manually flip through stop-motion visualization. Let's call it a flip-book.

Mahn• 11 years ago

It's definitively an interesting demo, but not the kind of thing one looks forward to when trying to scroll on a page with the purpose of reading it.

ape4• 11 years ago

April Fools?

delluminatus• 11 years ago

Definitely. Try clicking through to the article:

We generally use web pages as our canvases and paint content on the x– and y-axises. This is our tangible abstraction of reality. Here we are going to explore what happens when we introduce z-axis to content presentation. Instead of stripping down reality to a plane, we are going to simplify it, keeping our three physical dimensions but only their minimal essence.

untog• 11 years ago

It reads as a joke until you see it on a startup's about page.

_Adam• 11 years ago

Assuming this isn't an April Fools joke...

This kind of interface creates a terrible user experience. I've seen them before, and they always suck. The main issue is that you remove all context from the interaction. I don't know where I am relative to the entirety of the content. Furthermore, I can't jump to the point that I want.

It's disorienting and infuriating, and after about 10 seconds of exercising my middle finger (in multiple ways), I close the tab and add the site to my mental list of "examples of shitty UX".

Fortunately, this isn't the first such example, so I can provide solid evidence of how horrible this concept is. Ironically, it's the Famo.us Angular integration documentation...

https://famo.us/integrations/angular/#/1

kenbellows• 11 years ago

Not disagreeing with your overall point regarding the usefulness UX of this sort of interface, but unlike the Famo.us demo, Space.js seems to maintain the scroll bar on the right window edge, which allows you to keep a sense of where you are within the document and to jump where you want within it. Also, the down arrow alleviates the strain on your middle finger nicely, as will clicking and dragging the scroll bar.

bpg_92• 11 years ago

Well, it is called Space.js and in the main page it says: No js required. I am missing something here?

thebouv• 11 years ago

I think he means no writing of JS required to use it. Include the library, and just use HTML to do the rest.

I agree though, bad use of saying "no js required".

chaosfactor• 11 years ago

It's funny because I actually kind of like it.

Mithaldu• 11 years ago

Aside from the fact this hits Poe's Law so hard that it is impossible to tell whether it's an April Fools joke, i am pleased that it degrades somewhat gracefully without JS:

https://dl.dropboxusercontent.com/u/10190786/no-js.png

And becomes downright usable and pleasant without CSS:

https://dl.dropboxusercontent.com/u/10190786/no-css.png

matthewrhoden1• 11 years ago

I don't have smooth scrolling, so these types of things are always jumpy and not very enjoyable.

thejaredhooper• 11 years ago

I've been thinking about implementing a sort of slideshow like this.

I could definitely see this being extended, contained within a frame and used (by intercepting and mimicking scroll actions) in order to present a slideshow in a smooth, consistent manner.

By itself, it's novel. But extended, I could see a few uses for it.

Interesting idea, degrades pretty well (for text only), and I enjoyed scrolling through smoothly with middle-click.

aridiculous• 11 years ago

These comments are very narrow-minded and hostile.

This is wonderful execution. It's really hard to create something that's so easy to use. Its API looks surprisingly elegant.

As for the use cases and UX, remember that there's many types of projects. This could be used in a way that helps the UX for some kinds of experiences.

Just because this would be bad for your work, or the sites you like to go to, doesn't mean it's not a perfect fit for certain experiences.

Kudos.

Aeolun• 11 years ago

I don't question the technical achievement. This is just a prime example of 'Being so concerned with whether or not they could, that they didn't stop to consider whether they should.'

Also, even if I were to want to use it, it's too heavily dependent on scroll speed. It's completely unusable on my computer unless I use the down arrow.

extc• 11 years ago

http://bartaz.github.io/impress.js/

krebby• 11 years ago

There are ways of doing scroll-based storytelling right but this ain't it. This library does have the right idea that scrolling should be continuous, but if you over- or underscroll the content you get trapped in a weird middle ground of a tween between two states, and it's frustrating to exactly line up your viewport to the content so it's readable.

Mike Bostock wrote a pretty good post about scroll-based storytelling last year: http://bost.ocks.org/mike/scroll/ https://news.ycombinator.com/item?id=8551724

bengali3• 11 years ago

Heres a great storytelling example from http://bost.ocks.org/mike/

http://www.nytimes.com/newsgraphics/2013/10/27/south-china- sea/

Bumbaclotmon• 11 years ago

It isn't as good as this one, that happens to also implement acceleration: http://okmove.tumblr.com/ (and it was made years ago by the folks who designed soylent packaging).

Space.js – HTML-driven narrative 3D-scrolling

Related Stories