Parallax Scrolling Tutorials & Resources

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.

Jarallax

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.

DesignWoop Newsletter

Sign up to the DW newsletter, occasionally we send design & development related freebies, offers and exclusive deals.

Comments are now closed.