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!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s