Parallax Scrolling Website Tutorials

Looking to create a parallax website? We created a parallax scrolling tutorial to help you out.

Looking for more tutorials? The tutorials we found use one of four primary technologies: jQuery, Stellar.js, Skrollr.js, or CSS:

jQuery Parallax Website Tutorials

These tutorials use jQuery to create a parallax scrolling effect. jQuery is a free javascript library that makes creating webpage scripts easier.

To add jQuery to your site, you can simply include a link to the jQuery javascript file in your webpage (see Using jQuery with a CDN on the jQuery download page.) Alternatively, you can download the script yourself via the jQuery download page.

Parallax Effect

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. The tutorial is relatively lengthy, but does provide good explanation and creates a great-looking and -working demo. The code here doesn't have syntax highlighting, but the explanations do help explain what is making the parallax effect happen.

Parallax Content Slider With CSS3 And jQuery

Parallax Content Slider With CSS3 And jQuery

This parallax tutorial by Mary Lou, published on Codrops, creates an animated content section with sliding and animation. The animations are intricate; they are not just sliding vertically or horizontally, the individual components are controlled separately. The tutorial only covers the relevant sections that actually create the parallax animation, so the tutorial is short. However, the text does describe what the sections do as well as explain how to modify them.

A Simple Parallax Scrolling Technique

A Simple Parallax Scrolling Technique

This is a simple parallax tutorial by Mohiuddin Parekh, published on Nettuts. It leads you through the process of creating a relatively simple vertical parallax-scrolling website with multiple sections. The tutorial has a helpful diagram explaining how the parallax effect is laid-out and it also explains how the jQuery code makes it happen.

Create a Funky Parallax Background Effect Using jQuery

Create a Funky Parallax Background Effect Using jQuery

This parallax tutorial by Anthony Comben, published on In The Woods, creates a horizontal, slide-based parallax scrolling website. It uses multiple layers to create the parallax scrolling effect, placing the main content in the center and using blurred clouds in the foreground. The tutorial is relatively lengthy, but well explained.

One Page Website, Vertical Parallax

One Page Website, Vertical Parallax

This tutorial on WebDesignShock explains how to create a parallax website with multiple elements and layers to it. It gives helpful visual diagrams of how the parts of the parallax website will work together to create the parallax effect. While the explanations of the code are a bit short, the tutorial is helpful and creates a very illustrative demo.

The Parallax Effects With jQuery

The Parallax Effects With jQuery

This tutorial by Franck Maurin provides some jQuery code that explains how to create a quick parallax effect. The parallax effect created is both with the direction of scrolling (as you scroll down, the layer will scroll down with you) and against the direction of scrolling (as you scroll down, the layer will move up away from you.) Unfortunately, the explanations of the code are relatively short (they are located on the right side of the page, next to the code.)

Scrolling Parallax: A jQuery Plugin With Tutorial

Scrolling Parallax: A jQuery Plugin With Tutorial

This parallax scrolling plugin by Jon Raasch is a jQuery library designed to make creating a parallax website easier. The tutorial explains how to use the code library, describing which code should be modified to create different effects, such as animations and loops.

Parallax Slider With jQuery

Parallax Slider With jQuery

This parallax tutorial by Mary Lou on Codrops explains how to create a horizontal parallax slideshow using jQuery. The slides and background use the entire width of the page and the slides restart at the beginning when the visitor reaches the last one. The tutorial uses 3 background layers and the foreground to create the parallax 3D effect.

Build a parallax scrolling website interface with jQuery and CSS

Build a parallax scrolling website interface with jQuery and CSS

This tutorial by Pixel Acres is a relatively quick explanation that creates an interesting and well-illustrated demo parallax website. The tutorial text itself explains how parts of the CSS and jQuery work. It is a quick read (with a lot of comments) that explains the inner workings of a well-illustrated parallax example webpage.

Building a Parallax Scrolling Storytelling Framework

Building a Parallax Scrolling Storytelling Framework

This parallax tutorial by Stevan Živadinović, published on Creative Bloq, is an in-depth explanation of how parallax websites work and how to make one. Stevan uses an easily read, conversational tone to explain the steps required to create the parallax website and the theory behind it. Unfortunately though, the code on this tutorial lacks syntax highlighting, making it a bit difficult to read.

jQuery Parallax Tutorial – Animated Header Background

jQuery Parallax Tutorial – Animated Header Background

This parallax jQuery tutorial creates a parallax webpage section that uses visitors' cursor locations as the primary point of reference. It provides an excellent explanation in "The Images" section of how the images work to create the parallax-3D depth effect.

Create a Cool Website with Fancy Scrolling Effects

Create a Cool Website with Fancy Scrolling Effects

This parallax tutorial by Line25 is very in-depth and creates a detailed, scroll-based parallax website. It covers every step of the process of creating a parallax website, from layout and graphic design to creating the HTML, CSS, and javascript. The parallax scrolling is both vertical for the sections of the website, and horizontal for the title, "My Homes on the Web".

Create a Parallax Website Header

Create a Parallax Website Header

This jQuery parallax tutorial by ProgTuts creates a parallax website that uses the location of the cursor as the primary point of reference as opposed to how far the visitor has scrolled down the page. The tutorial is somewhat light on explanation, focusing primarily on the HTML and CSS as opposed to how the javascript works.

