Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A grouped pure CSS parallax demo

keithclark.co.uk

Post reply on HN
Print view View original

21–30 of 43 posts

Re: A grouped pure CSS parallax demo

#21

Post by at-fates-hands »

romanovcode wrote: post #13
nkozyra wrote: post #11

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

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/

Re: A grouped pure CSS parallax demo

#22

Post by Igglyboo »

jnem wrote: post #16
dave5104 wrote: post #14

Earlier quoted context omitted.

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 d…

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.

Re: A grouped pure CSS parallax demo

#23

Post by daddykotex »

Igglyboo wrote: post #22
jnem wrote: post #16

Earlier quoted context omitted.

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!

Re: A grouped pure CSS parallax demo

#24

Post by teleclimber »

dave5104 wrote: post #14
nkozyra wrote: post #11

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 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 d…

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.

Re: A grouped pure CSS parallax demo

#25

Post by Aardwolf »

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.

Re: A grouped pure CSS parallax demo

#26

Post by davedx »

teleclimber wrote: post #24
dave5104 wrote: post #14

Earlier quoted context omitted.

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 d…

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…

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.

Re: A grouped pure CSS parallax demo

#27

Post by teleclimber »

davedx wrote: post #26
teleclimber wrote: post #24

Earlier quoted context omitted.

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…

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.

Re: A grouped pure CSS parallax demo

#28

Post by talmand »

at-fates-hands wrote: post #21
romanovcode wrote: post #13

Earlier quoted context omitted.

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

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.

Re: A grouped pure CSS parallax demo

#29

Post by ollysb »

Igglyboo wrote: post #22
jnem wrote: post #16

Earlier quoted context omitted.

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.

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

Re: A grouped pure CSS parallax demo

#30

Post by tricolon »

ntaso wrote: post #19
nkozyra wrote: post #11

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.

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.
Post reply on HN