
A grouped pure CSS parallax demo - huntermeyer
http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
======
nkozyra
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.

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

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

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

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

[http://keithclark.co.uk/articles/pure-css-parallax-
websites/](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!

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

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

------
neya
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/](http://salesmanfilm.com/)

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

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

~~~
neya
Thanks, that's a very valid point!

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

~~~
tambourine_man
Works fine in Safari here.

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

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

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

------
mihaukw
It crashed chromium on ubuntu 14.04.1...