Super Easy Parallax Effect with jQuery

Super Easy Parallax Effect with jQuery

This tutorial by Abduzeedo is longer and goes through building the entire parallax website, including the HTML code. It explains how to build the parallax website, step-by-step, adding the code in at each point, then explaining it. The tutorial builds the website as you progress through, as opposed to simply explaining the code.

Easy Parallax With jQuery

Easy Parallax With jQuery

This tutorial by EgStudio is a quick, straight-forward explanation of how to create a simple parallax page. The short 10 lines of code are easy to follow. It clearly explains how the the numbers in the code affect how the parallax website works.

How To Create A Parallax Scrolling Website

How To Create A Parallax Scrolling Website

A simple, easy tutorial, this article describes how to quickly create a simple parallax website using jQuery. The article also provides straightforward explanation of what the code is doing. The tutorial was created by Jack Roscoe and published on Web Design Library.

Tutorial on how to build a Parallax Website

Tutorial on how to build a Parallax Website

This jQuery parallax tutorial leads you through the process of creating the entire parallax website. It starts with loading the jQuery library, then explains the CSS, and lastly the jQuery.

How to create a simple parallax effect

How to create a simple parallax effect

This jQuery tutorial wonderfully explains how to quickly create a parallax website. Created by Sara Vieira and published on Web Designer Depot, this tutorial does a great job of explaining what each portion of the code does. While the HTML at the beginning may seem a bit imposing, the CSS and jQuery are easy to understand. The tutorial also has really great syntax highlighting.

Stellar.js Parallax Website Tutorial

Stellar.js is a jQuery plugin, created by Mark Dalgleish. It aims to make creating parallax websites easier, as well as providing mobile support for parallax websites.

Create A Parallax Website Using Stellar.js

Create A Parallax Website Using Stellar.js

This tutorial creates a simple parallax website with 4 slide-like sections. It creates both a changing background and shaded circles that scroll at different rates, creating a parallax-depth-like effect. This tutorial is published by Jack Rimell on his blog.

Create a Parallax Scrolling Website Using Stellar.js

Create a Parallax Scrolling Website Using Stellar.js

This parallax scrolling tutorial describes how to create a vertical parallax website with different sections, similar to a slide-show. The tutorial begins at the "How Our Site Will Work" header.

It is relatively lengthy and in-depth, but it creates an interesting parallax website when finished. The tutorial was created by Aaron Lumsden and published on Web Design Tuts.

Skrollr.js Parallax Website Tutorial

Skrollr.js is a javascript package designed for creating parallax websites. It does not use jQuery, and is instead a stand-alone library. It is downloadable via the Skrollr.js GitHub Page.

The Skrollr.js website is worth taking a look at just to see the interesting effects. The page is wonderfully constructed with plenty of 3D parallax effects (notice the circles in the background), rotations, transitions.

Merry Scrolling with skrollr.js

Merry Scrolling with skrollr.js

This is a great, easy parallax tutorial. It makes wonderful use of transitions, including scrolling inward, instead of just scrolling down. It also uses a creative bow at the end, as well as a circle, expaning from the center.

Jazz up a Static Webpage with Subtle Parallax

Jazz up a Static Webpage with Subtle Parallax

This parallax tutorial creates a relatively simple, yet elegant vertical parallax scrolling website. It is a bit long, but the tutorial is detailed and does a good job of explaining what the HTML, CSS, and javascript do.

The tutorial is published on Web Design Tuts by Ian Yates and is very popularly linked to by bloggers and people writing about parallax websites.

Simple parallax scrolling tutorial

Simple parallax scrolling tutorial

This is another great tutorial by Petr Tichy. It creates a wonderful website with full-screen size images.

How to create a simple parallax effect

How to create a simple parallax effect

This great tutorial uses skrollr.js to implement slide transitions using skrollr.js. Published by Petr Tichy on iHateTomatoes, this tutorial explains in a clear and straightforward manner how to create fades and moving backgrounds. The code is also displayed in great syntax highlighting, increasing its readability.

CSS Parallax Website Tutorials

These tutorials only use CSS3 to create a 3D parallax scrolling effect. No javascript is used: no jQuery, no libraries, no scripting needed at all.

Fluid CSS3 Slideshow with Parallax Effect

Fluid CSS3 Slideshow with Parallax Effect

This tutorial by Ring Wang on Codrops explains how to create a horizontal parallax slideshow using only CSS. It uses radio buttons to create the effect, determining which "slide" is displayed. The parallax 3D depth is created by moving the map background more slowly than the foreground content.

CSS3 Parallax Scrolling Slider

CSS3 Parallax Scrolling Slider

"CSS3 Parallax scrolling slider" is a parallax scrolling tutorial that only uses CSS to achieve a 3D parallax effect. It uses HTML radio elements to create the different states of the website, determining which section should be displayed. It requires some rather in-depth CSS using CSS selectors, but it is a really interesting effect.

A Note About Our Advertising

We try to optimize our Adsense advertising to help you with web design and development. Our goal is to deliver advertising that will help you find new trends and technologies. From time to time, it informs us about some interesting Wordpress themes and lets us know about some of the latest trends in web hosting services.

We hope that our advertising is helpful, and neither annoying nor distracting. If our advertising is causes you any problems, please let us know and we will do our best to fix it.

Parallax Web Design Resources