7 ms·

Skrollr - parallax scrolling for the masses

177 points by parmgrewal 14y ago

taude 14y ago
One of the better JS libraries I've seen lately!
zoop 14y ago
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 14y ago
  works fine on firefox 13, core2 1.8ghz, integrated intel gpu
duncanbojangles 14y ago
Brilliant demo! I did think this was going to be about old school side scrolling games, though, but I was not disappointed!
- mitjak 14y ago
  If you liked it check out the Transformer Prime page: http://eee.asus.com/eeepad/transformer-prime/features/ 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 14y ago
    Here's another well done one: http://www.nintendo.com.au/gamesites/mariokartwii/#snes http://www.nintendo.com.au/gamesites/mariokartwii/#snes
mrose 14y ago
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.
brittohalloran 14y ago
Perfect thing for a HN demo
parkov 14y ago
Here's a nice demo of a similar library called Scrollorama: http://johnpolacek.github.com/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 14y ago
  Also, strictly for parallax, here is jQuery.parallax which has a much classier demo: http://stephband.info/jparallax/ http://stephband.info/jparallax/
ryanwhitney 14y ago
Feels like scrolling with weights on my fingers.
5vforest 14y ago
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.
tvandervossen 14y ago
THIS IS THE AWESOME!
drivebyacct2 14y ago
(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 14y ago
  Works smooth for me (Laptop, i7 Quad, Win 7, Firefox 14)
  - nilliams 14y ago
    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 14y ago
      I didn't think of that - I actually have a Logitech mouse where I can switch between the clicking scrolling and the freewheeling.
      - drivebyacct2 14y ago
        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 14y ago
        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.
simonsarris 14y ago
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 14y ago
  It would be kind of a boring demo if they just showed some very subtle and barely noticeable effects. ;)
  - mediocregopher 14y ago
    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 14y ago
      Encouraging its use “for the masses” has me worried.
- patrickaljord 14y ago
  Let us please not have this kind of comments on HN _every_ single time a css3 animation demo makes it to the front page...
- ericcholis 14y ago
  "Just because you can use a hammer doesn't mean you can build a house" You're right, the dreaded Flash sites of four years ago haunt me every day. However, I've seen some outstanding designs using these techniques. They were outstanding because they were done by professional interface designers. Put these tools in the right hands, and you'll get amazing results.
Kerrick 14y ago
Looks like SuperScrollOrama. http://johnpolacek.github.com/superscrollorama/ http://johnpolacek.github.com/superscrollorama/
makmanalp 14y ago
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 14y ago
  It seems a little broken (and flickery) on Chrome in OS X. It worked great in Firefox and Safari.
  - RBerenguel 14y ago
    Worked neatly in my Chrome (latest version non-dev available,) Mac OS 10.6.8
jsavimbi 14y ago
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 14y ago
  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 14y ago
    Yes, those ones.
josscrowcroft 14y ago
A call for parallax scrolling sanity: "Oh God, My Eyes!!!" Neat script though.
imperialWicket 14y ago
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?
esbwhat 14y ago
All those parallax sites aren't as impressive if you have smooth scrolling disabled
jastr 14y ago
reminds me of http://2011.beercamp.com/ http://2011.beercamp.com/
- derpmeister 14y ago
  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.
Corun 14y ago
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 14y ago
  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.
gaius 14y ago
Now this is how you do parallax http://www.youtube.com/watch?v=He4Cmkakk4g http://www.youtube.com/watch?v=He4Cmkakk4g :-)
graue 14y ago
Surely I can't be the only one who prefers PageUp/PageDown to flip through webpages? This breaks PageDown pretty badly.
antimora 14y ago
it made me dizzy =)
vivianhui 14y ago
I probably shouldn't have looked at this on an iPad...
some1else 14y ago
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#examples https://github.com/Prinzhorn/skrollr/tree/master/examples#ex... [r]: https://developer.mozilla.org/en/DOM/window.requestAnimationFrame https://developer.mozilla.org/en/DOM/window.requestAnimation...

177 points by parmgrewal 14y ago

taude 14y ago

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

zoop 14y ago

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 14y ago
works fine on firefox 13, core2 1.8ghz, integrated intel gpu

duncanbojangles 14y ago

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

mitjak 14y ago
If you liked it check out the Transformer Prime page: http://eee.asus.com/eeepad/transformer-prime/features/ 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 14y ago
  Here's another well done one: http://www.nintendo.com.au/gamesites/mariokartwii/#snes http://www.nintendo.com.au/gamesites/mariokartwii/#snes

mrose 14y ago

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.

brittohalloran 14y ago

Perfect thing for a HN demo

parkov 14y ago

Here's a nice demo of a similar library called Scrollorama: http://johnpolacek.github.com/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 14y ago
Also, strictly for parallax, here is jQuery.parallax which has a much classier demo: http://stephband.info/jparallax/ http://stephband.info/jparallax/

ryanwhitney 14y ago

Feels like scrolling with weights on my fingers.

5vforest 14y ago

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.

tvandervossen 14y ago

THIS IS THE AWESOME!

drivebyacct2 14y ago

(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 14y ago
Works smooth for me (Laptop, i7 Quad, Win 7, Firefox 14)
- nilliams 14y ago
  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 14y ago
    I didn't think of that - I actually have a Logitech mouse where I can switch between the clicking scrolling and the freewheeling.
    - drivebyacct2 14y ago
      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 14y ago
        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.

simonsarris 14y ago

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 14y ago
It would be kind of a boring demo if they just showed some very subtle and barely noticeable effects. ;)
- mediocregopher 14y ago
  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 14y ago
    Encouraging its use “for the masses” has me worried.
patrickaljord 14y ago
Let us please not have this kind of comments on HN _every_ single time a css3 animation demo makes it to the front page...
ericcholis 14y ago
"Just because you can use a hammer doesn't mean you can build a house" You're right, the dreaded Flash sites of four years ago haunt me every day. However, I've seen some outstanding designs using these techniques. They were outstanding because they were done by professional interface designers. Put these tools in the right hands, and you'll get amazing results.

Kerrick 14y ago

Looks like SuperScrollOrama. http://johnpolacek.github.com/superscrollorama/ http://johnpolacek.github.com/superscrollorama/

makmanalp 14y ago

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 14y ago
It seems a little broken (and flickery) on Chrome in OS X. It worked great in Firefox and Safari.
- RBerenguel 14y ago
  Worked neatly in my Chrome (latest version non-dev available,) Mac OS 10.6.8

jsavimbi 14y ago

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 14y ago
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 14y ago
  Yes, those ones.

josscrowcroft 14y ago

A call for parallax scrolling sanity: "Oh God, My Eyes!!!" Neat script though.

imperialWicket 14y ago

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?

esbwhat 14y ago

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

jastr 14y ago

reminds me of http://2011.beercamp.com/ http://2011.beercamp.com/

derpmeister 14y ago
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.

Corun 14y ago

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 14y ago
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.

gaius 14y ago

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

graue 14y ago

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

antimora 14y ago

it made me dizzy =)

vivianhui 14y ago

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

some1else 14y ago

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#examples https://github.com/Prinzhorn/skrollr/tree/master/examples#ex... [r]: https://developer.mozilla.org/en/DOM/window.requestAnimationFrame https://developer.mozilla.org/en/DOM/window.requestAnimation...