Need help with rellax?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

6.2K Stars 860 Forks MIT License 261 Commits 66 Opened issues


Lightweight, vanilla javascript parallax library

Services available


Need anything else?

Contributors list


NPM Package Minified Size Gzipped Size

Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0).

Getting Started

Using npm

npm install rellax --save

Using yarn

yarn add rellax


Download Locally

if you're old school like us download and insert

in your html
I’m that default chill speed of "-2"
I’m super fast!!
I’m extra slow and smooth



Use the

attribute to set the speed of a
element to something other than the default value (which is
). A negative value will make it move slower than regular scrolling, and a positive value will make it move faster. We recommend keeping the speed between

Responsive Speed

Use responsive speed attributes for breakpoint levels that require a different speed. Defaults to the

setting in unspecified breakpoints.
I parallax at all different speeds depending on your screen width.

Pass an array of breakpoints. Each breakpoint value represents the resolution for mobile, tablet, desktop respectively. Checkout the responsiveness of the




After some fantastic work from @p-realinho, we just released the ability to center parallax elements in your viewport! We'll be building a nice demo website, but for now check out the tests folder for several examples of how it works.

There's two ways to implement centering, either on specific elements or as a global option. 1. #### Element-wise Centering - Add the

to a specific html element
I’m that default chill speed of "-2" and "centered"
I’m super fast!! And super centered!!
I’m extra slow and smooth, and hella centered.
2. #### Global Centering - To activate the center feature in your whole html, add the code your
 tag or JS file:


If you want to sort your elements properly in the Z space, you can use the data-rellax-zindex property

I’m that default chill speed of "-2" and default z-index of 0
I’m super fast!! And on top of the previous element, I'm z-index 5!!

Horizontal Parallax

Horizontal parallax is disabled by default. You can enable it by passing

horizontal: true
in the settings block. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically. Note that this can work together at the same time with the default vertical parallax. If you do not want this, pass
vertical: false
in the settings block.

Custom Wrapper

By default, the position of parallax elements is determined via the scroll position of the body. Passing in the

property will tell Rellax to watch that element instead.




Target node

Instead of using a className you can use a node, handy when using React and you want to use

instead of
. ```jsx
{ this.rellaxRef = ref }}> I’m that default chill speed of "-2"

var rellax = new Rellax(this.rellaxRef) ```

In the Wild

If you're using Rellax in production, we'd love to list you here! Let us know: [email protected] - Bowmore Scotch - Generated Photos - How Much Does a Website Cost - Linux Man Pages - Laws of UX - Finch - Product Designer in San Francisco - Cool Backgrounds - EthWorks - Lorem Ipsum Generator - Deeson - Unlimited Designs


In the spirit of lightweight javascript, the build processes (thus far) is lightweight also.

  1. Open demo.html
  2. Make code changes and refresh browser
  3. Once feature is finished or bug fixed, use jshint to lint code
  4. Fix lint issues then use Google Closure Compiler to minify
  5. 🍻


  • 1.7.1: Remove animation on destory PR
  • 1.7.0: Scroll position set relative to the wrapper PR

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.