Get our posts emailed to you with our monthly newsletter, subscribe here.

Last week I demonstrated some awesome examples of the parallax scrolling effect in web design, this week I thought it would be handy if I bought you a collection tutorials and resources that will help you achieve the parallax effect on your next project.

The Parallax Effect?

Just in case you are not sure what the parallax scrolling effect is, in most cases it is a collection of different background images and text that alter the sense of depth to the user when scrolling. Here are a collection of in-depth tutorials to get you started with the parallax scrolling effect, read and enjoy!

Behind The Scenes Of Nike Better World

Parallax Scrolling Tutorials & Resources

In this article, SM talk to the team that built the Nike Better World  site to find out how the website was made.

How to recreate Silverback’s parallax effect

Parallax Scrolling Tutorials & Resources

A walk through tutorial on how the developer created the parallex effect with great success on the holding page for Clearleft’s latest project, Silverback.

Building a parallax scrolling storytelling framework

Parallax Scrolling Tutorials & Resources

A tutorial to teach you to make a Parallaxer of your own, show you one way of drawing assets for it, and ultimately inspire you to trailblaze the internet storytelling frontier in your own direction.

Easy Parallax with jQuery

Parallax Scrolling Tutorials & Resources

In this tutorial we will demonstrate how to create a basic instance of the parallax effect using jQuery.

One page website, vertical parallax

Parallax Scrolling Tutorials & Resources

On this tutorial we’re going to undress the structure of this websites parallex and then we’re going to create something inspired by Nike’s website using jQuery and CSS.

Parallax Slider with jQuery

Parallax Scrolling Tutorials & Resources

We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

Recreating the Nike Better World Parallax Effect

Parallax Scrolling Tutorials & Resources

In this tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld.

Fluid CSS3 Slideshow with Parallax Effect

Parallax Scrolling Tutorials & Resources

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.


Parallax Scrolling Tutorials & Resources

Jarallax is an open-source javascript library which makes adjusting css based on interaction easy. With Jarallax it’s easy to create a parallax scrolling website.

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.