Simple Parallax Scrolling

I googled 'simple parallax scrolling' and changed upon a tutorial on w3. w3 Demo on parallax scrolling.

I like the scroll effect when the background images do not move when the user scrolls. Creating a parallax scrolling effect (may not be actually called parallax scrolling but I am using it since the w3 tutorial named it.).

However,

it does not work on mobile anymore. >:(

Problem lies with,

the css propertybackground-attachment: fixed which does not work on mobile due to huge repaint cost.

Paul Irish

@paul_irish

@ppk @beverloo fixed-backgrounds have *huge* repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

17:30 PM - 27 Feb 2013

10 17

But it's okay,

we can still use position: fixed to get the same desired cool effect. So what I found out from this experiment is that every image that uses position: fixed will be rendered altogether and stacked over each other despite having different z-index.

A simple smile effect,

I have two transparent gifs that have different facial expression. Once the user scrolls, the gif will change from smile to a meh expression.

The idea is to add a white colour layer in between the two gifs to hide the base layer.

Play with the demo on a browser

Source code

But wait,

initially I use two different gifs, however due to the different download time, the gif may not be synchronised. Simple fix is to combine the two gif and serve as one! We can use object-position to clip the image for each div. Something like a css sprite. So we save one image call and ensure that images are always in sync.

Ok,

bye.