
Skrollr - parallax scrolling for the masses - parmgrewal
http://prinzhorn.github.com/skrollr/
======
simonsarris
It's a neat demo of some very nice capabilities, but let us please not go back
to the Flash era circa 2002 where designers tried to make their navigation as
nauseating as possible.

Or put another way, its worth remembering that just because you can
incorporate all of these effects does not mean you should. Some designs can be
very disorienting to some people.

~~~
mobweb
It would be kind of a boring demo if they just showed some very subtle and
barely noticeable effects. ;)

~~~
mediocregopher
I think he wasn't referring to the demo itself, which obviously should show
off as many nauseating effects as it has, but to future devs who might use
this library.

~~~
obtu
Encouraging its use “for the masses” has me worried.

------
Corun
This is very cool and all, but I just see it as another example of a web tech
demo that if rewritten for my 20 year old Super Nintendo would run with more
frames per second. There appears to be no hope in the near future for smooth
interaction on the web. WebGL can do the smooth web - But then it's not the
web, it's just javascript+opengl.

~~~
pharrington
Your SNES would absolutely _choke_ if it tried to output at higher resolution
than 512x448 interlaced. Hell, plenty of games had considerable slowdown with
less objects on screen than this demo had. Hyperbole doesn't get us anywhere.

Also, without profiling, it's hard to say if the slight choppiness is due to
the library itself not being optimized, the browser rendering engine not being
optimized, a combination of such, or other factors.

------
parkov
Here's a nice demo of a similar library called Scrollorama:
<http://johnpolacek.github.com/scrollorama/>

Skrollr is noteworthy because it's significantly smaller (5.5kb vs.
94kb+jQuery), and makes use of HTML5 data attributes for notation.

~~~
obtu
Also, strictly for parallax, here is jQuery.parallax which has a much classier
demo: <http://stephband.info/jparallax/>

------
ryanwhitney
Feels like scrolling with weights on my fingers.

------
some1else
It seems that the main demo is a bit too busy for Chrome.

I had similar issues trying to spice up a presentation website with
transitions and animations. The simpler examples[x] seem to be working much
better.

In my experience, Firefox and Chrome tend to perform very flakey when CSS3
transitions/animations are in question. It's like a random performance profile
is chosen every time the document loads. More often than not, the second time
to load the transitions/animations work great, as if the browser performed
some CSS JIT, but performance often drops again on consecutive loads.

I hope these features mature performance-wise, so we can start using them in
meaningful ways (and also survive the 2001-style abominations that are bound
to happen). I think it's sensible to use requestAnimationFrame[r] to determine
if the animations aren't performing well, and disable them accordingly.

