Search code examples
csshtmltwitterflat

Twitter style image movement while scrolling


How would one include an image on a website that behaves like the twitter users banner image which when you scroll one pixel it scrolls the page 2 pixels, moves the top of the image up one pixel and covers one pixel from the bottom of the image?

I don't know what to call this so I don't know how to search for it.

It is like the image moves up while the content behind it also slowly covers up the image like an extra layer of paper pushed up.


Solution

  • It's a form of parallax scrolling. There are plenty of good tutorials on parallax that I'm sure will help you achieve the effect you desire.