This site uses third-party cookies, learn more or accept
dark light

Simple JavaScript Parallax

Written by Max Pelic on

Parallax Scrolling (having elements scroll differently than the rest of the page) is popular with current web design. But it can sometimes be difficult to get it to work right, especially when using pure CSS.

That's why I developed this simple Parallax Scrolling plugin, which can be found in action on this CodePen

Here's the code I developed:

Minified JavaScript:

1/** Parallax Scrolling by maxpelic.com **/

2(function(a,b){function c(a,d,e){let b=a[2].toLowerCase(),c=parseInt(a[1]);return c*d+b;}a=document.body.querySelectorAll('[parallax]'),b=-1,window.setInterval(function(){if(window.scrollY===b)return;for(let d=0;d<a.length;d++){let j=a[d].style.transform;a[d].style.transform='';let e=a[d].getBoundingClientRect(),h=e.height+window.innerHeight,f=window.innerHeight-e.top;if(f<0||f>h){a[d].style.transform=j;continue;}let i=f/h;a[d].movement||(a[d].movement={},a[d].hasAttribute('movex')&&(a[d].movement.x=a[d].getAttribute('movex').match(/(-?[0-9]*)(.*)/)),a[d].hasAttribute('movey')&&(a[d].movement.y=a[d].getAttribute('movey').match(/(-?[0-9]*)(.*)/)));let g=[];a[d].movement.x&&g.push('translateX('+c(a[d].movement.x,i,e)+')'),a[d].movement.y&&g.push('translateY('+c(a[d].movement.y,i,e)+')'),a[d].style.transform=g.join(' ');}b=window.scrollY;},60);})();

CSS:

1[parallax]{transition:transform 60ms linear;}

You can copy-paste this code (complete with JavaScript and CSS):

1<script>/*from maxpelic.com*/(function(a,b){function c(a,d,e){let b=a[2].toLowerCase(),c=parseInt(a[1]);return c*d+b;}a=document.body.querySelectorAll('[parallax]'),b=-1,window.setInterval(function(){if(window.scrollY===b)return;for(let d=0;d<a.length;d++){let j=a[d].style.transform;a[d].style.transform='';let e=a[d].getBoundingClientRect(),h=e.height+window.innerHeight,f=window.innerHeight-e.top;if(f<0||f>h){a[d].style.transform=j;continue;}let i=f/h;a[d].movement||(a[d].movement={},a[d].hasAttribute('movex')&&(a[d].movement.x=a[d].getAttribute('movex').match(/(-?[0-9]*)(.*)/)),a[d].hasAttribute('movey')&&(a[d].movement.y=a[d].getAttribute('movey').match(/(-?[0-9]*)(.*)/)));let g=[];a[d].movement.x&&g.push('translateX('+c(a[d].movement.x,i,e)+')'),a[d].movement.y&&g.push('translateY('+c(a[d].movement.y,i,e)+')'),a[d].style.transform=g.join(' ');}b=window.scrollY;},60);})();</script><style>[parallax]{transition:transform 60ms linear;}</style>

Documentation

This plugin is really easy to use. To add parallax scrolling to an element, add the parallax attribute, and either the movex or the movey attribute set to the distance you want it to move.

For example, this would make an element move a total of 100px vertically when it's visible:

1<div parallax movey="100px"></div>

In this example, the element would move 20vw to the left while it's visible:

1<div parallax movex="-20vw"></div>

Like I mentioned, you can view this in action in this CodePen and view a formatted version here.

Share this article:

Previous Article: Pure CSS collapsible menu

Next Article: Change the color of the URL bar with HTML