by Jakob Bähr

requires jQuery


Demo 1: Speed difference

I am at speed 0.75
I am at speed 1
(practicially background-attachment:fixed)
I am at speed 2
I am at speed 4

Markup: Basics

<script src="jquery.js"></script>
<script src="parallax.js"></script>

<div class="parallax" speed="2">
<!-- Content -->
/* Nothing really
if you use background, make sure you have a height.
if you want to prevent overflow, add a parent with overflow:hidden */

Demo 2: Multilayered

Markup: Multilayered

<script src="jquery.js"></script>
<script src="parallax.js"></script>

<div class="parent">
<div class="parallax layer-1" speed="1.5">
<!-- First Layer -->
<div class="parallax layer-2" speed="2">
<!-- Second Layer -->
.parent {
overflow:hidden; /* personal tipp */
.parallax {


Super-super lightweight!
minified (0.6 kb)readable (1.2 kb)


use Googles jQuery

It probably is cached for the user and doesn't have to load.
<script src="">

Use a smooth scroll plugin

Does it lag in Firefox or Edge? Add some plugin like this to fix this issue. It's not my fault.. *points at microsoft and firefox*


Anyone can use it for free. You can modify it, publish your version. You don't have to, but if you're nice, please link me in your page credits. Love ya!