Responsive parallax

Parallax is everywhere on desktop, but it’s damn hard to make responsive.

On desktop it can be done using pure CSS but i hit 2 problems

  1. The pure CSS approach uses fixed background images but they’re hard to position/center on iPhone (or at least on my iPhone 5). I need to do some experiments to figure out exactly what is going on.
  2. Even if you get the positioning correct for one screen size, it’s hard to make it fluid across all screen sizes
  3. I had some BIG animated gifs… bigger than the 3MB iPhone image recommendations. At least that’s easy to fix, just use lighter images.

On mobile i’ve got it working using Skrollr but it’s totally wonky on bigger screens.

  1. It’s even harder to make it fluid than with background images. Scrollr “constants” might help me with that.
  2. The scrolling isn’t 100% smooth.

But there is some hope… iOS8 had added scroll events… let’s hope responsive parallax is getting closer!

 

Published
Categorized as Web Tagged

Leave a Reply

%d bloggers like this: