

Parallax Demo - mfkp
http://davegamache.com/parallax/

======
cnp
Well, not exactly.

You made the fatal UI mistake --and by fatal I mean absolutely unusable for a
great % of users-- of tying your viewport scroll to a fixed incremental +1
tick on the scroll wheel. If a user is using a MacBook touchpad, it's way,
way, way faster than a user using a mouse or scroll-wheel, or any other custom
scrolling device.

Here's an example of a site doing it the right way:
[http://www.spaceneedle.com](http://www.spaceneedle.com)

The key is to ALWAYS normalize your scroll, regardless of platform or device.
Not only does it make your scroll values uniform, it provides a much smoother
experience for the user.

The way this has been historically solved is to capture the mouse scroll tick,
and then apply a multiplier on the expected result to induce easing, and then
pipe that result into the scroll position of your container. All of this
should take place within a requestAnimationFrame.

In JavaScript it's as simple as

position += (targetPosition – currentWindow.scrollTop) * easing // generally
between 0 and 1

This classic inching equation is your friend!

If you were to revise your demo by implementing the above (about 5 minutes of
work) it would look absolutely phenomenal.

~~~
tlarkworthy
yes, the scrolling was unbearably slow on my computer (ubuntu + chrome).

The cool thing about that space needle example was I could middle mouse button
scroll with momentum too.

The middle mouse button does nothing on the posters example, so that's another
feature to add.

~~~
jagger27
Middle mouse button works fine in Firefox on Windows 7 for me.

------
ultimatedelman
Parallax... that word does not mean what you think it means.

These are just fancy scroll effects. Parallax would have been things in the
background moving slower than things in the foreground. Your background is
simply static.

------
pdkl95
Wait, you mean there's more to that page than a single still image (with title
overlay), and it was a broken flash/overly-fancy-javascript that it looked[1]
like?

/me checks again after reading this thread.

WOW. That's horrific. Not only does it give ZERO indication that there is
actually _content_ there besides a background image/title.

The scrolling is not only bad per-click the z-axis mouse buttons, as cnp said.
This same nonsense makes Page{Up,Down} only "scroll" (advance the animation)
like an inch. In fact, the only way this even seems to approach "usable" is if
you hold down the key for autorepeat, which gives it a constant "frame-rate".

This type of intro is yet another example of a style of design that _really
wishes_ the web/HTML wasn't a "document" with hierarchal markup, and try to
force movie/tv style over how it is seen.

As others have said - should have just been if a flash intro/video instead.

From the end: "Really, anything is possible …"

Ok, I made the zombocom reference in a reply below before seeing that - now I
almost wonder if this is some sort of waaaaaay-too-subtle parody or something?

[1] _Extra_ broken, because the site detects browser width and overlays the
ENTIRE PAGE with a black screen that says:

"Whoops! Right now this demo doesn't handle resizing or browsers less than
1000px wide. Reload this page or get on a laptop!"

So because a potential source of layout problems, such as my browser in a
portrait-mode-like aspect ratio and too narrow for the background image, it's
better to slam the door so the user sees nothing? How nice. If I'd seen the
"broken" version, I might have had to _drag my window a bit bigger_. Or how
about "background: center 100% no-repeat fixed url(...);"?

~~~
dhgamache
Hey - thanks for the feedback. For what it's worth, it's a demo. The entire
point was a "quick" demo for the Medium post that I wrote about creating
performant parallax sites:
[https://medium.com/@dhg/82ced812e61c](https://medium.com/@dhg/82ced812e61c)

I totally understand the demo is limited in its implementation, but the point
was never to be a perfectly polished site. It was to demonstrate the ability
to achieve smoother animations tied to scroll.

That said, perhaps it was shortsighted of me to assume it wouldn't be judged
on all platforms/devices/OS's.

------
ricardobeat
Ironically, there is barely any parallax on this website, just scroll-based
effects...

~~~
sopooneo
I find that the term "parallax" is largely used to just mean scroll base
affects in certain contexts now.

------
jamescun
Like most parallax, pretty much unusable on a trackpad without scrolling at
100 flicks/second.

~~~
dhgamache
Hey - I just halved the scroll distance. Unfortunately, I didn't have anything
to test on except a MacBook since I'm traveling. It sounds like the scroll
ratio to movement was too small...perhaps now it's a bit more friendly.

------
pontifier
Why not just have a flash intro?

~~~
w4
This pretty much nails the obnoxiousness of parallax scrolling sites. It looks
super cool from an aesthetic viewpoint, and these transitions are gorgeous,
but as a user I just really fucking hate it. Parallax is the modern web's
gaudy Flash interface.

~~~
pdkl95
You can do _anything_ with a parallax scrolling intro! Anything at all - the
only limit is yourself.

With a parallax scrolling site, you can to _anything_. The infinite is
possible with parallax scrolling! The unattainable is unknown using parallax
scrolling!

------
mitosis
This feels exactly like the kind of thing we will look at in a few years and
say "How 2014."

------
notduncansmith
In response to users calling this a Macbook-trackpad-only approach: this felt
horrible on my MBA. I could only get through an animation in one go with a
forceful swipe (the kind of maneuver I _never_ use during casual browsing).
Fellow designers, heed my plea: don't do this, ever. Having some subtle
animations happen as I casually scroll is one thing, but this is a usability
nightmare. I shudder to imagine what this experience must be like with a
scroll wheel.

------
tiquorsj
How "right" can it be with zero Mobile support?

------
imsofuture
Not everyone browses the web with a MacBook trackpad.

------
marknutter
"Whoops! Right now this demo doesn't handle resizing or browsers less than
1000px wide. Reload this page or get on a laptop!"

------
troymc
It took me over 20 seconds to get through that.

20 seconds of parallax = 20 parsecs

That's even more than the Kessel Run.

------
FreakyT
It's fun how non-smooth these designed-for-Macbook-trackpads sites are with
anything other than a Macbook trackpad.

~~~
MBCook
As a user on a MacBook Pro... it wasn't smooth. Inertial scrolling speedup
causes problems, at multiple points I 'stopped' partway through animations.

It's a pain. Don't do this stuff, it just makes things worse. If you want to
do this make them work like separate screens so that scrolling doesn't work,
you can only click to navigate.

Computers have been training me on what a scrollbar does for 20+ years. _DON
'T_ try to change it now.

------
jdboyd
I'm on a 1920x1200 display running chrome full screen, and it says "Whoops!
Right now this demo doesn't handle resizing or browsers less than 1000px wide.
Reload this page or get on a laptop!"

I don't think this counts as Done Right.

------
justinpaulson
I think parallax done right would actually work on a mobile phone. Parallax
effects make a lot of sense on a mobile phone that physically changes it's
angle based on your motion. Not including mobile is wrong right out the gate,
IMO.

------
palakchokshi
Good attempt but still very jumpy during transitions and going back and forth
causes elements to be misaligned. I'm using Chrome.

------
piratebroadcast
Very cool but the "Share with Twitter" button doesn't contain the URL of the
page. Just FYI.

------
baby
Well, this was not smooth at all on my trackpad.

