Skrollr - parallax scrolling for the masses
prinzhorn.github.io
prinzhorn.github.io
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
...
Make a wish.
Now scroll!
>
>>
>>>
>>>>
...
>>>>
>>>
>>
>
****** Stop! ******
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.
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.
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.
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.
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.
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.
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.
Thanks Alex for putting this out there and saving me a lot of time and work.
That said, end this fad please.
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.
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.
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.
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.
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.
Performance on Iceweasel 20.0 is pretty janky, though. :(
EDIT: Chrome 27.0.1453.110 runs it fine.
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?
So moving something in to place to attract attention to that element as you're moving down.
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.
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.
What 3D applications require Parallax on mobile phones ?
And, you are comparing mobile phone with web ?
I bet you could also add aquarium fish pretty easily.
There are already some very attractive implementations: https://www.spotify.com/us/
That page plays fine on mobile, sans parallax, too.
(submitted back when GitHub Pages were served from *.github.com)
But in all seriousness, don't do this on your site. It is horrible.
Thanks for making my morning.
win
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);
};
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.