Rellax is a buttery smooth, super lightweight (1021bytes gzipped), vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0).
Have any suggestions or feedback? Reach out @dixonandmoe
—
🎉 Hiring Designers: Are you using Rellax on a project? Does having a 🍺/☕️/🍵, playing Soundcloud remixes, and experimenting with new design and code ideas get you all giddy? Yea, us too 😜. We're hiring a Junior Frontend Designer in San Francisco (sorry no remote). Let's chat robert@dixonandmoe.com.
npm install rellax --save or if you're old school like us download and insert rellax.min.js
<div class="rellax">
I’m that default chill speed of "-2"
</div>
<div class="rellax" data-rellax-speed="7">
I’m super fast!!
</div>
<div class="rellax" data-rellax-speed="-4">
I’m extra slow and smooth
</div>
<script src="rellax.min.js"></script>
<script>
// Accepts any class name
var rellax = new Rellax('.rellax');
</script><script>
// Also can pass in optional settings block
var rellax = new Rellax('.rellax');
</script>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.
<div class="rellax" data-rellax-percentage="0.5">
I’m that default chill speed of "-2" and "centered"
</div>
<div class="rellax" data-rellax-speed="7" data-rellax-percentage="0.5">
I’m super fast!! And super centered!!
</div>
<div class="rellax" data-rellax-speed="-4" data-rellax-percentage="0.5">
I’m extra slow and smooth, and hella centered.
</div><script>
// Center all the things!
var rellax = new Rellax('.rellax', {
center: true
});
</script><script>
// Start Rellax
var rellax = new Rellax('.rellax');
// End Rellax and reset parallax elements to their original positions
rellax.destroy();
</script>If you're using Rellax in production, we'd love to list you here! Let us know: moe@dixonandmoe.com
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
- 🍻