[x]:
[https://github.com/Prinzhorn/skrollr/tree/master/examples#ex...](https://github.com/Prinzhorn/skrollr/tree/master/examples#examples)

[r]:
[https://developer.mozilla.org/en/DOM/window.requestAnimation...](https://developer.mozilla.org/en/DOM/window.requestAnimationFrame)

------
imperialWicket
I think if this is used with appropriate limitations and caution, it can add
to a site's presence in a positive way. All the UI concerns already listed are
definitely valid, though - it's easy to take this too far.

There are quite a few decent parallax scripts/libs out there, but most of them
rely on scrolling (like Skrollr) or cursor position tracking (github's 404
page). Am I the only one who likes to be able to page through parallax with
buttons?

------
duncanbojangles
Brilliant demo! I did think this was going to be about old school side
scrolling games, though, but I was not disappointed!

~~~
mitjak
If you liked it check out the Transformer Prime page:

<http://eee.asus.com/eeepad/transformer-prime/features/>

It starts off with a typical terrible "people you would never see use an Asus
product" photo and quickly gets very cool.

~~~
dsmithn
Here's another well done one:
<http://www.nintendo.com.au/gamesites/mariokartwii/#snes>

------
graue
Surely I can't be the only one who prefers PageUp/PageDown to flip through
webpages? This breaks PageDown pretty badly.

------
zoop
both smooth scrolling and non smooth scrolling modes are very choppy for me. I
think it has something to do with the large CSS3 transforms.

2.8 quad core, os x, chrome 19.0.1084.56

~~~
darkstalker
works fine on firefox 13, core2 1.8ghz, integrated intel gpu

------
makmanalp
I get whole screen "blink"s on OSX 10.7 chrome 19, especially in the beginning
when boxes of text are moving in an out. Just when you think one is out, it
flashes in for a second and disappears. Probably an off-by-1 or something?

~~~
arjunnarayan
It seems a little broken (and flickery) on Chrome in OS X. It worked great in
Firefox and Safari.

~~~
RBerenguel
Worked neatly in my Chrome (latest version non-dev available,) Mac OS 10.6.8

------
5vforest
I like it, but the demo doesn't really do it justice. I would slow everything
down a bit (missed most of the transformations on my first pass, they happened
way too quickly), and maybe work on styling a bit more.

------
gaius
Now _this_ is how you do parallax <http://www.youtube.com/watch?v=He4Cmkakk4g>
:-)

------
Kerrick
Looks like SuperScrollOrama. <http://johnpolacek.github.com/superscrollorama/>

------
vivianhui
I probably shouldn't have looked at this on an iPad...

------
esbwhat
All those parallax sites aren't as impressive if you have smooth scrolling
disabled

------
josscrowcroft
A call for parallax scrolling sanity: "Oh God, My Eyes!!!"

Neat script though.

------
taude
One of the better JS libraries I've seen lately!

------
jastr
reminds me of <http://2011.beercamp.com/>

~~~
derpmeister
Skrollr is pretty smooth on my system but that page is _terribly_ laggy and
all pixely when you scroll. It's not even readable because everything just
lumps together.

------
brittohalloran
Perfect thing for a HN demo

------
antimora
it made me dizzy =)

------
jsavimbi
I have yet to receive a request for parallax. And we I do I will kindly point
them in the direction of any marketing firm who knows nothing about usability
or implementation.

~~~
sadga
The same ones that put contact information in an image so you can't select and
copy it, and hide that image behind a transparent div, so you can't even
download it. Ugh.

~~~
jsavimbi
Yes, those ones.

------
drivebyacct2
(I ask this as a Mac owner), but I have to wonder how many of the "Wow,
Awesome" posts come from Mac users with proper smooth scrolling. It's just
awkward on a Windows machine. I was hoping for something parallaxy like
Github's 404 pages.

I guess I'm on a mouse now, but even on my last laptop, the "smooth scrolling"
was the regular 20px jump scrolling but with smoothing between jumps which
would seem to make this still fairly jumpy.

~~~
Genmutant
Works smooth for me (Laptop, i7 Quad, Win 7, Firefox 14)

~~~
nilliams
I think the parent is referring to the actual scrolling mechanic of the
browser with a standard mouse-wheel rather than a performance issue.

~~~
Genmutant
I didn't think of that - I actually have a Logitech mouse where I can switch
between the clicking scrolling and the freewheeling.

~~~
drivebyacct2
Even then, in Windows, you can't scroll pixel by pixel can you? I'm not sure
if you're familiar with Apple touchpads, but I've never seen anything emulate
their ability to scroll at literally continuous increments. Even with my
Logitech (that also switches) "free wheeling" still has a minimum increment.
It's configurable, but it's just "jumping" relative to the Apple Trackpad
mechanic.

~~~
Wilduck
Click and hold the center mouse button (scroll wheel). Notice the four arrows
that pop up. While still holding the center button down, move the mouse
up/down, and you'll scroll smoothly. I use this whenever I'm away from my mac.

~~~
drivebyacct2
Well now I feel sufficiently stupid. I haven't used that in ages, even at work
or on my desktop. Hm.

------
mrose
Always nice to see the bounds of UI scripting being pushed to the browser's
limit. I won't be surprised to see some of these position manipulation
paradigms integrated into the core browsing experience (in sort of a jQuery-
esque fashion) in the near future.

Nice choice with the name as well. Easy to rememeber and has a good typing
rhythm.

------
tvandervossen
THIS IS THE AWESOME!

