What is Parallax Scrolling?
Parallax scrolling is a technique used in web design to give things a really neat sense of depth in a 2D space. To put it simply, you basically have a background image that has a fixed position and everything else on your page (or certain elements) scroll over it. Or, you could just have your background piece scroll a bit slower or faster than the rest of the layers on your page. This technique actually grew from traditional animation in the 1930s, but didn't actually start to be incorporated into web design until around 2011.
There are some disadvantages to using the parallax effect though on your website - mainly that the images used are normally pretty large to take up the entire background space which will slow down your page's load time a bit. However, if you use it in the right way, this image being loaded will happen in the background and users may not even notice.
The really cool piece of this effect is that it can be achieved purely with CSS. Check out one of our clients' sites that is using the Parallax effect in it's simplest form as a part of their home page image slider widget! This took only one line of CSS to make the background image of that slider fixed to the browser. Super simple, and a pretty nice effect!
For some more examples of how the parallax effect can change your whole website, check out some examples here: http://www.awwwards.com/websites/parallax/ (*website not affiliated with Percussion)
Follow me on Twitter! @caiello089
Along with being a Consultant, Casey is also the Professional Services Team Lead at Percussion and our in-house designer. She has a strong background in responsive web design and development. Casey knew that she wanted to work in the tech field ever since she was in elementary school. That strong passion led her to be a volunteer and strong advocate of various organizations that work to get more young women involved and excited about science and technology careers. In her free time, Casey enjoys spending time relaxing with family and friends.