RELLAX
Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0).
Have any suggestions or feedback? Reach out @dixonandmoe
Getting Started
npm install rellax --save
or if you're old school like us download and insert rellax.min.js
I’m that default chill speed of "-2" I’m super fast!! I’m extra slow and smooth
Features
Speed
Use the data-rellax-speed
attribute to set the speed of a .rellax
element to something other than the default value (which is -2
). 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 -10
and 10
.
Responsive Speed
Use responsive speed attributes for breakpoint levels that require a different speed. Defaults to the data-rellax-speed
setting in unspecified breakpoints.
I parallax at all different speeds depending on your screen width.
Pass an array of breakpoints (mobile, tablet and desktop respectively).
Centering
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.
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.
Z-index
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 wrapper
property will tell Rellax to watch that element instead.
Refresh
Destroy
Callback
Target node
Instead of using a className you can use a node, handy when using React and you want to use refs
instead of className
.
<div => I’m that default chill speed of "-2"</div> var rellax = thisrellaxRef
In the Wild
If you're using Rellax in production, we'd love to list you here! Let us know: moe@dixonandmoe.com
- Microsoft Fluent
- Gucci Gift
- Bowmore Scotch
- How Much Does a Website Cost
- Laws of UX
- Finch
- Product Designer in San Francisco
- Cool Backgrounds
- EthWorks
- Unlimited Designs
- Airgora
- Lorem Ipsum Generator
- Terry Design
- Deeson
- Alex Bailon Portfolio
Development
In the spirit of lightweight javascript, the build processes (thus far) is lightweight also.
- Open demo.html
- Make code changes and refresh browser
- Once feature is finished or bug fixed, use jshint to lint code
- Fix lint issues then use Google Closure Compiler to minify
- 🍻