A grouped pure CSS parallax demo | Hacker News Reader

A grouped pure CSS parallax demo

keithclark.co.uk

129 pointshuntermeyer40 comments

This is one recent design trend (along with the windowed images that scroll through their viewport) I wish would die in a hurry.

I'm not a UX/UI guy, but it feels like terrible UX/UI.

I think it's already dying. I see less and less parallax sites whereas two years ago every startup had their site as parallax. :)

I tried to buy a theme from themeforest and it's extremely hard to fine one that is NOT completely polluted with CSS animations and parallax effects. I wish you were right, but just from the top-selling themes of marketplaces like themeforest, it seems that the trend is still quite big, unfortunately.

One of the reasons is probably because parallax on mobile is a horrendous experience and people have started to catch on to this.

I've only seen a handful of companies who can pull it off well. This is probably one of five I feel does it well: http://www.extreme-sensio.com/

That's because it is simply done. For the most part the only thing that really happens in a big way is that the background changes out based on scroll position. Any other element that animates on scroll does so in a minor and subtle way. The actual scrolling of the page is not altered in any way.

I agree, this is one of the better ways to handle such things if it has to be done.

I am a UX/UI guy, and I wish it would be used properly. What a lot of parallax sites like to do is mess with the scrolling of the page. ("Scrolljacking" is a term I've thrown around for stuff like this.)

Don't do that. Ever.

The user should always be able to scroll normally and not have their browser screen clunking along because they're not scrolling at a speed that is optimal for the animations at hand.

Here's a decently bad offender for a visual of what I'm talking about: http://www.apple.com/mac-pro/ (After the initial animation, try scrolling down--it's not as easy as scrolling should be.)

Wow,you weren't kidding, that's unforgivably bad, especially for the "UX Gods" at Apple.

This is a good example of it done extremely well, also from Apple.

http://www.apple.com/imac-with-retina/

It's even more impressive when you inspect it and see how it's done.

Hell yeah, thanks for sharing!

How is it done? I see a couple of css transitions but there must be some js involved as well?

Yes. They linked the scale of the image (CSS) to the scroll wheel with a bit of JavaScript.

It's a large div with a ton of canvases inside, the scroll wheel is also linked to a css transition on the div the scales it outwards.

An example of Apple doing parallax right is the new iMac page: http://www.apple.com/imac-with-retina/ At least the top image effect is very well done IMO and does a very good job conveying the central premise of the new iMac: looottts of pixels.

Having said that I really dislike what happens lower on the page where the iMac image stays pinned on the left and the descriptions scroll normally on the right. It's totally jarring to me. It seems unnatural that some of the contents would move with the scrollbar (as expected) and other significant elements would not. It immediately pulls me away from the content and leaves me trying to analyze what in the world is going on.

We experience parallax in the real world every day and are completely wired up to find it normal and expected. But real parallax involves objects at different distances. When you force objects that are in the same plane to move as if they were in different planes, you get the "funhouse" effect.

I suspect that like many other cute effects somebody will eventually do some serious AB tests and figure out that this kind of thing reduces conversions.

The pinning is actually buggy: it pins the Mac to the wrong vertical offset when you scroll past the threshold the pin hits. At least on Chrome on my Macbook Air it does, anyway. Maybe it works correctly at other resolutions or browsers.

So not really "parallax right" if you're counting the whole page from top to bottom. I like the images a lot though, they're very nice.

yeah I noticed that too.

It's probably also counting the width of the page, which would make the positioning formula trickier. Still, get your shit together apple!

I actually think this was terrible as well. I clicked the link on the release date because I was curious. I scrolled for a while, and I thought I was somehow just zooming out. It clunked along and took a while to get to any information. It felt poor. The animation was not fluid. Maybe it should have been a screen sized gif, that played over 4 seconds and then disappeared. Not sure, but it felt like I had no control over the page as a user. I couldn't scroll away.

That's a really bad example. I suggest www.kennedyandoswald.com/

That's not a great example either. I can't grab the scroll bar and go to the top or bottom of the page since they have their own custom scroll bar that doesn't work like it should. Also Page Up and Page Down don't work.

I couldn't scroll at all after the initial animation. What exactly is supposed to happen on the site?

It's open to abuse (hiding content until it's scrolled to, usually) but the actual visual idea of it is fine, as far as I'm concerned. Just don't try to communicate the main purpose of your page with it.

It is especially terrible, if you use your mouse wheel to scroll and not a swiping gesture on a trackpad. Parallax just looks horribly with a mouse wheel.

It is especially terrible if you use neither the mouse wheel nor the trackpad. The cursor keys, Home, End, Page Up, and Page Down simply don't work.

I second that motion, bring it behind the barn and take it out of it`s misery. Especially when the scrolling pops up some unexpected graphic which is jarring and doesn't bring anything to the site`s aesthetic or UX.

The associated article gives a good description of how this effect is achieved:

http://keithclark.co.uk/articles/pure-css-parallax-websites/

I find it interesting that parallax was initially a way to fake 3d-like effects, and now we're using 3d effects to implement parallax!

Unfortunately, on iOS the scrolling feels very fake with no native easing. Does it have some sort of javascript hijacking scroll/swipe events?

There's no JavaScript on that page outside of Google Analytics. You're right though, it feels pretty terrible without the native scrolling momentum.

Worked really well for me on Android. Native easing worked as I would expect.

Try adding -webkit-overflow-scrolling: touch; to enable elastic/momentum scrolling on the .parallax div.

EDIT: Nevermind, just tried it in the simulator and it seems to break everything. Although it is smooth... :)

Works OK on Firefox OS. The base layer scrolls perfectly, but the other ones update at a lower framerate. Desktop Firefox has the same behavior when APZ is enabled.

Some people here have commented that this is terrible design trend. I disagree. I would say this depends a lot on the use-case :)

[shameless plug] I've used (almost) the same effect for my landing page for my upcoming film:

http://salesmanfilm.com/

(P.S: Scrolling might be choppy on Retina MBPs/slower configs)

You've created a nice showpiece. However, it's still a horrible design trend, and it's probably the work user experience element I've seen used in recent years. This is the equivalent of the animated gifs of the 90's. Under construction and dancing baby being the most common. Adding distraction rather than focusing on content has never been a successful strategy, and I hope it never does.

It will course correct eventually. I'm hoping sooner.

I didn't notice the effect until I scrolled back up and saw a jerky movement in the buildings. Then tried scrolling back down and up not getting it to work until I noticed it moved with the mouse movement not the scrolling.

I would consider redesigning it.

Thanks, that's a very valid point!

Using this while developing my website. It works pretty well, although seems to have issues on various browsers (like Safari) where there is no scrolling.

The main issue I had was that smooth scrolling libraries (for jumping to various places on the same page) didn't work until I referenced the element to scroll as a specific div (that contained all of my parallax) instead of "body" or "html, body" like suggested online.

Overall, I like the flexibility and the ability to inspect the layers using simple translations and rotations.

Works fine in Safari here.

It took me a while to figure out you could scroll down.

Many of those fancy scroll effect websites have that problem.

If there is text or something else chopped off at the bottom, then it's obvious you can scroll.

But this kind of page looks like it's everything there is, and only if you discover that you can scroll down anyway, you will do so.

Both the demo and the blog post stutter badly while scrolling on this 2.5GHz i5 iMac running Safari 7.0.5.

No mention of the debug checkbox? That's one of the coolest parts of this to me.

It crashed chromium on ubuntu 14.04.1...

Reply on news.ycombinator.com