4 ms·

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 te

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/ http://www.apple.com/mac-pro/ (After the initial animation, try scrolling down--it's not as easy as scrolling should be.)

jnem 12y ago
Wow,you weren't kidding, that's unforgivably bad, especially for the "UX Gods" at Apple.
- Igglyboo 12y ago
  This is a good example of it done extremely well, also from Apple. http://www.apple.com/imac-with-retina/ http://www.apple.com/imac-with-retina/ It's even more impressive when you inspect it and see how it's done.
  - daddykotex 12y ago
    Hell yeah, thanks for sharing!
  - ollysb 12y ago
    How is it done? I see a couple of css transitions but there must be some js involved as well?
    - Raphmedia 12y ago
      Yes. They linked the scale of the image (CSS) to the scroll wheel with a bit of JavaScript.
    - Igglyboo 12y ago
      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.
teleclimber 12y ago
An example of Apple doing parallax right is the new iMac page: http://www.apple.com/imac-with-retina/ 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.
- davedx 12y ago
  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.
  - teleclimber 12y ago
    yeah I noticed that too.
  - alexirobbins 12y ago
    It's probably also counting the width of the page, which would make the positioning formula trickier. Still, get your shit together apple!
- vonklaus 12y ago
  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.
zo1 12y ago
I couldn't scroll at all after the initial animation. What exactly is supposed to happen on the site?

jnem 12y ago

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

Igglyboo 12y ago
This is a good example of it done extremely well, also from Apple. http://www.apple.com/imac-with-retina/ http://www.apple.com/imac-with-retina/ It's even more impressive when you inspect it and see how it's done.
- daddykotex 12y ago
  Hell yeah, thanks for sharing!
- ollysb 12y ago
  How is it done? I see a couple of css transitions but there must be some js involved as well?
  - Raphmedia 12y ago
    Yes. They linked the scale of the image (CSS) to the scroll wheel with a bit of JavaScript.
  - Igglyboo 12y ago
    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.

teleclimber 12y ago

An example of Apple doing parallax right is the new iMac page: http://www.apple.com/imac-with-retina/ 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.

davedx 12y ago
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.
- teleclimber 12y ago
  yeah I noticed that too.
- alexirobbins 12y ago
  It's probably also counting the width of the page, which would make the positioning formula trickier. Still, get your shit together apple!
vonklaus 12y ago
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.

zo1 12y ago

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