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

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.apple.com/mac-pro/ .

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

> 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.

> And thank you for providing an unbroken (at least on computer) parallax implementation

If with "unbroken" you mean "still works with NoScript", then I'm sorry to say that it messes up the layout when JavaScript is turned off on my computer. In fact, only a handful of websites ever gets this right.

Reminds me of the Powerpoint slide transitions.

Here is an example of a website that uses something like this: 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.

Counter-example:

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.

Honestly, I think that examples cool. It looks nice and it's smooth unlike a lot of parallax stuff. It's a neat to present information.

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.

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.

For FED's that are curious, iOS doesn't fire requestAnimationFrame or update the DOM when the user is scrolling natively, which is why it appears very jumpy on those devices.

Not that I'm defending this fad, but try http://apple.com/macpro from your iPhone. It works surprisingly well, at least on iOS 7.

That said, end this fad please.

I end up redirecting people to a mobile version of the site. I don't think this should work in a mobile experience at all. mobile should be lightweight and really accessible by many mobile devices simultaneously. I wouldn't recommend using this if you're target is mobile (excluding ipad > v1 mayybe).

The simplest method I've found to do this on mobile is to use greensock.js and use its seekto() function to animate using the scrollbar position. Its still pretty heavy.

Not using it isn't really the answer - creating a better mobile experience is the answer. Use this if you want to - change the experience somewhat for mobile.

so disable it in mobile. this is an awesome library I've ben using for months now inside of scrollkit.com. Makes it easy for our users to create parallax effects like those on websites all over the web (which often don't work on mobile).

Thanks Alex for putting this out there and saving me a lot of time and work.

parallax scrolling does not work well on touch devices. People will need to disable it via feature detection or provide a mobile specific version of the site. Usually disabling it should be fine as long as your site does not depend on parallax scrolling to work.

Back in the days , when i was doing flash stuffs ,there was a site with flash and a static version of the website. Same with all the crazy JS animations. If you are going to use these kind of stunts ,you'd better 1/ test heavily on all major browsers and devices 2/ provide a light fallback for mobile and tablets. (yes , javascript kills the battery too...)

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/#!/

BAD Parallax: http://www.nouvelleoctavia.fr/

GOOD Parallax: 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.

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.

Your example of good parallax scrolls SIDEWAYS when I scroll down. What?

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

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.

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.

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.

It's worth pointing out that this library is in no way new- check out the GitHub repo.

Parallax scrolling has been pretty common for a while, now. Nothing to do with Apple.

See: Every 2D game made since the 80's up to today

And we thought Adobe Flash was bad.

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

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

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

Interesting thing happens when popup blocker is turned on: http://i.imgur.com/fjK1yee.png

I used it a couple months ago for my girlfriend's resume (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.

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.

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

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

Looks nice, but in action it's rather dizzying. It's like the stars move up, then start going back down, then back up again. Very disorienting.

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

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. :)

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.

Can you make one for me? :)

Gotta use those iCores for something.

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

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?

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.

I love this example: http://prinzhorn.github.io/skrollr/examples/gradientsmotherf...

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.

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.

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 ?

Every site should have this.

I bet you could also add aquarium fish pretty easily.

Won't that drown the dancing hamsters?

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.

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/

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

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).

Previous discussion: https://news.ycombinator.com/item?id=4162519

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

All good fun.

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

WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF WTF

Thanks for making my morning.

'scale, skew and rotate the sh out of any element'

win

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.

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

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

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

Most amazing product demonstration, ever.

This is great, thanks for opening it up.

that was scary-cool.

You misspelled "shit".