Parallax Scrolling Website Tutorials
Looking to create a parallax website? We created a parallax scrolling tutorial to help you out.
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.
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.
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.
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.
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.
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.)
Many more jQuery Parallax Scrolling Tutorials.
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.
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.
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.
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.
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.
This is another great tutorial by Petr Tichy. It creates a wonderful website with full-screen size images.
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.
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" 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.