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.
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
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.
Top comments (0)