Parallax scrolling is a web design technique where, as a visitor scrolls down a web page, the background images of the web page move more slowly than the images in the foreground. This technique does a great job at moving users through a page and telling a story. This leads many parallax websites to having a single page. If you want to create a modern one-page website based on parallax effect, here are 20 cool parallax scrolling tutorials and examples.

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.

Recreating the Firewatch Parallax Effect

As a web designer you probably cry inside when you hear the word “parallax.” It’s tainted. Dirty. An overused (and quite often improperly used) term that has come to mean “gratuitous scrolling effects” or worse; the complete hijacking of your browser’s scrollbar.

Pure CSS Parallax Websites

This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website.

Parallax Hero Image

What you can achieve through CSS 3D Transforms is limitless. With power comes responsibility, though. There will be cases when you’ll take full advantage of CSS 3D capabilities. In most projects, though, you can just spice things up a little.

Recorded conversations

Parallax navigation concept engine.

The ‘root element’ parallax technique

By combining the power of rem and a small JavaScript function to manipulate the font-size of the html element, we can achieve simple but effective parallaxing.

Blur on Scroll

This pen demonstrates a simple medium.com-like blur image on scroll and content parallax. It gets the scroll position using requestAnimationFrame instead of an onScroll event.

Radial Parallax with SVG, SMIL and CSS

This is a demonstration of a visual effect that combines radial perspective (like Apple’s QuickTime Virtual Reality or Google’s Street View) with the parallax effect that has become so popular in Web design in recent years.

Stag

An experiment resizing and restaging SVG at different aspect ratios.

Paral & Lax

Easy peasy parallax effect.

Pure CSS Parallax Scrolling

Technique that uses CSS 3D transforms. No JavaScript!

Fullscreen drag-slider with parallax

Sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine.

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.

404 – Back to the Future

I guess you aren’t ready for that page yet…

Parallax scrolling

Simple one page website with multiple paralax scrolling backgrounds. Nice effect for your personal portfolio.

GTA 5 CSS3 Parallax

Knockout and CSS3 3D transforms to create a amazing effect.

Parallax Type Thing

A simple parallax pen that also adds a conditional fixed header and blurs the title.

Parallax backgrounds with walk cycle

Multiple background images with CSS3 animation create a multi-depth parallax effect.

Parallax Star background in CSS

Using a very simple sass function, and CSS animation keyframes, built parallax scrolling stars in space. The sass function creates a random star field on each load.

Simple parallax scroll

Simple parallax scroll that can be implemented everywhere.