Parallax scrolling is a type of web design where different elements of a website move at different speeds. As a user navigates through parallax websites, images will float on top of other images in several layers. Parallax scrolling sites can be used in many different ways to create a variety of captivating effects which have the potential to keep viewers on your site for a great deal of time.

So if you are bored using the plugin and challenged to create you own parallax scrolling effects using jQuery and CSS, you might want to try these tutorials below.

Simple parallax scrolling tutorial

With this tutorial, you’ll learn how to integrate a simple scrolling parallax.

Parallax Done Right

Since then, parallax has blown up. It feels like every day there’s a new marketing page using the technique…and with good reason. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. It’s especially bad on devices with high pixel density like retina MacBook Pro’s.

Pure CSS Parallax

A prototype parallax scrolling technique that uses CSS 3D transforms. No JavaScript!

Creating Game-Style Parallax Scrolling: Zombie Edition

Ready to enter the world of parallax scrolling websites? Yes, scrolling sites are absolutely everywhere. Sadly, sometimes they do little more than distract and disorient a user in an attempt to show off, but when done correctly, they can make the web a more exceptional place. At its best, parallax scrolling can help users explore content in an immersive and engaging way.

Recreate the Nike Better World parallax effect

This parallax tutorial by Ian Lunn describes how to create a vertical-scrolling parallax website, taking inspiration from the Nike Better World parallax website.

Fluid CSS3 Slideshow with Parallax Effect

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.

Sass parallax example

By locking the perspective on the body element and transforming elements in 3D on top of that, you can easily create parallax scrolling effects that don’t require JavaScript and can be much more performant as a result.

Creating Scrolling Parallax Effects with CSS

For quite a long time now websites with the so called “parallax” effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a nice optical effect and keeps the attention of the visitor.