
Skrollr - parallax scrolling for the masses - morphics
http://prinzhorn.github.io/skrollr/
======
benjamincburns
To the author:

Kudos, this looks like a nicely executed library. And thank you for providing
an unbroken (at least on computer) parallax implementation - I've seen too
many homebrew versions that are utterly, utterly broken. This is _incredibly_
frustrating in cases where this is blocking me from content in which I'm
actually interested.

To potential users:

    
    
      <scroll>
      <scroll>
      <scroll>
      Some things slide around.
      <scroll>
      <scroll>
      <scroll>
      Tiny bit of content
      <scroll>
      <scroll>
      <scroll>
      More things moving with nothing to do with the content
      <scroll>
      <scroll>
      <scroll>
      Tiny bit more content
      ...
    

What does this remind you of? Here... I'll give you a hint:

    
    
      Make a wish.
      Now scroll!
      >
      >>
      >>>
      >>>>
      
      ...
      
      >>>>
      >>>
      >>
      >
      ******  Stop! ******
    

It's the 20-teens version of those obnoxious ASCII-art e-mail chain letters
[1].

Don't do that. It's not pretty. It sucks, and dollars-to-donuts it's hurting
your conversion. Don't impede my ability to read the thing that you want me to
read. It's not going to impress me, it's going to make me click elsewhere.

