Parallax scrolling

My new favorite thing: Parallax scrolling. Give the illusion of depth and animation with simple coding — what could be better?

Amaze-balls

I can’t remember the first site I visited that implemented parallax scrolling, but I do remember thinking – this looks WAY too difficult to code. (Psst – wanna hear a secret? It’s not!)

What the heck is it?

Parallax scrolling is where the user scrolls down the page (or across the page) and various “layers” of the webpage move at different speeds creating the appearance of depth and animation.

What I love about it is that the user controls the speed of the page. They can also “rewind” of sorts by simply scrolling back up the page. I very much appreciate that as a user myself.

Show me some!

http://shibui.me/web/scroll/index.html — this example is so interactive and visually stunning. And the copy is hilarious in spots too.

http://kampanjeweb.apt.no/volkswagen/sommer12/ — this example illustrates a page-turning book-like experience while implementing text areas that pop in upon a mouse click.

Something I don’t like about this example – anytime you scroll to another section on the page, your URL changes. So, when you want to click your back button to return to your Google search or whatever your previous page was, you have to click quite a bit to go back through all the sections you’ve scrolled through.

 How can I get started?

There are different ways to code parallax scrolling. I, personally, found Skrollr to be very informative and helpful since it utilizes CSS3 to implement the layers. From what I’ve been researching, all methods require javascript or the JQuery library. The method will determine how things are done from there.

And you don’t actually need to know a lick of scripting to implement parallax scrolling via the Skrollr method, so you better get to playing right away!

Responsive design and parallax

I created a page for a holiday card, and I found it to be very easy to integrate responsive design with parallax scrolling. All the same rules apply – media queries, percentage measurements, etc. Your viewport is obviously smaller on mobile devices, so you need to iteratively test in all environments before you finish your project.

 

Leave a Reply

Your email address will not be published. Required fields are marked *