A fast, lightweight parallax background library, written in pure JavaScript. No jQuery required.
Fastest - Hardware accelerated and buttery smooth.
Smallest - Only 3 kb total. Other parallax libraries are over 100 kb with jQuery.
Simplest - Add 1 attribute to your HTML. No other parameters.
Responsive-ist - Total responsive design support. Automatically uses the correct image on any device.
We achieve the parallax effect in a unique way, by utilizing the canvas element, which is faster, and causes less problems than other methods.
Simple, documented code that's easy to read. Only 3 functions; no classes, objects, or gimmicks.
Fully iOS and Android compatible – no hacks necessary. Compatible with all browsers released since 2011, including Internet Explorer 9.
Many popular libraries position your parallax elements with translate, or even left or top. None of these are hardware accelerated, and perform poorly on the majority of devices.
While hardware accelerated, this method can require a complex rewrite of your code to prevent flickering. See example of translate3d's flickering here.
Drawing to the canvas is hardware accelerated, and prevents the flickering experienced when using other methods. In some cases, it even performs faster than translate3d - especially on pages with several large parallax backgrounds.
Add a parallax-distance attribute to any element, with a value between 1 (it's close, so little parallax) and 10 (it's far, so lots of parallax). The parallax effect will be applied to the background image.
<div parallax-distance="4">Background gets parallax effect</div>
Parallaxis will automatically use the correct background image.
<div parallax-distance="4">
The responsive background image will get the parallax effect.
</div>
/* Mobile */
div {
background-image:url('mobile.jpg');
}
/* Desktop */
@media (min-width: 768px) {
div {
background-image:url('desktop.jpg');
}
}
Download the latest build from git-hub, or link to the latest build here:
<script src="https://cdn.rawgit.com/gavamedia/parallaxis/master/parallaxis.min.js"></script>