Let's please kill this fad and give clever, ambitious people such as this
author (sorry, I couldn't find a reference to your real name) something more
useful on which to hack.

1:
[http://cluestick.info/hoax/7_Types.htm](http://cluestick.info/hoax/7_Types.htm)

~~~
crisnoble
So much parallax hate, why? The [awesome] library is for triggering events
based on how far down a user has scrolled. It __could __be used for parallax
effects or any number of things including detection of how far down a user
scrolls before exiting, subtle cues to indicate your at the end of an article,
fading out non-essential navigation items.

This demonstration is over the top to show the range of features the library
can provide. If someone uses the technique to inhibit usability or make you
dizzy, then shame on them. There are plenty of sites that use the parallax
effect very well, a couple that have been #1 on HN:
[http://www.nytimes.com/projects/2012/snow-
fall/#/?part=tunne...](http://www.nytimes.com/projects/2012/snow-
fall/#/?part=tunnel-creek) , [http://www.apple.com/mac-
pro/](http://www.apple.com/mac-pro/) .

The key is to use it as an enhancement, not a dependency.

~~~
benjamincburns
> If someone uses the technique to inhibit usability or make you dizzy, then
> shame on them.

You've hit the nail on the head. The problem is that I've seen so many pages
that do just what you describe and it causes a knee-jerk response.

Don't get me wrong - when it's done right parallax can be _beautiful_. It's
just too overused.

------
blhack
Here is an example of a website that uses something like this:
[http://internationalartsmegacrew.com/controltower/](http://internationalartsmegacrew.com/controltower/)

I can't even read it

\--shudder--

I can't speak to the quality of code in this library, but PLEASE don't use
things like it. This is the equivalent of text that follows your cursor
around, or midi music playing in the background, or animated "under
construction" gifs.

It's horrible, and it does _not_ make you look like a "professional" when you
use it.

~~~
PavlovsCat
Counter-example:

[http://www.youtube.com/watch?v=sAZdJ_FIyRM](http://www.youtube.com/watch?v=sAZdJ_FIyRM)

Maybe it was more practical than pretty, and there are probably good reasons
it got changed since then. Still, I was so impressed (once the images were
done loading, it was very smooth for me, nothing like in the video), and
that's even with the cheesy photographs of grinning tourists.

I ended up making my own little js thingy to change CSS based on scroll and
mouse position, but I haven't found a really good use for it. Except maybe
having a big fixed header at the top which shrinks a bit when you scroll down,
that effect I like. Other than that, anything I can come up with seems dumb on
further inspection.

------
geuis
Whoa please don't use this! I just tried all of the sites mentioned in the
comments from my phone (iOS) and none were usable. Either they locked up and
were unresponsive, rendered completely wrong, or just had stuff flying
everywhere.

~~~
at-fates-hands
This is my main issue with using parallax scrolling. It's absolutely murder on
a mobile device.

Which means if you're going to build a site with it, you need to have a full
mobile version for the rest of your users. I've found 99% of the sites who
have parallax don't do this, since it requires more time and effort to build
what is essentially two full sites.

------
ChrisNorstrom
Before Parallax: I scroll down, viewport scrolls down.

After Parallax: I scroll down, text, images, and backgrounds fly all over the
place for no good reason. Designer prances around me proclaiming "isn't it so
unique!".

When done right (keeping it simple) It can make your site stand out and
provide an interesting storytelling experience. Most of the time parallax just
over-complicates a simple scrolling action. It's a solution to a problem no
one has.

REALLY BAD Parallax:
[http://journey.lifeofpimovie.com/#!/](http://journey.lifeofpimovie.com/#!/)

BAD Parallax: [http://www.nouvelleoctavia.fr/](http://www.nouvelleoctavia.fr/)

GOOD Parallax: [http://hotdot.pro/en/#](http://hotdot.pro/en/#)

So very good job on the library, the scrolling is responsive and not glitchy
and I like the progress bar at the bottom. let's just hope people use it
correctly and don't over do it.

~~~
danenania
Interesting. I would say the GOOD is easily the worst of the bunch, and the
REALLY BAD is by far the best. It may be overreaching just a bit, but it's
visually impressive and commands attention.

Most users are not minimalist HN nerds. A website for a flashy blockbuster
movie that 'puts the content first' and 'gets out of the way' is a terrible
website for a flashy blockbuster movie. This isn't to defend over-design or
flashy effects when they aren't called for, but sometimes they _are_ called
for, and it's an equally poor design decision to go minimal and flat when it's
inappropriate. Not every site has the same design goals as a news article or
saas landing page.

------
culshaw
Can you put a marquee tag in there somewhere? I think it will add real panache
to this party.

------
josteink
If you use this, me and my Firefox mobile will hate you.

Also: Funny how something which was utterly normal on a C64 (and even more so,
the Amiga) back in the 80s is suddenly magically hip after Apple used the word
in a keynote about iOS7.

~~~
supercoder
The parallax trend has been happening for months on web pages.

Apple will popularise the trend in iOS apps though that was related to device
motion and is bit different to what's happening on the web.

On the point of Apple, usually this sort of parallax doesn't work within
Safari on iOS devices as scrolling in iOS pauses the main run loop of code.
Looks like they've found a work around here, so kudos it's actually
functional, but scrolling performance appears to suffer terribly.

~~~
thekingshorses
No there is no work around. Only option is to use your own implementation of
scrolling or 3rd party library. Looks like demo is using some sort of library
that is why scrolling performance is laggy.

------
watty
And we thought Adobe Flash was bad.

~~~
actionscripted
At least you could completely disable Flash. The new CSS animations and
effects are baked right in.

------
marban
We are clearly entering the '80s of web design.

------
fowkswe
You can kill off Flash, but the desire to wiz-bang the web will never go away.

------
Keyframe
Interesting thing happens when popup blocker is turned on:
[http://i.imgur.com/fjK1yee.png](http://i.imgur.com/fjK1yee.png)

------
troebr
I used it a couple months ago for my girlfriend's resume
([http://rachelsmuseum.com/](http://rachelsmuseum.com/)).

The big problem is that it does not work at all on small
screens/tablets/phones. The resume is not super practical, but I had fun using
skrollr! Skrollr can be hard to use if you don't center everything, having a
banner on the left was a major source of problems.

------
angersock
Cool idea--probably will end up using at a hackathon sooner or later.

Performance on Iceweasel 20.0 is pretty janky, though. :(

EDIT: Chrome 27.0.1453.110 runs it fine.

~~~
dfc
Mandatory upvote for writing "iceweasel." What version of debian has 20? I
thought unstable was at 21. Run the beta or aurora line from
[http://mozilla.debian.net](http://mozilla.debian.net)

------
lowglow
I stumbled across skrollr last week and are using it for our latest project
Campendo ([http://campendo.co/](http://campendo.co/)) for a cool star effect.
It's pretty easy to use and the documentation is great.

~~~
jlc8413
Your page murdered my mobile chrome 18. Android 4.1, good hardware. Please
drop this feature.

~~~
lowglow
Well it should have redirected mobile viewers, but I'm still working on the
mobile version of the site so either way the experience still wouldn't have
been very good. :)

~~~
woah
hey, just throw an "under construction" gif on there! my buddy also told me
you could make the text flash but i forget which HTML tag that was.

~~~
lowglow
Can you make one for me? :)

------
null_ptr
Gotta use those iCores for something.

~~~
spyder
Uses 30% of one core which is the same as scrolling the text here on HN (in
Firefox)

------
Bjoern
Thanks for open sourcing this! Really appreciate the effort that went into
this.

Just curious though, I'm wondering from a usability viewpoint. Is this a good
thing to have on a website? Are there cases where it helps to present the
content in a better fashion than without?

~~~
supercoder
I like these effects when they're just used as a florish, rather than taking
over presentation completely.

So moving something in to place to attract attention to that element as you're
moving down.

------
syvolt
I love this example:
[http://prinzhorn.github.io/skrollr/examples/gradientsmotherf...](http://prinzhorn.github.io/skrollr/examples/gradientsmotherfucker.html)

------
jcutrell
It should be noted that this implementation is far better than a lot of the
more naive implementations out there. Pretty significant reductions in jank,
accomplished by some better animation techniques and scroll watching
functions.

Still, as most people have realized, performance is extremely varied for
parallax or any other scroll-based, animation heavy interactions. Nonetheless,
it will almost certainly improve in some way in the future. People are
learning new ways of interaction based on scrolling that go beyond "move this
static page upward", and as those new interactions mature, space will be made
for them.

------
namank
NO.

What's the point of this? Parallax exists on the mobile because a phone IS a
3D object and because it's used for 3D applications.

When is the web used for 3D? The closest we come to 3D on the web is games;
and JS games already do this.

~~~
amitdugar
I am sorry, but your argument doesn't seem to make sense.

What 3D applications require Parallax on mobile phones ?

And, you are comparing mobile phone with web ?

------
marshray
Every site should have this.

I bet you could also add aquarium fish pretty easily.

~~~
kps
Won't that drown the dancing hamsters?

------
superbeefy
This is cool, one of the first time I've seen parallax scrolling working
somewhat correctly on a iOS device. There seems to be issues with inertial
scrolling though. You loose control of how far its scrolling a lot, and it
seems to introduce a lag on responsiveness of touch gestures.

------
iampliny
Sure this can be abused, just like rounded edges and drop shadows can be
abused.

There are already some very attractive implementations:
[https://www.spotify.com/us/](https://www.spotify.com/us/)

That page plays fine on mobile, sans parallax, too.

~~~
nness
Spotify's implementation is actually very clever; they've accomplished it in a
way that doesn't involve repositioning background images like nearly every
other library out there. They also stick to native functions as much as they
can to reduce computational overhead (replace calls to cssText with jQuery's
css() function for example, and performance drops dramatically). That said, it
only works on devices with CSS transformations, and poorly in IE9 (which is
why it is disabled on IE).

------
tricolon
Previous discussion:
[https://news.ycombinator.com/item?id=4162519](https://news.ycombinator.com/item?id=4162519)

(submitted back when GitHub Pages were served from *.github.com)

------
tudborg
All good fun.

But in all seriousness, don't do this on your site. It is horrible.

------
hablahaha
WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF

Thanks for making my morning.

~~~
richkuo
'scale, skew and rotate the sh __out of any element '

win

~~~
fein
If you want to go ape with transitions, I use this little guy for extending JQ
and adding a '.animate()' like function for any selector:

    
    
        var defaults = {
            duration: 700,
            easing: 'ease-out'
        };
        
        $.fn.transition = function(props, opts){
            options = $.extend({}, defaults, opts);
            props['-webkit-transition'] = 'all '
                + options.duration
                + 'ms '
                + options.easing;
            props['-moz-transition'] = 'all '
                + options.duration
                + 'ms '
                + options.easing;
            props['transition'] = 'all '
                + options.duration
                + 'ms '
                + options.easing;
            $(this).css(props);
        };
    

Should work for FF, webkit, IE10.

Usage would be $('selector').transition({left: '10%'});

I really need to extend it for auto prefixing transforms as well.

edit: if you like, I also wrote a little js plugin for injecting animation
keyframes into the CSSOM so you can create keyframe animation rules in JS. Not
sure if it has any use, or if the code is even good enough for ridicule, but
if you think it's something you'd like, I can release it on github.

------
pkill17
Pegged my CPU for 115%, even when NOT scrolling. 13in, Late-2011, i7 2.8Ghz
MBP

------
tomasien
Used this for some parts of shockoedenim.com, highly recommend.

------
jessaustin
Someone ought to build a presentation tool on top of this.

------
loceng
Most amazing product demonstration, ever.

------
augbot
This is great, thanks for opening it up.

------
brickmort
that was scary-cool.

------
sneak
You misspelled "shit".

