Have any suggestions or feedback? Reach out @dixonandmoe
npm install rellax --save or if you're old school like us download and insert
I’m that default chill speed of "-2"I’m super fast!!I’m extra slow and smooth
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.
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 0I’m super fast!! And on top of the previous element, I'm z-index 5!!
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.
Instead of using a className you can use a node, handy when using React and you want to use
refs instead of
<div =>I’m that default chill speed of "-2"</div>var rellax = thisrellaxRef
If you're using Rellax in production, we'd love to list you here! Let us know: firstname.lastname@example.org
Learn Rellax and other web animation skills with a course on CSS Animation Rocks