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.
Parallax navigation concept engine.
The ‘root element’ parallax technique
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.
An experiment resizing and restaging SVG at different aspect ratios.
Paral & Lax
Easy peasy parallax effect.
Pure CSS Parallax Scrolling
Fullscreen drag-slider with parallax
Sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine.
Sass parallax example
404 – Back to the Future
I guess you aren’t ready for that page yet…
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.